为Ghost博客添加目录支持

. 约 3 分钟读完

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


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

本篇已被阅读 


完美的胖达

欢迎来到胖达的竹林 / 作者是人到中年大腹便便的胖达一头 / 说我想说的,写我想写的,拍我想拍的,画我想画的 / 如无意外(偷懒 生病 休假 忙的要死 没东西写)等情况本博客定时更新,时间为GMT零点,望周知

广告

Image Alternative Text

Instagram