logo of Shuibaco

Bitcron主题的各分类和各标签下的文章列表

2017. / 907字 / 1,067阅 / 0评

欢迎来到《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.jadetag.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主题的归档页面

916°
共鸣
Comments
Write a Comment
点击加载Disqus