HEXO技巧分享-文章列表实现

摘要

本文介绍如何通过分类实现文章列表显示,主要是迎合博客希望点击某个导航栏栏链接页面直接显示
相关文章列表,如图

系列推荐:
HEXO-建站系列
HEXO-优化系列
HEXO-进阶系列


前言

为实现文章列表的显示方式,我们通过HEXO的分类功能实现。
操作步骤主:

  • 1、修改HEXO POST模板,添加categories。 作用:以后的文章将会以此作为模板新增。
  • 2、新增一文章,并修改分类属性。 作用:分类属性如果被设置,在HEXO编译会生成对应分类目录
  • 3、修改主题配置文件(config.yml),添加MENU分类字段 作用: 导航栏显示分类链接
  • 4、假定为中文网站,修改主题目录下的语言配置文件(zh-Hans.yml) 作用:导航栏链接显示中文

实施细节:

修改HEXO POST模板,添加categories

在你的HEXO根目录下,找到文件夹scaffolds,此文件夹下定义创建文章的基本模型,你可以修改此模板
实现每次进行HEXO NEW 文章名,文章会以您的模板进行对应配置属性创建。这里我们主要是新增categories
字段,让每次新增文章都会打上此属性字段。

新增一文章,并修改分类属性

通过git bash 新建文章 hexo new 你的文章名,并打开您的文章,在categories写上你的分类名字,
此操作后并保存文档,在你进行hexo g编译的时候会在PUBLIC目录下的 categories下建立以你分类名字的
文件夹,这一步很重要,以后的链接将定向到此文件夹。(本文的测试分类名为:ittech 中文名技术)

修改主题配置文件(config.yml),添加MENU分类字段

此部分主要在导航栏显示你的分类作为链接字段。 就如第三部的分类目录位置 为/categories/ittech

修改主题目录下的语言配置文件(zh-Hans.yml)

此部分是将ittech翻译为中文的”技术”,请修改语言的文件zh-Hans.yml 文件在对应的主题目录下的languages

到此你已经完成所有的操作,请重新编译你的网站文件

结语

如果你还需要了解更多技术文章信息,请继续关注Jory博客

看一看,共同关注,共同分享与讨论!