hexo-分类&标签应用

指令解析

代码语言：javascript复制

# 根据scaffolds模板下的page文件创建相应的分类或者标签概念
hexo new page xxx
# 该指令执行完成会在source下相应生成一个xxx文件夹（内有一个index.md文件）

1.分类&标签创建

分类创建

创建分类页面

代码语言：javascript复制

# 执行命令创建分类
hexo new page categories

构建完成：categories/index.md对应内容

代码语言：javascript复制

title: categories
date: xxxx-xx-xx xx:xx:xx

修改index.md文件，将页面类型设置为 categories ，主题将自动为这个页面显示所有分类（可根据自身需求配置相关内容）

代码语言：javascript复制

title: categories
date: xxxx-xx-xx xx:xx:xx
type: "categories"

标签创建

创建标签页面

代码语言：javascript复制

# 执行命令创建标签
hexo new page tags

构建完成：tags/index.md对应内容

代码语言：javascript复制

title: tags
date: xxxx-xx-xx xx:xx:xx

改index.md文件，将页面类型设置为 tags，主题将自动为这个页面显示所有标签（可根据自身需求配置相关内容）

代码语言：javascript复制

title: tags
date: xxxx-xx-xx xx:xx:xx
type: "tags"

2.分类&标签应用

基础应用

_config.butterfly.yml主题配置文件菜单对应

代码语言：javascript复制

menu:
		标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open

配置完成，则可通过导航栏访问到相应的页面

在文章中配置分类和标签

创建一个文章，编辑front-matter，设定相应的分类和标签信息，注意区分分类、标签的层次关系

只有文章支持分类和标签，可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性；而标签没有顺序和层次。

代码语言：javascript复制

title: 个人博客
categories:
  - java-note
  - base
comments: true
tags: 
	- java
	- database
keywords: 'java,database'
abbrlink: b5ea4f7a # 自动生成的永久链接（一般不作改动）
date: xxx-xx-xx xx:xx:xx
updated: xxx-xx-xx xx:xx:xx

预览文章内容，显示信息：

多级分类构建

多级分类构建

代码语言：javascript复制

categories:
	- [java-note, base]
	- [java-note, database]
	- [vue-note]
# 上述分类为：java-note下有base、database两个子分类，而vue-note没有子分类

渲染出的博客信息为下图所示，这篇文章对应包括三个分类分别为base、database、vue-note

对应分类展示如下所示：

此处需要注意的是，通过typora直接编辑的文章内容虽然制定了分类、标签信息，通过hexo g生成后可以在文章中直接访问，但是却没办法通过导航栏进行访问，主要是渲染时并没有检测到对应的页面，因此需要手动通过指令生成页面信息

自定义菜单布局

_config.butterfly.yml主题配置文件菜单对应

代码语言：javascript复制

# 根据日常编辑习惯和内容调整导航栏信息
menu:
    首页: / || fas fa-home
    导航||fab fa-bandcamp:
        文章: /archives/ || fas fa-archive
        分类: /categories/ || fas fa-folder-open
        标签: /tags/ || fas fa-tags
        
    开发||fas fa-home:
        JAVA开发: /java-note/ || fas fa-archive
        框架: /framework-note/ || fas fa-folder-open
        数据库: /database-note/ || fas fa-tags
        前端开发: /front-end-dev-note/ || fas fa-tags
    
    网站||fas fa-home:
        在线工具: /tools/ || fas fa-archive
        友情链接: /link/ || fas fa-link
        
    关于||fas fa-home:
        日常向: /daily/ || fas fa-archive
        娱乐向: /entertainment/ || fas fa-folder-open
        关于: /about/ || fas fa-heart

图标获取：butterfly支持font-awesome v5图标：https://fontawesome.com/v5.15/icons?d=gallery&p=2，也磕通过阿里巴巴矢量图进行获取

文章路径说明

通过永久链接的方式渲染文章链接，在source/_post目录下可根据自身需求设定相应文件目录管理文件信息（原始方式是通过日期、标题渲染链接，通过永久链接的方式最终渲染的内容一般无人为干预的情况下不会做出改变，正常映射），为了更好管理笔记目录，则可根据自身的需求进行分类处理

页面构建

上述menu构建完成，相应需要通过指令生成相应的页面进行编辑，从而实现个性化页面定制（可结合相关插件的引用一步步完善功能），具体可参考heox-theme魔改相关的攻略说明

腾讯云开发者社区 hexo

0 人点赞