给hexo添加系列文章功能

image

前言

因为写了一堆有关于一、二、三等有关的系列文章,而且这些文章写得时间又肯不是连续的。所以hexo的上一篇、下一篇文章功能就不能满足。需要有个系列文章的功能,于是着手实现该需求...

一开始的思路就是模仿分类(categories)和标签(tags),来创建一个系列(series)来实现。为了弄懂分类和标签的生成实现原理还跑hexo的github仓库上看了下源代码。辛亏是时间不多,用平时的的空闲时间来实现的,所以没在这条探索HEXO大道的深坑上走的太久。

第二天偶然一次机会让我发现了hexo的二级分类,会在一级分类下新建一个二级分类的文件夹,所有该二级分类的文章都在这个文件夹下。就想借助这个二级分类来实现系列功能。

嗯...就在我快用二级分类来实现系列文章功能的时候,我发现之前绕了远路。

之前是想用分类和标签来遍历出对应的文章。由于没有系列这个变量使用了二级分类来代替...但是我们可以通过遍历文章来显示出有关的系列文章。这种方法就容易实现很多,而且比用二级分类代替更加合理。

实现

废话不多说,加下来带大家来实现。在这里只介绍用遍历文章法实现的:

第一步

image

在改文件里添加一个series,效果如下:

title: {{ title }}
date: {{ date }}
author: hojun
avatar: /images/favicon.png
authorLink: 
authorAbout: 
authorDesc: 一个好奇的人
categories: 技术
comments: true
series:
tags: 
keywords: 
description: 
photos: 
---

内容看你自己的主题而定,你只需加个series:就行。
这时候你新建的md文件就都有series:这个项了,我们可以在其中填写系列名称。

第二步

在md文章中添加series:的值。如:


image

第三步

这步才是干货,在主题对应渲染文章的模板文件下添加系列文件显示。
由于博主的主题用的是ejs写的,以下仅给出ejs的代码:

<% if (post.series){ %>
    <div class="post-series"><%= post.series %>-<%= __('series') %>:
        <% site.posts.sort('date').map(function(p){  %>
            <% if (post.series == p.series){ %>
                <li><a href="<%- url_for(p.path) %>"><%= p.title %></a></li>
            <% } %>
        <% }) %>
    </div>
<% } %>

解释:

  • post.series是该篇文章的系列,即第二步中填的值。
  • if (post.series) 如果有值才调用。
  • site.posts.sort('date').map(function(p){ 将本站所有的文章按日期排序并遍历
  • if (post.series == p.series){ 如果改文章的系列和遍历文章的系列一样,则进入
  • <%- url_for(p.path) %>"><%= p.title %> 显示出满足文章的url路径和文章标题

到此为止系列文章的需求实现了

支持作者请悦读百家号文章链接,谢谢~

推荐阅读更多精彩内容

  • 1、准备工作 1.1、git 1.1.1、github 首先注册、登录uername 最好都用小写,因为最后建立的...
    日居_月诸阅读 4,357评论 2 18
  • 1 王梦今年24,作为农村出来的大学生,刚毕业就考上了事业单位,家里人都为之开心。一个女孩子家家的,终于找到一份稳...
    柳小鱼鱼阅读 333评论 1 7
  • 我问佛 为什么我还要面临决择 不是说 前路已然注定结果 佛说 为了你感受真实的自我 我问佛 为何这样的自我如此痛彻...
    月陵无声阅读 185评论 0 3
  • 三体11.把人类看作虫子的三体人似乎忘记了一个事实:虫子从来就没有被真正战胜过。2.碑是那么小,与其说是为了纪念,...
    南之嘉木阅读 316评论 0 0
  • 04128汤熳 "妈妈,我们来切派吧" 最近,小家伙超喜欢我们给他讲这个绘本,我们当初的小心思终于实现了。这套绘本...
    elizabethfairy阅读 178评论 0 0
  • 因为思绪穿越,有些人,虽不相见,却总在你的思绪里窜进窜出,不曾远离。因为思绪穿越,有些事,时隔好久,犹印在记忆的屏...
    宁静遇夏雨阅读 803评论 3 4