hexo主题标签的使用

2023-11-05

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种都是一样的效果，用哪个都可以，建议使用列表[]式，直观清晰。

在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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

hexo

Powered by 金山文档