2.3 KiB
2.3 KiB
文章详情
文章详情页是阅读体验的核心页面，提供沉浸式的阅读环境。
页面元素
文章详情页包含以下元素（从上到下）：
- 阅读进度条 — 页面顶部的进度指示条
- 封面图 — 文章封面（可配置显隐）
- 文章标题 — 大号标题 + 强调线装饰
- 元信息 — 日期、作者、分类、标签、字数、阅读量
- 正文内容 — 文章主体
- 文章目录 — 侧边悬浮（桌面端）或底部抽屉（移动端）
- 点赞按钮 — 文章底部的爱心点赞
- 上下篇导航 — 上一篇/下一篇文章
- 评论区 — Halo 评论组件
阅读进度条
页面顶部有一条细进度条，宽度随滚动位置实时更新，帮助读者了解当前阅读进度。进度条使用强调色显示。
文章目录（TOC）
目录自动从文章内容的标题（h1-h6）中提取生成。
桌面端（1280px+）
目录以固定侧边栏形式显示在文章旁边，位置可选左侧或右侧。目录会跟随滚动高亮当前标题，支持点击跳转。当屏幕空间不足以容纳目录时，目录自动隐藏。
移动端（<1280px）
目录隐藏，右下角显示目录悬浮按钮（FAB），点击后从底部弹出目录抽屉面板。抽屉内目录项可点击跳转，点击遮罩层或关闭按钮关闭抽屉。
代码高亮
使用 Prism.js 实现代码块语法高亮，支持自动语言检测。可在主题设置中选择两种主题：
- Warm：浅色代码高亮，与暖色调设计一致
- Cold：深色代码高亮（Tomorrow Night），适合代码密集型文章
图片灯箱
文章中的图片支持点击放大查看，使用 LightGallery 实现。放大后支持左右切换、缩放和关闭操作。
点赞功能
文章底部的点赞按钮使用 Halo 内置 API：
- 点赞后按钮变为高亮状态，显示爱心填充图标
- 同一文章不可重复点赞（基于 localStorage 判断）
- 点赞数实时更新
上下篇导航
文章底部显示上一篇和下一篇文章的链接，帮助读者连续浏览。可通过主题设置控制显隐。