如何让 Ghost 博客显示阅读时间和进度条？图文教程
本教程介绍了如何在 Ghost 主题中添加阅读时间和进度条。通过使用reading_time帮助器，可以轻松显示文章的阅读时间，并进行自定义。进一步，通过添加<progress>元素和相应的 CSS 样式，实现了美观的阅读进度条。
阅读时间和进度条可以让读者了解他们正在阅读的内容，并用来给读者提示文章是长文还是短文。在本教程中，我们将了解如何向 Ghost 主题添加阅读时间并使用 JavaScript （JS） 实时更新读者的进度。
1.Ghost 显示阅读时间
在 Ghost 中，让读者知道阅读一篇文章需要多长时间非常简单。 reading_time 帮助器输出可定制的、计算出的内容阅读时间。将 {{reading_time}} 添加到 Ghost 模板中，以输出相应的时间。
{{! Ensure you're in a post context }}
{{#post}}
{{reading_time}}
{{! outputs: 3 min read }}
{{/post}}除此之外，还可以进行自定义。
{{! Ensure you're in a post context }}
{{#post}}
{{reading_time minute="Only a minute" minutes="Takes % minutes"}}
{{! outputs: Takes 3 minutes }}
{{/post}}其中，minute 属性表示“阅读时间计算为一分钟或更短时要使用的值”，minutes 属性表示“阅读时间超过一分钟时使用的值” ，% 是一个变量，将替换为分钟数。
2.Ghost 显示阅读进度条
添加进度条元素
第一步是将 <progress> 元素添加到帖子模板中。我们将添加一个类，以便在下一步中更轻松地设置样式。在 post.hbs 中，在 {{!< default}} 后面添加以下代码块：
<progress class="reading-progress" value="0" max="100" aria-label="Reading progress"></progress>进度元素显示任务的完成状态，例如，它可能是文件上传的进度。在我们的例子中，这是读者阅读文章的进度。
设置进度条样式
默认情况下，进度条将由用户的浏览器设置样式。为了保持一致的设计，我们将添加一些 CSS 来设置进度条的样式。在 Ghost 后台的【Code Injection → Site Header】中，添加下面的代码，或者你可以将其添加到项目的 CSS 样式表里面，如果是添加到项目的 CSS 样式表里，记得最后要打包（yarn zip 或 npm zip 命令）。
<style>
.reading-progress {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
height: 5px; /* Progress bar height */
background: #c5d2d9; /* Progress bar background color */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Hide default progress bar */
}
.reading-progress::-webkit-progress-bar {
background-color: transparent;
}
.reading-progress::-webkit-progress-value {
background: var(--ghost-accent-color); /* Progress bar color */
}
</style>使进度条动态化
最后一个组件是添加 JS，该 JS 将在读者滚动文章时动态更新进度条。将此代码添加到 ghost_foot 之前的 default.hbs 中：
{{#is "post"}}
<script>
const progressBar = document.querySelector('.reading-progress');
function updateProgress() {
const totalHeight = document.body.clientHeight;
const windowHeight = document.documentElement.clientHeight;
const position = window.scrollY;
const progress = position / (totalHeight - windowHeight) * 100;
progressBar.setAttribute('value', progress);
requestAnimationFrame(updateProgress);
}
requestAnimationFrame(updateProgress);
</script>
{{/is}}到这一步就结束了！压缩你的主题并将其上传到你的 Ghost 站点，跳到文章页并开始滚动以查看正在运行的实时进度条。
总结
本教程介绍了如何在 Ghost 主题中添加阅读时间和进度条。通过使用reading_time帮助器，可以轻松显示文章的阅读时间，并进行自定义。进一步，通过添加<progress>元素和相应的 CSS 样式，实现了美观的阅读进度条。最后，通过 JavaScript 实现了动态更新进度条，根据读者滚动文章的位置进行实时调整。
Summer知识扩展：