hexo博客的yilia主题之添加分类

添加 categories 页面

生成index.md文件

hexo new page categories
复制代码

在theme/yilia/souce下生成一个categories文件夹，文件夹下有一个index.md文件

修改index.md文件

---
title: 文章分类
date: 2019-10-30 16:36:49
type: "categories"
layout: "categories"
comments: false #关闭评论
---
复制代码

添加 categories 到menu菜单

在yilia主题下的主配置文件_config.xml中找到menu,并把categories添加进去

menu:
  主页: /
  分类: /categories

复制代码

yilia 主题的配置文件

main.826e88.css

路径：themes/yilia-plus/source/main.826e88.css（每一个yilia主题下的main.后面都有所不一样） 添加以下代码：

category-all-page {
    margin: 30px 40px 30px 40px;
    position: relative;
    min-height: 70vh;
  }
  .category-all-page h2 {
    margin: 20px 0;
  }
  .category-all-page .category-all-title {
    text-align: center;
  }
  .category-all-page .category-all {
    margin-top: 20px;
  }
  .category-all-page .category-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .category-all-page .category-list-item-list-item {
    margin: 10px 15px;
  }
  .category-all-page .category-list-item-list-count {
    color: $grey;
  }
  .category-all-page .category-list-item-list-count:before {
    display: inline;
    content: " (";
  }
  .category-all-page .category-list-item-list-count:after {
    display: inline;
    content: ") ";
  }
  .category-all-page .category-list-item {
    margin: 10px 10px;
  }
  .category-all-page .category-list-count {
    color: $grey;
  }
  .category-all-page .category-list-count:before {
    display: inline;
    content: " (";
  }
  .category-all-page .category-list-count:after {
    display: inline;
    content: ") ";
  }
  .category-all-page .category-list-child {
    padding-left: 10px;
  }
复制代码

categories.ejs

路径:theme/yilia/layout/,新增categories.ejs 添加以下代码：

<article class="article article-type-post show">
  <header class="article-header" style="border-bottom: 1px solid #ccc">
  <h1 class="article-title" itemprop="name">
    <%= page.title %>
  </h1>
  </header>

  <% if (site.categories.length){ %>
  <div class="category-all-page">
    <h2>共计&nbsp;<%= site.categories.length %>&nbsp;个分类</h2>
    <%- list_categories(site.categories, {
      show_count: true,
      class: 'category-list-item',
      style: 'list',
      depth:3,    #这里表明着几层分类
      separator: ''
    }) %>
  </div>
  <% } %>
</article>
复制代码

添加分类到文章中

每次在新增文章或者修改文章时，在【------】与【------】之间加上categories: 
- Linux
-  nginx
复制代码

效果图