You've successfully subscribed to 完美的胖达
Great! Next, complete checkout for full access to 完美的胖达
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
为Ghost博客添加目录支持

为Ghost博客添加目录支持

. 3 min read

我们知道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/


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