添加系列文章功能
前言
因为写了一堆有关于一、二、三等有关的系列文章,而且这些文章写得时间又肯不是连续的。所以hexo的上一篇、下一篇文章功能就不能满足。需要有个系列文章的功能,于是着手实现该需求…
一开始的思路就是模仿分类(categories)和标签(tags),来创建一个系列(series)来实现。为了弄懂分类和标签的生成实现原理还跑hexo的github仓库上看了下源代码。辛亏是时间不多,用平时的的空闲时间来实现的,所以没在这条探索HEXO大道的深坑上走的太久。
第二天偶然一次机会让我发现了hexo的二级分类,会在一级分类下新建一个二级分类的文件夹,所有该二级分类的文章都在这个文件夹下。就想借助这个二级分类来实现系列功能。
嗯…就在我快用二级分类来实现系列文章功能的时候,我发现之前绕了远路。
之前是想用分类和标签来遍历出对应的文章。由于没有系列这个变量使用了二级分类来代替…但是我们可以通过遍历文章来显示出有关的系列文章。这种方法就容易实现很多,而且比用二级分类代替更加合理。
实现
废话不多说,加下来带大家来实现。在这里只介绍用遍历文章法实现的:
第一步
在改文件里添加一个series,效果如下:
1 | title: {{ title }} |
内容看你自己的主题而定,你只需加个series:就行。
这时候你新建的md文件就都有series:这个项了,我们可以在其中填写系列名称。
第二步
在md文章中添加series:的值。如:
第三步
这步才是干货,在主题对应渲染文章的模板文件下添加系列文件显示。
由于博主的主题用的是ejs写的,以下仅给出ejs的代码:
1 | <% if (post.series){ %> |
解释:
- post.series是该篇文章的系列,即第二步中填的值。
- if (post.series) 如果有值才调用。
- site.posts.sort(‘date’).map(function(p){ 将本站所有的文章按日期排序并遍历
- if (post.series == p.series){ 如果改文章的系列和遍历文章的系列一样,则进入
- <%- url_for(p.path) %>”><%= p.title %> 显示出满足文章的url路径和文章标题
到此为止系列文章的需求实现了
最终效果如下:
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号
hexo折腾-系列文章:
给博客添加个人域名
给hexo的jsimple主题添加代码高亮
给博客添加网易云跟帖评论
给博客添加https支持
博客添加gitment评论
给博客添加APlayer音乐播放器^-^
hexo 使用说明
Lozad.js学习使用
snowfall.jquery.js实现樱花飘落效果
Hexo博客备份—妈妈再也不用担心你使用hexo写博客
github博客迁移至coding并提交百度收录
博客小人
live2d-看板娘小埋
使用disqus评论
anime.js实现logo动画
OwO-可爱的js表情符号插件
给博客添加图集展示
评论系统之来必力
添加系列文章功能
给Hexo博客添加Mathjax数学公式支持
给博客添加上一篇下一篇功能
给博客添加文章目录
hexo评论系统之valine快速使用
快速开发属于自己的APP-FusionApp
miccall主题及html5up站点推荐
CSS+SVG路径描边特效
网页看板娘-Live2d蕾姆
还没好图床的小伙伴看过来,微博是个好图床!