在Cais模板中,首页的摘要会自动生成,其机制是摘取文章的前200字。这样做的好处很明显,即免去了写作者的不少麻烦。作者只需将注意力放在撰写正文上,顶多再想一个标题就能完成一篇文章,而且还能保证首页格式的齐整(因为有200字的限制嘛)。

但自动生成的摘要在实际上并起不到摘要本该具有的提纲挈领作用。因为每个作者的写作习惯不同,不一定会将文章的重要内容放在起初的200字内。这就会给阅读者造成一个障碍——当他们希望在首页快速通过浏览文章摘要来筛选信息时,往往会束手无策。

出于此类考虑,我觉得还是有必要为Cais模板增加一个手动添加文章摘要的功能。

事实上,要实现这一点并不困难。在该模板中,与摘要相关的控制字段出现在mixins.jade文件中。只需简单搜索,就能找到如下代码:

if is_detail
            .post-content= post.content
    else
        .post-content= post.content.limit(200).no_pic

上述代码的逻辑很清晰,首先浏览器会判断页面中的文字内容处在「普通文章页」还是「首页」,前者需要输出详情(detail),而后者只需输出摘要,这一部分可以通过if/else来实现。而在摘要控制部分,我们则通过limit函数来将字数控制在200以内,且不输出图片(这个设置很好,首页出现图片会显得相当杂乱,继而破坏本模板简洁的调性)。

要在上述代码的基础上增加手动摘要的功能,思路需要有所变化。首先,我们同样要判断文字出现在首页还是普通文章页。如果确定文字位置为首页后,则需要增加一个步骤,即判断文章的信息中是否有摘要(intro)的设定。如果已手动添加过摘要,那么我们将直接把摘要当作出现在首页的文字内容进行输出,如果并没有添加摘要,那么继续按照200字的限制来自动截取部分文字。

思路理清后,我们就可以动手来修改mixins.jade文件了,相关代码如下:

if is_detail
            .post-content= post.content
        else
            if post.metadata.intro
                .post-content= post.metadata.intro
            else
                .post-content= post.content.limit(200).no_pic                

完成上述修改后,我们的新模板就已经具有手动添加摘要的功能。那么在撰写文章的时候,我们该如何添加相关文字呢?步骤其实很简单,只需要在文章的开始部分添加intro:字段就可以了,冒号之后键入摘要,就会正常显示在首页。

2016-08-18_屏幕快照 2016-08-18 17.47.23.png

另外,我在完成上述修改后发现,摘要尽管被当成普通的「文章内容」(.post-content)得到输出,但是在首页上,它的下边距与自动生成的文字有所差异。这可能是原模板未在CSS中对.post-content的下边距进行定义所致。对此,我们采用一个简单粗暴的办法予以解决,即在「Farbox后台-网站管理-渲染-插入脚本中」输入以下代码:

<style>
    .post-content {
        margin-bottom:30px;
    }
</style>

至此,手动添加摘要的功能就被添加到了Cais模板里。一方面,我们可以在首页中简要地说明文章主要内容;另一方面,我们也可以有意识的控制出现在主页上的文字形式,以避免出现各种混乱1。以上所有代码的出处都可以在Farbox作者提供的教程《页面变量》《模板语法》中找到。

项目地址



  1. Cais原模板的首页不支持对Markdown和HTML语法的解析及渲染,因此如果你在文章的前200字中定义了一些格式,就会令页面变得极其混乱。