hexo添加_给Hexo博客添加文章目录

原标题:给Hexo博客添加文章目录

前言

因为JSimple主题没有自带目录,所以需要自己动手给hexo博客文章添加目录功能。

第一步 查阅hexo文档

在Hexo官网 文档>自定义>辅助函数>最下面,可以找到toc这个函数,看其介绍能知道它就是来实现文章目录的。

第二步 决定目录位置

根据博客浏览文章的页面,决定将目录放在右上角空白处。

第三步 编写主题模板

首先,找到文章模板页面,博主这里是在\themes\jsimple\layout_widget\common-article.ejs这个文件中,插入需要的代码。(因为toc需要post变量,所以我们把post传入)

这里博主采用的是局部模板和局部变量,把目录当成一块独立的组件分离了出去。(你也可以不用分离,直接在当前文件中写详细的代码)

既然用到了局部模板,我们就要新建一个toc.ejs的模板,其中插入的代码如下:

其中,list_number: false表示目录不显示编号。

出来html标签,我们还需要css样式来布局目录的位置大小等。

css如下:

将css引入页面即可。

效果预览

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值