【Hexo搭建個人博客】：yilia主題配置(四) - 分類管理

本文主要講述 Hexo-yilia 主題對於文章的分類和標籤方面的配置。

1.插件安裝

安裝雲標籤：

npm install hexo-tag-cloud@^2.0.* --save 

2.基本配置

在主題配置文件 _config.yml 中，添加：

menu:
  主頁: /
  標籤: /tags
  分類: /categories

3. 構建

3.1.分類

• 打開 DOS 窗口或 git bash，輸入以下命令：

hexo new page 'categories'

• 打開 source\categories\index.md 文件，修改如下：

---
title: 分類
date: 2020-02-14 22:18:16
type: categories
layout: "categories"
toc: false
comments: false
---

3.2.標籤

• 同樣，輸入：

hexo new page 'tags'

• 打開 source\tags\index.md 文件，修改如下：

---
title: 標籤
date: 2020-02-14 22:20:43
type: tags
layout: "tags"
comments: false
---

4.頁面配置

• 打開 scaffolds/ 目錄下的 post.md 文件，添加：

toc: true   
tags: {{ tags }}
categories:

方式一：組合配置

• 方法1：修改文件 article.ejs

在文件 themes\yilia-plus\layout\_partial\article.ejs 中，找到 class="article-entry"，添加：

<% if (page.path === "tags/index.html"){ %>  
  <!-- 這裏也可用type去判斷，放在tags標籤頁或者categories分類頁都可以 -->
    <hr>
    <br>
    <%- list_categories({
        depth: 1,
    }) %>
    <div class="tags">
        <%- tagcloud({
            min_font: 16, 
            max_font: 35, 
            amount: 999, 
            color: true, 
            start_color: 'blue', 
            end_color: 'gray',
        }) %>
    </div>
    
    <!-- 這裏也可以放進css文件中，這樣閱讀性好些 -->
    <style>
        .category-list li{
            display: inline-block;
            margin: 0 1em .5em 0;
            padding: 4px;
            border: 1px solid green;
            font-size: 1.2em;
        }
        .category-list a {
            color: #ffffff;
        }
        .category-list-item {
          background-color: #55daff;
          border-radius: 15%;
          opacity:0.5; 
        }

        .category-list-item:hover a {
            color: #c16431;
            text-decoration: none;
            font-weight: bold;
        }
        .category-list-count {
            margin-left: 2px;
            font-size: .9em;
        }
        .article-entry ul li:before{
            display: none;
        }
        
        .tags {
            max-width: 40em;
            margin: 2em auto;
            margin-top: 0em;
        }
        .tags a {
            margin-right: 1em;
            border-bottom: 1px solid blue;
            line-height: 65px;
            white-space: nowrap;
        }
        .tags a:hover {
            border-bottom: 2px solid green;
            font-style: italic;
            color: #22323a;
            text-decoration: none;
        }
    </style>
<% } %>

• 方法2：新建文件 tags.ejs 或者 categories.ejs

如果不想在 article.ejs 或分類、標籤模板頁面中顯示，可以在 themes\yilia-plus\layout 目錄下，新建文件 tags.ejs 或者 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">分類歸檔</h1>

  </header>
  
  <div align=center>
    <nav>
      <font size="4" color="rgba(34, 177, 48)">
        文章 [<%=site.posts.length%>] &emsp;&emsp;
        分類 [<%=site.categories.length%>] &emsp;&emsp;
        標籤 [<%=site.tags.length%>]
      </font>
    </nav>
  </div>

  <br>
  <center><strong><font size="5" color="#228B66"><%= page.title %></font> </strong></center>

  <% if (site.categories.length){ %>
    <ul class="category-list">
      <p style='color:lightyellow'>共計&nbsp;<%= site.categories.length %>&nbsp;個分類</p>
      <br>
      <% site.categories.sort('name').each(function(item){ %>
        <% if(item.posts.length){ %>
          <li class="category-list-item">
            <a href="<%- config.root %><%- item.path %>" class="category-list-link" title="<%= item.name %>">
              <%= item.name %>
              <span class="category-list-count"><sup>[<%= item.posts.length %>]</sup></span>
            </a>
          </li>
        <% } %>
      <% }) %>
    </ul>
  <% } %>
  
  <center><strong><font size="5" color="#228B22">標籤雲 </font> </strong></center>

  <div align=center>
    <% if (site.tags.length) { %>
      <br>
      <p style='color:lightyellow'>共計&nbsp;<%= site.tags.length %>&nbsp;個標籤</p>

      <div class="tag-cloud">
        <%- tagcloud({
          min_font: 15, 
          max_font: 25, 
          amount: 999,
          start_color: 'blue', 
          end_color: 'gray',
        }) %>
      </div>

    <% } %>
  </div>

</article>

接下來，和之前一樣，加入css代碼就行，無論放在新建文件中還是css文件都可以(可用過路徑 themes\yilia-plus\layout\_partial\css.ejs 查看)。

方式二：分開佈局

• 方法1：修改文件 article.ejs

在文件 themes\yilia-plus\layout\_partial\article.ejs 中，找到 class="article-entry"，添加：

<% if (page.type === "tags") { %>
  <div class="tag-cloud">
    <div class="tag-cloud-title">
    <%- "TOTAl : " + site.tags.length %>
    </div>
 
    <div class="tag-cloud-tags">
    <%- tagcloud({
      min_font: 12,
      max_font: 30,
      amount: 200,
      color: true,
      start_color: '#555',
      end_color: '#111'
      }) %>
    </div>
  </div>
 
  <% } else if (page.type === 'categories') { %>
 
  <div class="category-all-page">
    <div class="category-all-title">
    <%- "TOTAL : " + site.categories.length %>
    </div>
 
    <div class="category-all">
    <%- list_categories() %>
    </div>
 
  </div>
<% } %>

在樣式文件 themes\yilia-plus\source\main.b8fa34.css 中，添加：

.category-all-page {
  a:link {
    font-size: 14px;
    color: #333;
    text-decoration: none;
  }
  a:hover {
    font-size: 14px;
    color: #d8d;
    text-decoration: none;
    font-weight: bold;
  }
  .category-all-title { text-align: left; }
 
  .category-all { 
    margin-top: 20px; 
  }
 
  .category-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  .category-list-item { 
    text-align: center;
    display: inline-block;
    margin: 8px; 
    padding: 8px;
    width: 150px;
    position: relative;
    background-color: rgba(237, 237, 237, 0.53);
    border-radius: 1px;
    box-shadow:0px 0px  0px 1px #ccc;
  }
 
  .category-list-link {
    color: #333;
  }
 
  .category-list-count {
    color: #333;
    &:before {
      display: inline;
      content: " ("
    }
    &:after {
      display: inline;
      content: ") "
    }
  }
 
  .category-list-child { padding-left: 10px; color: #333;}
}

• 方法2：新建文件 tags.ejs 與 categories.ejs

如果不想在 article.ejs 或分類、標籤模板頁面中顯示，可以在 themes\yilia-plus\layout 目錄下，新建文件 tags.ejs 與 categories.ejs。

在 tags.ejs 添加如下代碼：

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

  </header>

  <% if (site.tags.length) { %>
    <div class="tag-cloud">
      <div class="tag-cloud-title">
        <%- "TOTAl : " + site.tags.length %>
        <br>
        <br>
      </div>

      <div class="tag-cloud-tags"> 
        <%- tagcloud({
          min_font: 12,
          max_font: 30,
          amount: 200,
          color: true,
          start_color: '#555',
          end_color: '#111'
          }) %>
      </div>
    </div>
  <% } %>
  
</article>

在 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">分類</h1>

  </header>

  <% if (site.categories.length){ %>
    <div class="category-all-page">
    <div class="category-all-title">
    <%- "TOTAL : " + site.categories.length %>
    </div>
 
    <div class="category-all">
    <%- list_categories() %>
    </div>
 
  </div>
  <% } %>
  
</article>

接下來，和之前一樣，加入css代碼就行(可用過路徑 themes\yilia-plus\layout\_partial\css.ejs 查看)。

---