Bitcron主题的各分类和各标签下的文章列表
欢迎来到《Bitcron主题制作系列教程》。上一次我们说完了归档页面的写法,博客也越来越完整了。而这一篇则来解决文章内页那篇留下的「历史遗留问题」——将分类和标签链接所对应的页面、即各分类和各标签下的文章列表页面显示出来。那么就开始吧!
category.jade
// 引入index.jade
extends index
// 修改标题为「分类:分类名称 - 网站标题」格式
block title
title= '分类:' + posts.category.title + ' - ' + site.title
// 开始修改main内容
block content
相信大家已经很熟悉这个格式了,接着像首页一样将文章全部罗列出来。
block content
// 加上分类名称,格式为「分类:分类名称」
.labeltitle= '分类:' + posts.category.title
for post in posts
// 冒号表示换行,节省空间
h2: a(href= post.url)= post.title
// 用limit函数提取部分内容
.content= post.content.limit(150)
// 调用分页
+h.paginator()
tag.jade
同理,各标签下的文章列表页面由以下代码控制:
// 引入index.jade
extends index
// 修改标题为「标签:标签名称 - 网站标题」格式
block title
title= '标签:' + posts.tags.join('+') + ' - ' + site.title
// 开始修改main内容
block content
// 加上标签名称,格式为「标签:标签名称」
.labeltitle= '标签:' + posts.tags.join('+')
for post in posts
// 冒号表示换行,节省空间
h2: a(href= post.url)= post.title
// 用limit函数提取部分内容
.content= post.content.limit(150)
// 调用分页
+h.paginator()
特别鸣谢矩阵良的提示和解释:
我大概能知道
tag = request.url | replace('https://'+site.domain+'/tag/','')
的意思是【对被请求的url,把'https://'
、域名
、'/tag/'
都用''(无字符)
替代】,不过如果对方不用https的话可能就会出错了(话说现在还有人不用https的吗……),感觉还是写posts.tags
保险,不过因为拿到的是列表,为了写成字符串应该写作posts.tags.join('+')
吧……呃或者.join('-'),Anyway,无所谓,就这么个意思……
(join: 传入一个连接字符,将整个list拼接成长字符串,比如list.join(\n)
.)
category+tag.jade
大家应该也发现了,category.jade
和tag.jade
有很多重复的地方,那么就按照之前所介绍的高效的模板写法将两者合二为一,变成category+tag.jade
:
extends index
block title
// 判断url为/category/则调用分类,为/tag/则调用标签
if request.path.startswith('/category/') and posts.category
title= '分类:' + posts.category.title + ' - ' + site.title
elif request.path.startswith('/tag/') and posts.tags
title= '标签:' + posts.tags.join('+') + ' - ' + site.title
block content
// 判断同上
if request.path.startswith('/category/') and posts.category
.labeltitle= '分类:' + posts.category.title
elif request.path.startswith('/tag/') and posts.tags
.labeltitle= '标签:' + posts.tags.join('+')
for post in posts
h2: a(href= post.url)= post.title
.content= post.content.limit(150)
+h.paginator()
其实还可以将index.jade
和搜索结果页面也一起合并,只需要多加几条判断。有兴趣可以到我的GitHub查看相应代码。那么这次就到这,下次说说显示所有分类和所有标签的页面,算是这篇的姊妹篇,敬请期待。
相关阅读
下一篇:Bitcron主题的所有分类和所有标签页面
返回目录:Bitcron主题制作系列教程
上一篇:Bitcron主题的归档页面