Files
T
nxxy335 dda86294b0 fix: 按 Halo 应用市场审核意见整改外部资源与隐私(v1.2.5 修订)
- 默认零第三方自动请求:移除 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 文档与预览图
2026-11-11 14:37:09 +08:00

2.7 KiB
Raw Permalink Blame History

文章详情

文章详情页是阅读体验的核心页面,提供沉浸式的阅读环境。

页面元素

文章详情页包含以下元素(从上到下):

  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 判断)
  • 点赞数实时更新

上下篇导航

文章底部显示上一篇和下一篇文章的链接,帮助读者连续浏览。可通过主题设置控制显隐。

相关配置