https://akilar.top/posts/615e2dec/ 这个是我看的教程 我直接复制的源码

友情链接 | LrcShare

实现hexo标签的可以折叠

hexo标签的使用方法

要实现Hexo标签的可折叠，可以使用Hexo内置的folding-block插件。

首先，在博客根目录下执行以下命令安装folding-block插件：

npm install hexo-filter-folding --save

然后，在需要添加可折叠标签的文章中，使用以下格式来添加折叠块：

{% fold 折叠标题 %}
这里是要折叠的内容
{% endfold %}

其中，折叠标题可以自定义。

最后，运行hexo generate命令生成静态页面即可看到折叠效果。

如果需要修改折叠块的样式，可以在主题的CSS文件中添加相应的样式

tags与categories

在hexo中使用tags与categories往往需要使用多标签和多分类,这里记录一下它们的用法。

tag

用法：

tags:

- 123

- 456

tags: [123, 456]

多标签写法，这2种都是一样的效果，用哪个都可以，建议使用列表[]式，直观清晰。

categories

# 这是默认的写法，给文章添加一个分类。

categories: 123

# 这会将文章分类123/456子分类目录下。

categories: [123, 456]

这会将文章分类到123/456子分类目录下。

categories:

- 123

- 456

多标签写法，文章被分类到123、456以及123的自分类789这3个分类下面，官方指定写法。

categories:

- [123]

- [456]

- [123, 789]

Hexo 静态博客添加可折叠内容 | Bambrow's Blog添加可以折叠内容

在Hexo中，可以使用以下方法实现categories折叠：

1. 在主题模板中找到source/_data/categories.yml或者source/_data/categories.json文件，如果没有则需要创建该文件；

2. 在该文件中按照以下格式添加分类和标签信息（以yml格式为例）：

- name: 分类1slug: category1icon: fas fa-folderchildren:- name: 子分类1-1slug: subcategory1-1- name: 子分类1-2slug: subcategory1-2
- name: 分类2slug: category2icon: fas fa-folderchildren:- name: 子分类2-1slug: subcategory2-1- name: 子分类2-2slug: subcategory2-2

其中，name为分类名称，slug为分类别名，icon为显示的图标（可选），children为子分类列表，分别包含子分类名称和别名。

3. 打开主题中的layout/_partial/sidebar.ejs文件（如果与你使用的主题不同，则可能需要切换到对应的文件），将原有的categories显示代码替换为以下代码：

<%- partial('_partial/widget', {widget: 'categories', title: theme.sidebar.categories_title, data: site.categories}) %>

4. 在主题中的layout/_partial/widget目录下新建一个categories.ejs文件，添加以下代码：

<% if (title) { %>
<%= title %>
<% } %>
<% data.forEach(function(item){ %>
"><% if (item.children && item.children.length > 0) { %>"><%= item.name %>
<% item.children.forEach(function(child){ %>
">"><%= child.name %>
<% }) %>
<% } else { %>">"><%= item.name %><% } %>
<% }) %>

5. 在主题静态资源目录中的source/css/custom.css文件中添加以下代码来调整样式：

.widget-categories ul {list-style: none;padding-left: 0;
}.widget-categories ul li.has-children > a.folder-toggle {position: relative;padding-right: 25px;
}.widget-categories ul li.has-children > a.folder-toggle:before {content: '\f07c';display: inline-block;font-family: 'Font Awesome 5 Free';font-weight: 900;position: absolute;right: 0;top: 50%;transform: translateY(-50%);
}.widget-categories ul li.has-children.active > a.folder-toggle:before {content: '\f07b';
}.widget-categories ul li ul {margin-top: 10px;padding-left: 20px;display: none;
}.widget-categories ul li.active ul {display: block;
}

以上操作完成后，重新生成静态页面即可看到具有折叠功能的Categories列表了。

标签折叠

sidebar