为Ghost博客添加目录支持

完美的胖达 -

我们知道Markdown现在很流行，并且Ghost博客原生编辑器支持直接编写Markdown代码来实现内容的格式化。

暴击

但是，Ghost博客的功能简陋再一次的表现了存在感，丫的没有原生目录支持。
好吧，没办法，估计老外没这需求？只能自己动手丰衣足食了。
由于本博客采用了Nubia主题，因此和普通原生Ghost略有不同，请周知并自行做相关调整。

引用JS文件

首先修改默认页文件default.hbs，做好js文件引用。

cd /var/www/ghost
sudo nano content/themes/nubia/default.hbs

新增如下内容：

<script src="//lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//lib.baomitu.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{asset "js/jquery.tocify.min.js"}}"></script>

别忘记下载jquery.tocify.min.js文件放置在content/themes/nubia/partials/asset/js目录下。
https://github.com/gfranko/jquery.tocify.js/tree/master/src/javascripts

新增目录元素

再修改侧边栏文件

sudo nano content/themes/nubia/partials/sidebar.hbs

新增如下内容：

  {{> sidebar/widget-toc}}

生成目录代码

再新增目录Widget文件

sudo nano content/themes/nubia/partials/sidebar/widget-toc.hbs

输入如下内容：

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

此处我并没有显示一级标题，这样如果一些短文不需要目录就直接使用一级标题或不用即可。

美观调整

代码就这么多，结束了吗？
并没有，我们仍需要在Code-Injection中输入对应CSS代码以供调用。
CSS中可以根据个人审美自行调节各项内容实现不同风格的目录。
在Header中输入：

<style>
#toc {
    position: fixed;
    left: 50%;
    top: 20%;
    margin-left: 590px;
    border-left: 1px solid #eeeeee;
}
#toc a {
    display: block;
    color: #cccccc;
}
#toc a:hover {
    padding: 0;
    color: var(--main-color,#666666);
}
#toc .active a {
    color: var(--main-color,#666666);
}
#toc ul {
    margin-left: 1em;
}
#toc li {
    display: block;
}
</style>

最后别忘了将权限交给ghost并重启网站服务。

sudo chown ghost:ghost ./content
ghost restart

大功告成

快打开博客网页看看，目录功能是否实现了呢？
本网站效果即如贴所示。
注：目录效果需用电脑查看才能显示，移动设备宽度不够应该是看不到的，抱歉。

参考链接：
https://blog.ddiu.site/ghost-toc/

一步步教你从零开始搭博客系列：