第十三篇 Hexo 魔改实录 | 为博客添加直达底部按钮

效果演示

  • 这里由于原主题没有添加直达底部按钮，为了操作更编辑，需要我们自己添加。

实现步骤

1 修改rightside.pug

  • 我们定位到 \themes\anzhiyu\layout\includes\rightside.pug 文件；
  • 找到#rightside-config-show 这个 div 标签；
  • 在这个 div 标签下添加如下代码：
1
2
button#go-down(type="button" title="直达底部" onclick="anzhiyu.scrollToDest(document.body.scrollHeight, 500)")
 i.anzhiyufont.anzhiyu-icon-arrow-down

2 修改主题配置文件

  • 找到 _config.anzhiyu.yml 文件；
  • 找到 rightside_item_order 这个配置项；
  • 在 rightside_item_order 这个配置项下修改：
1
2
3
4
rightside_item_order:
  enable: true
  hide: readmode,translate,darkmode,hideAside
  show: toc,chat,comment