943° 2017948字0条评论

Bitcron主题的归档页面

欢迎来到《Bitcron主题制作系列教程》。随着上一篇介绍完post.jade,博客雏形算是基本完成了。这次我来说说博客中不可或缺的归档页面。

基本结构

归档(archive),顾名思义,就是把文章按照时间归类存档的意思。想像一个巨大的仓库里立着一排排柜子,柜子的每个抽屉上都写着时间。拉开抽屉,里面是标记着不同日期的文章,井然有序。所以,一个博客的归档页面的结构往往是这样的:

|-- 2017年(2篇)
|-- 10月20日 文章标题
|-- 05月11日 文章标题
|-- 2016年(1篇)
|-- 02月05日 文章标题
...

实现代码

仍像之前说的,先引入index.jade,然后修改浏览器标题和main内容:

// 引入index.jade
extends index
// 修改标题为「归档 - 网站标题」格式
block title
    title= '归档 - ' + site.title
// 开始修改main内容
block content

block content里面就是具体的实现文章归档的代码了,因为Bitcron官方给出了很棒的示例,所以我就在此基础上进行讲解:

// 用d.get_data取得所有文章并用group函数按照年份倒叙分组(新的文章在前),命名为entries。limit控制每页文章数
entries = d.get_data(types='post', limit=50, sort='desc').group('-date:year')
// 在entries中调用year和year_posts,分别为年份和年份内文章
for year, year_posts in entries
    // 用header包裹年份和文章数
    header
        // 将年份设置为二级标题
        h2= year
        // 设置年份的开始和结束时间
        year_start_date = '%s-1-1'%year
        year_end_date = '%s-1-1'%(year.int+1)
        // 用d.get_data取得某时间段内的文章并返回文章数
        yearly_count = d.get_data(types='post', return_count=True, date_start=year_start_date, date_end=year_end_date)
        // 显示年份内文章数
        span= yearly_count
    // 调用年份内文章列表
    ul: for post in year_posts: li
        // 显示文章的发布时间
        time(datetime= post.date.format('%Y-%m-%d'))= post.date.format('%m.%d')
        // 显示文章标题
        a(href=post.url)= post.title
// 调用分页
+h.paginator()

调用分页的+h.paginator()有三种样式,更多细节请参考官方说明

终极总结

extends index

block title
    title= '归档 - ' + site.title

block content
    #archive
        entries = d.get_data(types='post', limit=50, sort='desc').group('-date:year')
        for year, year_posts in entries
            header
                h2= year
                year_start_date = '%s-1-1'%year
                year_end_date = '%s-1-1'%(year.int+1)
                yearly_count = d.get_data(types='post', return_count=True, date_start=year_start_date, date_end=year_end_date)
                span= yearly_count 
            ul: for post in year_posts: li
                time(datetime= post.date.format('%Y-%m-%d'))= post.date.format('%m.%d')
                a(href=post.url)= post.title               
    
    #sitepager
        +h.paginator()

Bitcron的d.get_data真的很好用,如果熟悉这些参数的话,可以自由构建任何想要的东西。也许细心的你已经注意到,在官方的demo底下写着这么一段话:

实际上,指定path参数,可以获得某个文件夹(分类)下的日志数、照片数、文件数,也可以进一步是某个年份、月份 & 某个文件夹下的日志数 .etc,这个要视实际情况机动处理。

我曾按照这个思路写了特别的分类页面相关阅读推荐特别的归档页面,所以已经成为了d.get_data的脑残粉。

好了,今天的介绍就到此为止,我要去激活脑细胞了,下次再见!

相关阅读

下一篇:Bitcron主题的各分类和各标签下的文章列表
返回目录:Bitcron主题制作系列教程
上一篇:Bitcron主题的文章内页

EOF
702°
间隔年日记第33周
Comments
Write a Comment
点击加载Disqus