ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

hexo,butterfly添加系列文章功能(二级目录)

2022-01-19 16:58:34  阅读:383  来源: 互联网

标签:butterfly md hexo title series --- 添加 article post


文章目录

更多内容可参考我的博客


本篇文章基於 hexo + butterfly

当我们写一个系列文章的时候,想要在所属该系列的文章上方都展示一个类似于目录的结构,便于反复横跳整个系列。

废话不多说,直接开干!

新建两篇文章用来测试,由于是测试用的,通过hide属性隐藏不在首页展示。

新建test.md

// source\_posts\other\test.md
---
title: test
date: 2022-01-18 21:57:56
series: 测试二级目录
hide: true
tags:
  - Tools
categories:
  - Tools
---
## test

新建test1.md

// source\_posts\other\test1.md
---
title: test1
date: 2022-01-18 21:59:33
series: 测试二级目录
hide: true
tags:
  - Tools
categories:
  - Tools
---
## test1

{% tip warning faa-horizontal animated-hover %} ⚠️ 注意:关键点在于添加相同的series,以便于后期通过series遍历写入TOC {% endtip %}

不想每次手动添加series的,可以修改scaffolds\post.md,这样添加series后每次新建就自带series了

// scaffolds\post.md
---
title: {{ title }}
date: {{ date }}
series: 
tags:
categories:
---

接下来,就是核心步骤,遍历展示目录结构

pug语法注意缩进!

// themes\Butterfly\layout\post.pug

extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug
		
    //- 添加二級目錄 start
    if page.series
      div.post-series
        h3 #{page.series}-系列:
        - let list = site.posts.sort('date', -1)
        - list.each(function(article){
          if article.series == page.series
            - let link = article.link || article.path
            - let title = article.title || _p('no_title')
            li
              a.title(href=url_for(link) title=title)= title
        - })
    //- 添加二級目錄 end

    article#article-container.post-content!=page.content

验证效果,如下图:

series-test

初步完成,各位大佬可以自己改改样式…

标签:butterfly,md,hexo,title,series,---,添加,article,post
来源: https://blog.csdn.net/weixin_43404937/article/details/122584865

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有