Ghost添加阅读进度条

进度条其实是一个不是很必要的功能，不过，有这个功能，在看文章的时候就能大概知道阅读的进度，总体上如果不是太耀眼，还是挺好的一个功能。要实现这个功能，只需要在Ghost后台的Code injection里面添加两段代码就可以了。

效果参考

Scroll progress widget

In today’s fast-paced digital world, the boundaries between technology and creativity are increasingly blurred. Innovations in augmented reality (AR), blockchain, cloud computing, coding, design, gadgets, graphics, UI/UX, and virtual reality (VR) are reshaping industries and creating new possibilities. This essay explores the dynamic interplay between these elements and their

ArrayBright Themes

代码

函数

在Site footer添加如下代码：

<progress value="0" max="100" data-progress-bar></progress>
<script>
  function getScrollPercent() {
    const h = document.documentElement, 
          b = document.body,
          st = 'scrollTop',
          sh = 'scrollHeight';
    return Math.round((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
  }
  const progressBar = document.querySelector('[data-progress-bar]');
  if (progressBar) {
    progressBar.setAttribute('value', getScrollPercent());
    window.addEventListener('scroll', () => {
      progressBar.setAttribute('value', getScrollPercent());
    });
  }
</script> 

样式

在Site header添加如下代码：