https://akilar.top/posts/615e2dec/ 这个是我看的教程 我直接复制的源码
实现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折叠:
在主题模板中找到source/_data/categories.yml或者source/_data/categories.json文件,如果没有则需要创建该文件;
在该文件中按照以下格式添加分类和标签信息(以yml格式为例):
- name: 分类1
slug: category1
icon: fas fa-folder
children:
- name: 子分类1-1
slug: subcategory1-1
- name: 子分类1-2
slug: subcategory1-2
- name: 分类2
slug: category2
icon: fas fa-folder
children:
- name: 子分类2-1
slug: subcategory2-1
- name: 子分类2-2
slug: subcategory2-2
其中,name为分类名称,slug为分类别名,icon为显示的图标(可选),children为子分类列表,分别包含子分类名称和别名。
打开主题中的layout/_partial/sidebar.ejs文件(如果与你使用的主题不同,则可能需要切换到对应的文件),将原有的categories显示代码替换为以下代码:
<%- partial('_partial/widget', {widget: 'categories', title: theme.sidebar.categories_title, data: site.categories}) %>
在主题中的layout/_partial/widget目录下新建一个categories.ejs文件,添加以下代码:
<div class="widget widget_categories">
<% if (title) { %>
<h3 class="widget-title"><%= title %></h3>
<% } %>
<ul class="list-unstyled">
<% data.forEach(function(item){ %>
<li class="has-children <%= item.current ? 'active' : '' %>">
<% if (item.children && item.children.length > 0) { %>
<a href="#" class="folder-toggle"><i class="<%= item.icon %>"></i><span><%= item.name %></span></a>
<ul class="list-unstyled">
<% item.children.forEach(function(child){ %>
<li class="<%= child.current ? 'active' : '' %>">
<a href="<%= url_for(category.path) %>"><%= child.name %></a>
</li>
<% }) %>
</ul>
<% } else { %>
<a href="<%= url_for(item.path) %>"><i class="<%= item.icon %>"></i><span><%= item.name %></span></a>
<% } %>
</li>
<% }) %>
</ul>
</div>
在主题静态资源目录中的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