Bricks制作博客列表页和归档页

秦半两发布于 2022年 11月 12日
目 录

    什么是博客列表页?

    博客列表页是汇聚博客文章的目录页,可以是全部博客文章,也可以是部分文章。

    制作博客列表页的好处?

    能够让访客更加方便地查找我们的其他文章,提升访问体验,从而增加他们在我们网站上的停留时间。

    博客列表页有哪些类型?

    常见的是Blog页面(展示全部的博客文章)这种手工新建的页面,另外还有文章的分类(category)、标签(tag)、作者等默认归档。

    制作Blog列表页面

    1.在 Pages 里面新建一个页面作为博客列表页,并使用bricks编辑。

    新建页面
    新建页面

    2.按照正确的容器层级,我们依次添加 标题小部件Posts小部件。Post小部件实际上就是自带 Query Loop 功能的小部件。在 Layout 中提供了4种现成的布局,分别是List、Grid、Masonry、Metro。假如大家不愿局限于默认布局,可以使用容器的Query Loop的功能进行自定义布置。

    使用Post小部件
    使用Post小部件

    FIELDS 选项下新增 标题、摘要、阅读更多 等常规内容。注意,这些都是从动态数据下拉框中选择对应字段的。

    {post_excerp:120} 这个字段中的数字是用来控制显示的摘要字数的,所以120这个数字可以任意改成我们想要的。但是可能会出现,画布中预览显示的字数与我们设置的字数不一致,这其实是个Bug,等保存后到前端查看会是正常显示的。

    {read more} 这个字段在画布中预览显示的是英文。它是根据设置的网站语言自动显示的,所以即使后端预览显示的其他语言,在前端查看的时候依然会是网站语言,这应该也算是个Bug。

    在fields中添加字段
    在fields中添加字段

    剩下选项的详细设置,大家就自行设置吧。

    3.设置文章显示范围。Post小部件的content选项卡下面有个Query图标,这就是筛选范围的功能。当我们不设置时,默认是全部文章;我们可以限定条件,设置成部分文章;或显示其他类型,不一定是博客,还支持页面、媒体库、cpt页面等。

    设置query条件
    设置query条件

    4.调整好内距和外距等样式参数,点击保存即可。

    制作Category、Tags等归档页面

    1.在 Bricks>Templates 里新建列表页模板。模板类型选择 Archive ,顾名思义列表就是归档嘛。

    新建归档页模板
    新建归档页模板

    2.列表页设置同Blog列表页设置步骤一样。

    3.将模板应用到具体的category、tag等类型。下图红框内的几项中最常用的就是 Categories & Tags 类型。

    应用模板
    应用模板

    4.保存设置,到对应的归档页面查看是否生效。

    小结

    制作Blog列表页面和制作普通页面的流程一样,无需使用bricks模板;制作归档页面则需要用到bricks模板功能。良好的列表页和归档页将会让网站访客的浏览体验提升一大截。

    这篇文章对你有帮助吗?
    [ 评价次数: 0 ; 满意度: 0/5 ]

    欢迎留言