ghost-progress-plugin 预览

滚动时顶部的进度条会从 0% 填充到 100%。在左侧面板修改选项，嵌入代码也随之更新。

开始之前

ghost-progress-plugin 是一个轻量、无依赖的 Ghost 阅读进度条。它最初是为 Ghost 而做，但同样适用于基于 Notion 的博客，以及任何能添加脚本的地方。阅读时一条细条会填充，显示你读到文章的哪个位置。本页就是实时示例，顶部的进度条正是真实运行的组件。

安装方法

无需构建、无需修改主题文件，粘贴下面这段代码即可完成安装：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.css">
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-progress-plugin@1/progress.min.js"
        data-content=".gh-content"
        data-position="top"></script>

代码注入

在 Ghost 中，粘贴到 Settings → Code injection → Site Footer。基于 Notion 的托管，则放进自定义代码处：oopy 在站点设置里有 head/footer 代码框，super.so 有 Custom Code 区域，在那里把 data-content 设为 .notion-page-content。其他网站则放在结束标签 </body> 之前。

选项设置

所有行为都通过脚本标签上的 data-* 属性配置：可设置正文选择器、位置、粗细和 z-index：

data-content=".gh-content"
data-position="top"
data-height="4"
data-z-index="100"

自定义

进度条的颜色和粗细都可自由调整。所有类名和 CSS 变量都以 greedylabs-ghost-progress 命名空间隔离，绝不会与你的主题冲突。

颜色

填充色默认跟随 Ghost 主题强调色（--ghost-accent-color）。要更改，可设置 data-color 或覆盖 CSS 变量。未读部分的轨道默认透明，若想在 0% 时也能看到进度条，请给轨道设置颜色：

.greedylabs-ghost-progress {
  --greedylabs-ghost-progress-track: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  .greedylabs-ghost-progress {
    --greedylabs-ghost-progress-track: rgba(255,255,255,.14);
  }
}

位置

用 data-position 设置顶部或底部，data-height 设置粗细(px)。当文章顶部到达视口顶部时为 0%，底部到达视口底部时为 100%。

常见问题

它以整页为准还是以文章为准？

以你用 data-content 指定的文章为准。页眉、封面图和页脚不计入进度。

为什么顶部看不到进度条？

在 0% 时填充宽度为 0，且轨道默认透明。给轨道设置颜色（见配色一节），空的时候也能看到进度条。

在 Ghost 之外能用吗？

能。只要能注入脚本，用 data-content 指向你的正文容器即可。Notion 是 .notion-page-content。

结语

ghost-progress-plugin 是 MIT 许可的开源项目，代码与问题反馈都在 GitHub 上。在左侧面板调整选项，满意后复制嵌入代码即可。如果它帮到了你，欢迎请我喝杯咖啡 ☕。