103° 20171,436字评论

心情复杂的归档页面

之所以说心情复杂,是因为搞不清楚到底是技术太菜还是真的没有更好的办法,为了实现想要的归档页面弄得挺繁琐,姑且看做是一个权宜之计吧。本来没有打算写下来,因为有人问为什么应用了新主题「淡泊」却没有一样的归档页面,只好硬着头皮说一下这个「略吃力的方法」,且当抛砖引玉。

归档页面的结构

主题「淡泊」之所以没有归档页面,最主要的原因是从逻辑上来说跟首页没有功能上的差别。唯一的区别就是有没有年份标识。既然如此我想着如果要做归档页面,不如只显示年份,再在每个年份的页面里显示文章列表,这样才讲道理。于是按照分类页面的思路,把年份当做按照时间分类的名称,敲定了归档页面的构成——「按分类」和「按年份」。

我在《Bitcron主题制作系列教程》里也说到过,根据Bitcron的URL匹配规则,url对应的是.jade文件的路径和名称,所以归档页面/archive对应archive.jade,而/archive/2017则对应的是archive文件夹下的2017.jade。理解了这层关系就不难发现,每个年份就得对应一个.jade文件,于是我的archive文件夹里堆满了从2005年至2017年的共12个.jade文件(2008年无文章)。虽然知道繁琐但能实现想要的效果也就欣然动手了。

archive.jade

因为是针对主题「淡泊」的“魔改”,所以就直接放出源代码了,想要适配各自主题的改CSS就好。

extends index

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

block content
    #postlist
        #catlist
            header: h2 按分类
            for category in posts.categories: .block
                a(href=category.url)= category.title
                    sup= category.posts_count

        #archlist
            header: h2 按年份
            entries = d.get_data(types='post', limit=9999, sort='desc').group('-date:year')
            for year, year_posts in entries: .block
                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)
                a(href='/archive/{{year}}')= year + '年'
                    sup= yearly_count

年份.jade

2017.jade为例依次类推,比如2016.jade里将2017改为2016,2018改为2017即可。

extends index

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

block content
    #postlist
        year_posts = d.get_data(types='post', limit=8, sort='desc', date_start='2017-1-1', date_end='2018-1-1')
        +page(as_ul=False)
            for post in year_posts: .block
                a(href=post.url)= post.title
                    sup= (post.visits or 0)

CSS

/* Archive ---------------------------------*/
#catlist, #archlist {
    position: relative;
    margin-bottom: 70px;
    header h2 {
        font-size: 14px;
        font-weight: inherit;
        padding: 0;
        border-bottom: 0;
        margin: 0;
        position: absolute;
        left: -20px;
        top: 40px;
        width: 0;
        white-space: nowrap;
        -webkit-transform-origin: 50% 50%;
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .block {
        display: inline-block;
        padding-right: 50px;
        font-size: 50px;
        line-height: 60px;
    }
    a {
        color: #ddd;
        &:hover {
            color: #333;
        }
    }
}

/* Responsive 适配小屏幕 ---------------------------------*/
@media only screen and (max-width: 668px) {
    #catlist, #archlist {
        margin-bottom: 60px;
        header h2 {
            position: initial;
            right: initial;
            width: initial;
            white-space: initial;
            bottom: initial;
            -webkit-transform-origin: initial;
            -moz-transform: initial;
            -ms-transform: initial;
            -webkit-transform: initial;
            transform: initial;         
        }
    }
}

遗憾

其实我会在已知的情况下仍选择采用此种略为繁琐的方法,也是因为这种结构非常干净整齐,就像好的收纳方法令人神清气爽一样,此种文章归类法令我思路清晰。毕竟对于一个有着近900篇博文的博主来说,能够方便地回顾自己的早期文章也是博客的一个重要功能。而且如此分类,每年的文章数量也不会太多而影响页面速度,即使不使用自动加载功能,limit=366也顶天了,一下子就能刷出一年内的所有文章,一目了然。

唯独在archive.jade里因为要将所有文章按照年份分组,所以必须自建变量空间,虽然写着limit=9999,但据我所知默认最多加载1000篇,考虑到网站速度和系统的承受能力,我非常理解。只是不知道怎么可以只提取年份和文章数,就像分类一样,毕竟我也不需要所有的文章目录。如果这个问题可以解决,那么对于博文必定越来越多的我来说,将是一个非常棒的可持续归类法。

得到神助的更新

2017-11-15更新:感谢Hepo和矩阵良的帮助,可以不用繁琐地写那么多年份.jade,而直接用archive.jade来控制,全部年份索引目录则改到archives.jade下。参考「来啊,折腾啊」下Hepo的评论以及「Bitcron自定义主题按年份归档」,我重新整合了分类、标签和年份归档于archives.jade,顺便加了是否有分类或标签的判断,然后在CSS里加上了#taglist。所有代码全部更新至GitHub了,这里仅做记录。

archives.jade

extends index

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

block content
    #postlist
        if posts.categories
            #catlist
                header: h2 按分类
                for category in posts.categories: .block
                    a(href=category.url)= category.title
                        sup= category.posts_count

        if site.tags
            #taglist
                header: h2 按标签
                for tag_name, tag_count in site.tags: .block
                    a(href='/tag/{{tag_name}}')= tag_name
                        sup= tag_count              

        #archlist
            header: h2 按年份
            entries = d.get_data(types='post', limit=9999, sort='desc').group('-date:year')
            for year, year_posts in entries: .block
                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)
                a(href='/archive/{{year}}')= year + '年'
                    sup= yearly_count

archive.jade

extends index

block title
    title= '归档:' + request.path.split('/')[-1] + '年 - ' + site.title

block content
    if request.path.strip('/')=='archive'
        +response.redirect('/archives')

    #postlist
        year_start_date = '%s-1-1'%request.path.split('/')[-1]
        year_end_date = '%s-1-1'%(request.path.split('/')[-1].int+1)
        year_posts = d.get_data(types='post', limit=8, sort='desc', date_start=year_start_date, date_end=year_end_date)
        +page(as_ul=False)
            for post in year_posts: .block
                a(href=post.url)= post.title
                    sup= (post.visits or 0)
EOF
35°
我爱神户
点击加载Disqus