Skip to content

文章

文章配置控制文章详情页的展示方式,包括封面图、元信息、目录导航、代码高亮等功能。这些设置影响每一篇文章的阅读体验。

配置项一览

配置项类型默认值说明
article_show_cover开关true显示封面图
article_show_date开关true显示发布日期
article_show_category开关true显示分类
article_show_tags开关true显示标签
article_show_nav开关true显示上下篇导航
article_show_toc开关true显示文章目录
article_toc_position下拉left目录位置:left / right
article_show_word_count开关true显示字数统计
article_show_visit_count开关true显示阅读量统计
article_show_read_time开关false显示预计阅读时间
article_code_theme下拉warm代码高亮主题:warm / cold
article_toc_expand下拉active目录展开模式:active / all
article_show_related开关false显示相关文章推荐
article_related_title文本相关推荐相关文章标题
article_show_share开关true显示分享按钮
article_share_title文本分享分享区域标题

详细说明

封面图(article_show_cover)

开启后,文章详情页顶部会显示封面图(全宽展示)。封面图来自 Halo 后台编辑文章时设置的「封面图」字段。

TIP

如果文章未设置封面图,即使开启此选项也不会显示任何内容,页面会自动调整布局。建议为重要文章设置封面图以获得最佳视觉效果。

元信息展示

以下开关控制文章标题下方的元信息区域:

配置项说明
article_show_date显示文章发布日期
article_show_category显示文章所属分类(可点击跳转)
article_show_tags显示文章标签列表(可点击跳转)
article_show_word_count显示文章字数统计
article_show_visit_count显示文章阅读量
article_show_read_time显示预计阅读时间(默认关闭)

TIP

预计阅读时间基于中文约 300 字/分钟、英文约 200 词/分钟的阅读速度估算。如需开启,建议同时开启字数统计,两者配合提供完整的阅读参考信息。

上下篇导航(article_show_nav)

开启后,文章底部会显示「上一篇」和「下一篇文章」的导航链接,方便访客连续阅读。

文章目录(article_show_toc)

开启后,文章页面会显示基于标题层级自动生成的目录(Table of Contents),帮助读者快速定位和跳转到文章各章节。

目录位置(article_toc_position)

说明
left目录显示在正文左侧(默认)
right目录显示在正文右侧

桌面端行为

  • 目录以侧边栏形式固定显示
  • 滚动时自动高亮当前阅读位置对应的目录项
  • 点击目录项平滑滚动到对应章节
  • 当文章标题较少(少于 2 个)时,目录区域自动隐藏

移动端行为

  • 目录不显示侧边栏,而是在文章标题下方显示一个可展开的目录按钮
  • 点击按钮弹出目录面板,选择后自动关闭
  • 这种设计避免了移动端屏幕空间不足的问题

TIP

目录仅提取文章中的 <h2><h3> 标签生成。建议在撰写长文时合理使用二级和三级标题,以获得结构清晰的目录。

代码高亮主题(article_code_theme)

WarmIsland 使用 Prism.js 实现代码语法高亮,提供两种主题风格:

说明
warm暖色调代码主题,与暖屿整体风格一致(默认)
cold冷色调代码主题,类似经典代码编辑器风格,适合技术博客
yaml
# 技术博客推荐
article_code_theme: cold

# 生活博客推荐
article_code_theme: warm

TIP

代码高亮支持多种编程语言,包括 JavaScript、Python、Java、Go、Rust、YAML、JSON、Bash 等。语言检测基于代码块的语言标记自动完成。

目录展开模式(article_toc_expand)

控制文章目录的展开方式:

说明
active仅展开当前阅读位置所在的分组,其余分组折叠(默认)
all全部展开,显示所有层级的目录项

TIP

对于标题层级较多的长文,推荐使用 active 模式,可以让读者更聚焦于当前章节。对于短文或标题层级较少的文章,all 模式可以一次性展示完整目录结构。

相关文章推荐(article_show_related)

开启后,文章底部会显示相关文章推荐列表,帮助读者发现更多感兴趣的内容。相关文章基于 Halo 的随机推荐算法选取。

相关文章标题(article_related_title)

自定义相关文章推荐区域的标题文字,默认为「相关推荐」。仅在 article_show_related 开启时显示此配置项。

yaml
article_show_related: true
article_related_title: "猜你喜欢"

分享功能(article_show_share)

开启后,文章底部会显示分享按钮,支持以下社交平台:

平台说明
QQ点击后弹出 QQ 分享窗口,自动携带文章标题和链接
微信扫码分享到微信(生成文章完整 URL 的二维码)
微博分享到新浪微博
X (Twitter)分享到 X
Facebook分享到 Facebook
Telegram分享到 Telegram
复制链接复制文章链接到剪贴板(始终显示)

分享渠道(article_share_channels)

选择要显示的分享按钮,可多选。默认选中 QQ、微信、微博。复制链接按钮始终显示,不可关闭。

渠道默认选中
QQ
微信
微博
X (Twitter)
Facebook
Telegram

图标来源

分享按钮图标来自 Font Awesome(Free v7.2.0,CC BY 4.0 / SIL OFL 1.1 协议)和 Simple Icons(CC0 协议)。微信图标点击后会弹出二维码弹窗,用户可使用微信扫码分享。

分享区域标题(article_share_title)

自定义分享区域的标题文字,默认为「分享」。仅在 article_show_share 开启时显示此配置项。

yaml
article_show_share: true
article_share_title: "分享这篇文章"
article_share_channels:
  - qq
  - wechat
  - weibo

TIP

分享功能会自动携带文章标题和完整链接,无需手动配置分享内容。微信分享通过二维码实现,二维码内容为文章的完整 URL(包含域名),用户扫码后可直接打开文章。QQ 分享通过弹窗方式打开 QQ 分享页面。移动端会优先显示适合移动端的分享方式。

阅读增强功能

除了可配置的项目外,文章详情页还包含以下内置功能:

阅读进度条

页面顶部显示一条阅读进度条,随滚动位置实时更新,让读者直观了解当前阅读进度。进度条颜色跟随强调色。

点赞按钮

文章底部提供点赞按钮,访客可以点击表达对文章的喜爱。点赞数据由 Halo 核心功能提供。

LightGallery 图片灯箱

文章中的图片支持点击放大查看,基于 LightGallery 实现:

  • 点击图片弹出灯箱查看大图
  • 支持左右切换浏览多张图片
  • 支持缩放、旋转等操作
  • Esc 或点击背景关闭灯箱

TIP

LightGallery 会自动识别文章正文中的所有 <img> 标签并应用灯箱效果,无需手动配置。

相关页面

基于 GPL-3.0 许可发布