Hexo（sakura）自定義標籤雲

一、效果

之前引入的標籤雲插件，看似很炫酷，實則有點雞肋，今天忍不住又開始魔改前端css了
Hexo（sakura）建立標籤雲hexo-tag-cloud

演示頁面快速門

文章末尾顯示標籤雲：

如果感覺還行的話，可以向你的博客裏加入哦！步驟超簡單~

二、演示

我這裏是hexo-sakura主題，以這主題來演示一遍操作流程！

1. 新建tags資源文件夾

sakura主題已有靜態標籤生成插件，大多數主題都有哦，如果沒有添加即可：

npm install hexo-generator-tag --save

1. 新建tags資源文件夾

   hexo new page tags
   

2. 編輯tags page
   打開source\tags\index.md編輯成如下內容：

   ---
   title: tags
   layout: tags
   date: 2020-02-13 20:24:16
   ---
   

3. 主題目錄添加tags

   標籤: {path: /tags, fa: fa-tags }, 
   

4. 在themes\sakura\languages\zh-cn.yml聲明tags（大部分主題也有聲明，如果沒有則添加）

   tags: 標籤
   

2. 創建樣式文件

1. 標籤頁面：themes\sakura\layout\tags.ejs

<div class="blank" style="padding-top: 75px;">
</div>
<div id="content" class="site-content">
  <div id="main">
    <header class="page-header">
      <h1 class="cat-title">
      標籤雲</h1>
      <span class="cat-des">
        <p>
          <%- "Tags " + site.tags.length %></p>
      </span>
    </header>
    <div id="main-part">
   
        <div class="tag-cloud">
          <div class="tag-cloud-title">
          </div>
          <div class="tag-cloud-tags">
          <%- tagcloud({
            min_font: 15,
            max_font: 30,
            amount: 200,
            color: true,
            start_color: '#ff6666',
            end_color: '#0099cc'
            }) %>
          </div>
        </div>
      </div>
    
  </div>
</div>

2. themes\sakura\layout\_partial\head.ejs引入樣式

  <link rel="stylesheet" href="/css/tags.css" media="all">

3. 創建樣式文件themes\sakura\source\css\tags.css

/*tag-cloud*/
.tag-cloud {
    text-align: center;
    margin-top: 20px;
  }
  .tag-cloud-title {
    font-size: 1.8rem;
    text-align: center;
  }
  .tag-cloud-tags {
    text-align: center;
  }
  .tag-cloud a {
    display: inline-block;
    margin: 0 0.4rem;
    text-decoration: none;
    font-weight: normal;
    font-size: 15px;
    cursor: pointer;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: relative;
    border-radius: 0 5px 5px 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }
  .tag-cloud a:hover {
    color: #ff7242 !important;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

運行效果如圖：

3. 局部顯示標籤雲

如果要在其他地方顯示，好比如文章末尾：

sakura主題修改：themes\sakura\layout\_widget\common-article.ejs
找到：<div class="post-tags"> </div> 添加如下內容即可：

				<div class="tag-cloud">
                  <div class="tag-cloud-title">
                  </div>
                  <div class="tag-cloud-tags">
                  <%- tagcloud({
                    min_font: 10,
                    max_font: 20,
                    amount: 200,
                    color: true,
                    start_color: '#F38181',
                    end_color: '#95E1D3'
                    }) %>
                  </div>
                </div>

根據需要調整字體大小和顏色，如果還不滿意標籤的樣式，可以再修改一下css。