nxxy335
dda86294b0
- 默认零第三方自动请求：移除 21 个模板的 preconnect/dns-prefetch、PrismJS+autoloader、qrcode-generator 及内置一言/IP 定位 API - 一言与代码高亮配色改为自托管；欢迎弹窗自定义 IP 接口改为 opt-in；微信分享改为复制链接；LightGallery 按 GPLv3 使用 - README 新增「外部资源与隐私」「验证与回归测试」章节，修正无效链接并补充字体 OFL 来源；同步 docs 与修正虚构的目录树 - friends 等 12 处 #strings.substring 加空值保护；logo 由两份 1.5MB 压缩去重为单份 146KB - 新增 pnpm audit:external 与打包前置合规审计；制品补齐 34 个 docs 文档与预览图
67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
# 文章详情
|
||
|
||
文章详情页是阅读体验的核心页面，提供沉浸式的阅读环境。
|
||
|
||
## 页面元素
|
||
|
||
文章详情页包含以下元素（从上到下）：
|
||
|
||
1. **阅读进度条** — 页面顶部的进度指示条
|
||
2. **封面图** — 文章封面（可配置显隐）
|
||
3. **文章标题** — 大号标题 + 强调线装饰
|
||
4. **元信息** — 日期、作者、分类、标签、字数、阅读量
|
||
5. **正文内容** — 文章主体
|
||
6. **文章目录** — 侧边悬浮（桌面端）或底部抽屉（移动端）
|
||
7. **点赞按钮** — 文章底部的爱心点赞
|
||
8. **上下篇导航** — 上一篇/下一篇文章
|
||
9. **评论区** — Halo 评论组件
|
||
|
||
## 阅读进度条
|
||
|
||
页面顶部有一条细进度条，宽度随滚动位置实时更新，帮助读者了解当前阅读进度。进度条使用强调色显示。
|
||
|
||
## 文章目录（TOC）
|
||
|
||
目录自动从文章内容的标题（h1-h6）中提取生成。
|
||
|
||
### 桌面端（1280px+）
|
||
|
||
目录以固定侧边栏形式显示在文章旁边，位置可选左侧或右侧。目录会跟随滚动高亮当前标题，支持点击跳转。当屏幕空间不足以容纳目录时，目录自动隐藏。
|
||
|
||
### 移动端（<1280px）
|
||
|
||
目录隐藏，右下角显示目录悬浮按钮（FAB），点击后从底部弹出目录抽屉面板。抽屉内目录项可点击跳转，点击遮罩层或关闭按钮关闭抽屉。
|
||
|
||
## 代码高亮
|
||
|
||
主题**不再自带 Prism.js 运行时**（含按语言从 CDN 动态加载组件的 autoloader）。语法高亮由
|
||
Halo 应用市场的代码高亮插件或「API 扩展包」服务端高亮输出，主题只提供两套自托管的
|
||
`.token` 配色，在「主题设置 → 文章 → 代码高亮主题」中切换：
|
||
|
||
- **Warm**：浅色代码高亮，与暖色调设计一致（默认）
|
||
- **Cold**：深色代码高亮（Tomorrow 风格），适合代码密集型文章
|
||
|
||
未安装高亮插件时，代码块仍以等宽字体正常显示，只是没有语法着色；主题不会因此报错，
|
||
也不会发起任何外部请求。
|
||
|
||
## 图片灯箱
|
||
|
||
文章中的图片支持点击放大查看，使用 LightGallery 实现。放大后支持左右切换、缩放和关闭操作。
|
||
|
||
## 点赞功能
|
||
|
||
文章底部的点赞按钮使用 Halo 内置 API：
|
||
|
||
- 点赞后按钮变为高亮状态，显示爱心填充图标
|
||
- 同一文章不可重复点赞（基于 localStorage 判断）
|
||
- 点赞数实时更新
|
||
|
||
## 上下篇导航
|
||
|
||
文章底部显示上一篇和下一篇文章的链接，帮助读者连续浏览。可通过主题设置控制显隐。
|
||
|
||
## 相关配置
|
||
|
||
- [文章配置](/config/article) — 封面图、目录、代码高亮、点赞等
|
||
- [评论配置](/config/comment) — 评论样式和头像显示
|