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
複製代碼

效果圖