我们知道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/
一步步教你从零开始搭博客系列：
