0%

Hexo搭建个人博客：yilia主题配置(四) - 分类管理

发表于 分类于 ， Valine：
本文字数： 7k 阅读时长 ≈ 6 分钟

本文主要讲述 Hexo-yilia 主题对于文章的分类和标签方面的配置。

1.插件安装

安装云标签：

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

2.基本配置

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

1
2
3
4
menu:
  主页: /
  标签: /tags
  分类: /categories

3. 构建

3.1.分类

  • 打开 DOS 窗口或 git bash，输入以下命令：
1
hexo new page 'categories'
  • 打开 source\categories\index.md 文件，修改如下：
1
2
3
4
5
6
7
8
---
title: 分类
date: 2020-02-14 22:18:16
type: categories
layout: "categories"
toc: false
comments: false
---

3.2.标签

  • 同样，输入：
1
hexo new page 'tags'
  • 打开 source\tags\index.md 文件，修改如下：
1
2
3
4
5
6
7
---
title: 标签
date: 2020-02-14 22:20:43
type: tags
layout: "tags"
comments: false
---

4.页面配置

  • 打开 scaffolds/ 目录下的 post.md 文件，添加：
1
2
3
toc: true   
tags: {{ tags }}
categories:

方式一：组合配置

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<% 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。

在其中添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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"，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<% 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 中，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.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 添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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 添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 查看)。

------------- 本文已结束 感谢您的阅读！ -------------
Donate comment here.

本文标题:Hexo搭建个人博客：yilia主题配置(四) - 分类管理

文章作者:Jusheng Yao

发布时间:2020年02月20日 - 19:23

最后更新:2020年03月01日 - 21:50

原始链接:http://yaojusheng.github.io/archives/46241.html

版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处!

欢迎关注我的其它发布渠道