Dzpszied

Ghost 博客实现文章目录

Ghost 真是一个简洁(lou)的博客系统,很多功能比如归档、标签云都要自己实现。

最近看别人的一些博客有TOC文章目录的功能,一些目录还带有滚动跟踪功能。于是想放在自己的主题里面。

效果图

效果图

实现

相关插件

Github上面有一些生成文章目录及相关插件:

  • jquery.toc by ndabas:提取正文中的标题并生成ol或ul格式的列表,对中文支持较好,但不支持滚动追踪。
  • TOC by jgallen23:支持平滑滚动、滚动追踪。但是似乎中文处理不好,生成的锚很乱,遇到中文标题甚至会重复而失效。测试的时候平滑滚动也不能使用。
  • jquery.tocify.js by gfranko:一个 jQuery-UI 控件,需要引入 jquery-ui 支持。支持滚动追踪,设置项很全,动画效果也不错。缺点大概就是需要 jquery-ui 了。
  • scrollspy:一个滚动监听插件,需要Bootstrap支持。研究 hexo-theme-next 的滚动追踪,发现似乎采用的就是 scrollspy 的方案。

想采用第一种 jquery.toc 的方案,结果写滚动追踪的时候发现要考虑的太多,比如如何控制自动展开一级目录、收起其他目录等等。

最后采用了第三种 Tocify 插件。想要的效果都帮我实现了,真是太省事了🌚。引入 jqueryui 就引入吧...

设计

作为一个单栏主题...在加入文章目录的时候还是很纠结的...

嵌入文章开头吧,不好做滚动追踪(不过在移动端是个不错的注意);
做双栏吧,我又不想做双栏...

1

目录嵌入文章

2

目录作为侧栏

3

目录小边栏

最后,我把目录做成了一个小边栏,把字体尽量调淡不影响文章阅读。
之前加了个背景色,发现并不好看,就索性把背景去掉。

具体实现

在主题项目中新建 partials/toc.hbs 文件作为TOC目录。

<div id="toc"></div>

{{!-- 引入 支持文件 及 Tocify 插件 --}}
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>

{{!-- 配置及生成目录 --}}
<script>
    var toc = $("#toc").tocify({
        selectors: "h2,h3,h4,h5", // 选择要筛选的标题
        extendPage: false, // 页面不够长时拉长页面,这里选择关闭因为感觉留出大片空白不好看- -
        highlightDefault: false // 自动高亮第一条
    });
</script>

post.hbspage.hbs引入TOC即可。

感谢

关于主题的其他问题,欢迎 fork 或 issue 本项目

评论