154° 20171,187字评论

Bitcron主题的文章内页

欢迎来到《Bitcron主题制作系列教程》。上一篇说了Bitcron的主题首页index.jade的示例写法,今天来说一下文章内页post.jade。有了它,博客算是基本成立了。

block title

之前介绍过block-extends的写法,终于可以实际使用一下了。首先修改显示在网页浏览器标签上的标题:

// 引入index.jade
extends index
// 修改标题为「文章标题 - 网站标题」格式
block title
    title= post.title + ' - ' + site.title

有了post.titlesite.title这两个API,便可以任意组合想要的格式。比如上面例子里用-连接,还可以用|连接为「文章标题 | 网站标题」的格式(title= post.title + ' | ' + site.title)。注意单引号内的连接符两边要留空格,否则没有间隔可能影响阅读。或者不要网站标题也行,简单干脆。

block content

接下来就是重点main部分,还是一样的先用block content标记修改开始,接着放入文章页面的内容。

文章信息

除了上次介绍的三个post属性之外,还有很多值得挖掘。其中最有意思的要数文章信息了,比如发布时间、文章字数、浏览数、评论数等等。这些在我的另一篇关于计数的博文里都做了详细总结,可做参考。

// 发布时间之我爱用的标准格式
time(datetime= post.date.format('%Y-%m-%d'))= post.date.format('%Y.%m.%d')
// 浏览数、评论数和文章字数
span= (post.visits or 0)
span= (post.comments_count or 0)
span= post.text_words

时间格式可以参照上面给出的链接里的附录进行自定义,比如2017-10-21格式的代码为%Y-%m-%d

// 判断如果有分类
if post.category
    a(href=post.category.url)= post.category.title

// 判断如果有标签
if post.tags
    // 提取标签
    for tag in post.tags
        a(href='/tag/{{tag}}')= tag

正文

文章页面最主要就是文章内容了,跟首页一样用post.content输出全文。这里因为是单独一篇文章,所以不需要调用posts变量空间,也就省去了首页的那一行for post in posts

// 文章内页的标题就不用带链接了
h2= post.title
// 正文全文输出
.content= post.content

分页导航

如果希望在文章页里放置「上一篇」「下一篇」的分页导航,可以利用posts.previous_one(新)和posts.next_one(旧)这两个API构建:

// 判断如果有新一篇
if posts.previous_one
    a.pre(href=posts.previous_one.url)= posts.previous_one.title
// 如果没有则返回信息
else
    span.pre 没有更新的啦!

// 判断如果有旧一篇
if posts.next_one
    a.next(href=posts.next_one.url)= posts.next_one.title
// 如果没有则返回信息
else
    span.next 没有更早的啦!

评论

Bitcron将评论都“浓缩”在+post.comments_as_html()里了,所以直接调用即可,非常方便。

post.jade总述

综上所述,文章内页post.jade可以这么写:

extends index

block title
    title= post.title + ' - ' + site.title

block content
    #info
        time(datetime= post.date.format('%Y-%m-%d'))= post.date.format('%Y.%m.%d')
        if post.category
            span: a(href=post.category.url)= post.category.title
        if post.tags
            for tag in post.tags
                span: a(href='/tag/{{tag}}')= tag
        span= (post.visits or 0)
        span= (post.comments_count or 0)
        span= post.text_words

    #post
        h2= post.title
        .content= post.content

    #postpager
        if posts.previous_one
            a.pre(href=posts.previous_one.url)= posts.previous_one.title
        else
            span.pre 没有更新的啦!
        if posts.next_one
            a.next(href=posts.next_one.url)= posts.next_one.title
        else
            span.next 没有更早的啦! 

    #comments
        +post.comments_as_html()

文章信息、正文、分页导航和评论分别用不同标签包裹起来,这么一来不仅利于写CSS样式,条理也非常清晰。

至此,博客已经可以顺利运转了,就是还没有穿“衣服”丑了点。不过细心如你可能已经发现,分类和标签的链接没有对应页面,这我将在接下来的文章中进行说明。那么下次见啦!

相关阅读

下一篇:Bitcron主题的归档页面
返回目录:Bitcron主题制作系列教程
上一篇:Bitcron主题的首页

EOF
79°
豆瓣评论
点击加载Disqus