Hexo-Next 主題博客個性化配置超詳細，超全面(兩萬字)

網頁預覽：

zxiaoxuan.cn

因爲本人比較喜歡簡介風格的，所以整個界面都是簡約風格的，一個好的博客，應該讓人一眼就能看清楚技術分類,文章也應該就是文章，讓人能夠最好的閱讀你的博客 這纔是我們應該做的，所以沒有太多花裏胡哨的東西。

使用工具：

Git
Github
Nodepad++
QQ瀏覽器F12開發者選項

Hexo簡易安裝

前置條件

npm install -g hexo-cli

安裝hexo

npm install -g hexo-cli

主題下載安裝

進入命令行，下載 NexT 主題，輸入：

git clone https://github.com/theme-next/hexo-theme-next themes/next

修改站點配置文件_config.yml，找到如下代碼：

## Themes: https://hexo.io/themes/
theme: landscape

將 landscape 修改爲 next 即可。

配置文件

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 本身的站點配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。

爲了描述方便，在以下說明中，將前者稱爲 站點配置文件， 後者稱爲 主題配置文件。

/hexo/_config.yml

/hexo/themes/next/_config.yml

修改語言

打開站點配置文件，搜索 language，找到如下代碼：

author:
language:
timezone:

在 language 後面輸入 zh-CN。

新建標籤及分類界面

打開 主題配置文件，搜索 menu，找到如下代碼：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

把 tags 和 categories 前面的 # 刪除，

切換主題

next 主題自帶四種樣式。

在主題配置文件/next/_config.yml中查找：scheme，找到如下代碼：

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
選擇你喜歡的一種樣式，去掉前面的 #，其他主題前加上 # 即可。

隱藏網頁底部 powered By Hexo / 強力驅動

打開 themes/next/layout/_partials/footer.swig

找到：

{% if theme.footer.powered.enable %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}
{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} – {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

把這段代碼首尾分別加上：<!-- 和-->，或者直接刪除。

文章添加陰影

打開 /themes/next/source/css/_custom/custom.styl，添加：

.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

瀏覽頁面顯示當前瀏覽進度

打開 themes/next/_config.yml，搜索關鍵字 scrollpercent，把 false 改爲 true。

效果圖：

Local Search本地搜索

安裝插件hexo-generator-searchdb,執行以下命令:

npm install hexo-generator-searchdb --save

修改hexo/_config.yml站點配置文件，新增以下內容到任意位置：

search:
path: search.xml
field: post
format: html
limit: 10000

編輯 主題配置文件，啓用本地搜索功能：

# Local search
local_search:
enable: true

效果圖：

設置網站圖標

在 EasyIcon 中找一張（32 * 32）的 ico 圖標，或者去別的網站下載或者製作，並將圖標名稱改爲 favicon.ico，然後把圖標放在 /themes/next/source/images 裏，並且修改主題配置文件：

Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

效果圖：

修改文章底部的#號的標籤，改爲圖標

修改模板/themes/next/layout/_macro/post.swig

搜索 rel=“tag”>#，將 # 換成<i class="fa fa-tag"></i>

效果圖：

文章分享功能

打開themes/next/_config.yml 搜索關鍵字needmoreshare2 修改爲下面設置

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      #位置
      position: bottomCenter
      #可分享網站
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: vertical
      #位置
      position: topRight
       #可分享網站
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

效果圖：
postbottom爲文章末尾分享 float則是在頁面側端分享

文章加密訪問

打開themes->next->layout->_partials->head.swig文件,插入這樣一段代碼：

    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入文章密碼') !== '{{ page.password }}'){
                alert('密碼錯誤！');
                history.back();
            }
        }
    })();

然後在文章上寫成類似這樣：

---
title: Hello World
date: 2016/7/13 20:46:25
categories:
- Diary
tags:
  - Testing
  - Another Tag
password: 123456
---

增加文章字數統計及閱讀時常功能

安裝插件hexo-wordcount,執行以下命令:

 npm install hexo-wordcount --save

修改themes/next/_config.yml主題配置文件，搜索關鍵字post_wordcount,修改如下:

post_wordcount:
  item_text: true
  wordcount: true #單篇文章字數
  min2read: true #單篇閱讀時長
  totalcount: true #站點總字數
  separated_meta: true

文章置頂功能

移除默認安裝的插件：

npm uninstall hexo-generator-index --save
1
安裝新插件:

npm install hexo-generator-index-pin-top --save
1
最後編輯有這需求的相關文章時，在Front-matter（文件最上方以—分隔的區域）加上一行：

top: true

1
如果你置頂了多篇，怎麼控制順序呢？設置top的值（大的在前面），比如：

# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

文章 b 便會顯示在文章 a 的前面

設置置頂圖標
打開/themes/next/layout/_macro/post.swig文件，在<div class="post-meta">下方，插入如下代碼：

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置頂</font>
    <span class="post-meta-divider">|</span>
{% endif %}

修改[Read More]按鈕樣式

修改themes\next\source\css\_custom\custom.styl文件，加入自定義樣式

// [Read More]按鈕樣式
.post-button .btn {
    color: #555 !important;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: none !important;
    transition-property: unset;
    padding: 0px 15px;
}

.post-button .btn:hover {
    color: rgb(255, 255, 255) !important;
    border-radius: 3px;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

效果圖：

修改 閱讀全文 前顯示文字數量即位置

打開 themes/next/_config.yml，搜索關鍵字 auto_excerpt， 修改length即可修改閱讀全文前顯示文字數量

auto_excerpt:
  enable: true
  length: 150

或者在文章中任意位置添加<!-- more -->

建議在文章中加入 <!-- more -->
自定義 [Read More] 按鈕之前要顯示的內容！

修改鏈接文字樣式

打開themes\next\source\css\_common\components\post\post.styl添加以下代碼:

.post-body p a{

 color: #0593d3;
 border-bottom: none;
 &:hover {
   color: #ff106c;
   text-decoration: underline;
 }
}

效果圖：

頭像設置圓形,停留旋轉效果

修改themes\next\source\css\_common\components\sidebar\sidebar-author.styl,新增以下代碼:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  //設置圓形
+  border-radius: 50%;
+  transition: 2s all;
}
   //旋轉
+ .site-author-image:hover{
+   transform: rotate(360deg);
+ }

效果圖：

文章添加陰影效果(文章邊框)

打開themes/next/source/css/_custom/custom.styl文件添加:

.post {
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }
 ​​​​​​​​

近期文章

修改themes/next/layout/_macro/sidebar.swig 。找到theme.social板塊代碼，在該板塊最後的endif後隔一行添加如下代碼。

{# recent posts #}
{% if theme.recent_posts %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
      <!-- modify icon to fire by szw -->
      <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
      {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
      {% set posts = site.posts.sort('-date') %}
      {% for post in posts.slice('0', '5') %}
        <li class="recent_posts_li">
          <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

編輯themes/next/source/css/_common/components/sidebar/sidebar-blogroll.styl

li.recent_posts_li {
    text-align: cengter;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

在 themes/next/_config.yml中添加下方代碼

# 近期文章設置
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

效果圖：

文章末尾添加"本文結束"標記

修改在themes/next/layout/_macro/post.swig中，在wechat-subscriber.swig之前添加如下代碼：

• ---------------- The End ----------------
  {% if theme.wechat_subscriber.enabled and not is_index %}
  {% include 'wechat-subscriber.swig' %}
  {% endif %}

爲博客加上妹子

Git輸入下方代碼

npm install -save hexo-helper-live2d
然後在在 hexo 的 _config.yml中添加參數：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<你喜歡的模型名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

可供選擇模型：

• live2d-widget-model-chitose

• live2d-widget-model-epsilon2_1

• live2d-widget-model-gf

• live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)

• live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)

• live2d-widget-model-haruto

• live2d-widget-model-hibiki

• live2d-widget-model-hijiki

• live2d-widget-model-izumi

• live2d-widget-model-koharu

• live2d-widget-model-miku

• live2d-widget-model-ni-j

• live2d-widget-model-nico

• live2d-widget-model-nietzsche

• live2d-widget-model-nipsilon

• live2d-widget-model-nito

• live2d-widget-model-shizuku

• live2d-widget-model-tororo

• live2d-widget-model-tsumiki

• live2d-widget-model-unitychan

• live2d-widget-model-wanko

• live2d-widget-model-z16
  建配置文件

在站點目錄下建文件夾live2d_models，

再在live2d_models下建文件夾<你喜歡的模型名字>,

再在<你喜歡的模型名字>下建json文件：<你喜歡的模型名字>.model.json

安裝模型。在命令行（即Git Bash）運行以下命令即可：

npm install --save live2d-widget-model-<你喜歡的模型名字>

複製你喜歡的模型名字：

Epsilon2.1

Gantzert_Felixander

haru

miku

ni-j

nico

nietzche

nipsilon

nito

shizuku

tsumiki

wanko

z16

hibiki

koharu

haruto

Unitychan

tororo

hijiki

代碼塊複製選項

Next6 中自帶了複製代碼按鈕，Next5 需要自己手動配置。

搜索 codeblock，找到如下配置：

codeblock:
border_radius: 8   # 按鈕圓滑度
copy_button:  # 設置是否開啓代碼塊複製按鈕
	enable: true
	show_result: true  # 是否顯示覆製成功信息

修改加載特效

由於網頁不可能一直都秒進，總會等待一段時間的，所以可以設置頂部加載條。Next 已經集成了很多加載特效，可以在下面選項中在線調試測試一下。

搜索pace，找到如下代碼：

# 頁面頂部加載條
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal  #默認設置，可以修改爲上述任何一個

修改文章鏈接

在做次優化之前，hexo-next文章鏈接默認的生成規則是：:year/:month/:day/:title，是按照年、月、日、標題來生成的。
比如：https://zxiaoxuan.github.io/2019/08/12/hello-world/ 這樣，如果文章標題是中文的話，URL鏈接是也會是中文，

那麼要生存簡潔且唯一的URL，怎麼辦呢

安裝插件

npm install hexo-abbrlink --save

執行此命令可能會不成功，提示你缺少相應的依賴，比如babel-eslint、mini-css-extract-plugin、webpack-cli…
使用npm命令安裝即可，比如npm install [email protected] babel-eslint@8 --save-dev

修改根目錄站點配置文件config.yml，改爲：

permalink: posts/:abbrlink/
abbrlink:
	alg: crc32   #算法： crc16(default) and crc32
	rep: hex     #進制： dec(default) and hex

生成的鏈接將會是這樣的(官方樣例)：
四種可供選擇

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完後，原md文件的Front-matter 內會增加abbrlink 字段，值爲生成的ID 。這個字段確保了在我們修改了Front-matter 內的博客標題title或創建日期date字段之後而不會改變鏈接地址。

評論 Valine 增強版

雲淡風輕在很早之前就開發了一款極簡的valine評論系統
但這個評論系統有一個痛點。雖然它雖然支持郵件提醒，但這個功能卻很弱，無法提示到具體文章，也無法給評論者進行有效的回覆通知，通常別人留完言，怎麼還會再來你的博客看你是否回覆了呢？。

而這款 Valine 的增強版，滿足了這幾個條件：

完善的郵件通知，自定義 SMTP 發件頻率和內容不再受限
基於 Akismet 的垃圾評論自動標註和過濾
評論管理，避免直接操作數據庫

爲了適配hexo博客，可以做如下修改：

步驟一：下載Valine.min.js 到文件夾 themes/next/source/js/src 下。
步驟二：
在hexo/themes/next/layout/_third-party/comments/valine.swig中
修改代碼如下：

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '{{ theme.valine.guest_info }}';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: {{ theme.valine.verify }},
        notify: {{ theme.valine.notify }},
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        placeholder: '{{ theme.valine.placeholder }}',
        avatar:'{{ theme.valine.avatar }}',
        guest_info:guest,
        pageSize:'{{ theme.valine.pageSize }}' || 10,
    });
  </script>
{% endif %}

{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="/js/src/Valine.min.js"></script>
  
  <script type="text/javascript">
    new Valine({
        lang: 'zh-cn',
        admin_email:'[email protected]', //填寫博主郵箱 
        el: '#comments' ,
        appId: '{{ theme.valine.appid }}',
        appKey: '{{ theme.valine.appkey }}',
        emoticon_url: 'https://cloud.panjunwen.com/alu',
        emoticon_list: ["狂汗.png","不說話.png","汗.png","坐等.png","獻花.png","不高興.png","中刀.png","害羞.png","皺眉.png","小眼睛.png","暗地觀察.png"],
        placeholder: '{{ theme.valine.placeholder }}',
  });
  </script>
{% endif %}

主題配置文件中的valine可這樣配置：

valine:
  enable: true
  appid:  your appid #<app_id>
  appkey: your appkey #<app_key>
  notify: false # mail notifier # 關閉，使用valine-admin發郵件
  verify: false # Verification code
  placeholder: '&#x270d;寫評論'  # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

側欄加入網易雲音樂

打開網易雲，找到你想要添加的歌曲或者歌單，點生成外鏈播放器 然後複製代碼

將代碼放到…/themes/hexo-theme-next/layout/_macro/sidebar.swig文件下：

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

視頻

1）直接用 HTML 的標籤，寫法如下：

複製
Your browser does not support the video tag.
2）用插件，可支持彈幕，首先在站點文件夾根目錄安裝插件：

複製
npm install hexo-tag-dplayer --save
然後文章中的寫法：

複製
{% dplayer “url=https://什麼什麼什麼.mp4” “https://封面圖.jpg” “api=https://api.prprpr.me/dplayer/” “id=” “loop=false” %}
要使用彈幕，必須有api和id兩項，並且若使用的是官方的 api 地址（即上面的），id 的值不能與這個列表的值一樣。id 的值自己隨便取，唯一要求就是前面這點。如果唯一要求難倒了你，可以使用這個工具將一段與衆不同的文字?生成一段看起來毫無意義的哈希值，這樣看起來是不是好多了。

當然，這個插件的功能還有很多，可以去 README 和這插件的「母親」Dplayer 的官方文檔看看。

各版塊透明度修改

內容板塊透明
博客根目錄 themes\next\source\css\_schemes\Pisces\_layout.styl文件 .content-wrap 標籤下 background: white修改爲：

background: rgba(255,255,255,0.7); //0.7是透明度

菜單欄背景
博客根目錄 themes\next\source\css\_schemes\Pisces\_layout.styl文件.header-inner標籤下 background: white修改爲：

background: rgba(255,255,255,0.7); //0.7是透明度

站點概況背景
博客根目錄themes\next\source\css\_schemes\Pisces\_sidebar.styl 文件.sidebar-inner 標籤下 background: white修改爲：

background: rgba(255,255,255,0.7); //0.7是透明度

然後修改博客根目錄themes\next\source\css\_schemes\Pisces\_layout.styl文件.sidebar 標籤下 background: $body-bg-color修改爲：

background: rgba(255,255,255,0.7); //0.7是透明度

按鈕背景
博客根目錄themes\next\source\css\_common\components\post\post-button.styl 同上修改對應位置爲 background: transparent;

修改標題按鈕
.brand {
position: relative;
display: inline-block;
padding: 0 40px;
color: #222;
background: ;
border-bottom: none;
}

更改默認Google字體庫

訪問系統總是會耗費一大部分的時間在加載google字體庫上, 而且經常加載不成功.

方法一: 用國內的CDN庫來替代主題中的google字體庫, 到主題配置文件中設置默認字體庫:

host: fonts.useso.com

方法二: 關掉字體庫的引用, 默認加載本地字體庫, 到主題配置文件設置:

font:
  enable: false

bnt

文章加密訪問

打開themes->next->layout->_partials->head.swig文件,在以下位置插入這樣一段代碼：

  <script src="{{ pace_js_uri }}"></script>
  <link href="{{ pace_css_uri }}" rel="stylesheet">

代碼如下：

  <script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('請輸入文章密碼') !== '{{ page.password }}') {
                alert('密碼錯誤！');
                if (history.length === 1) {
                    location.replace("http://zxiaoxuan.cn"); // 這裏替換成你的首頁
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

然後在文章添加password就可以了

標籤修改

打開themes/next/layout/page.swig

修改這裏可以修改標籤頁的標籤顯示

在這裏添加東西會在標籤頁面上顯示

博客背景圖片

在themes/next/source/css/_custom/custom.styl中添加CSS樣式

// 背景圖片
body::before {
    background-image: url(https://背景圖.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    content: " ";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}

(2）jquery-backstretch插件

+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
+  <script>
+  $("body").backstretch("https://背景圖.jpg");
+  </script>
</body>

加入到文件最後面前面即可。你可以瀏覽器按 F12 查看我的頁面，就可以在前發現。幻燈片等更多用法請自行查看 GitHub 上的 README。

彩色標籤雲

在/themes/next/layout/目錄下，新增tag-color.swig文件，加入下方代碼：

<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "?";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在/themes/next/layout/page.swig/中引入tag-color.swig：

在下方加上 {% include 'tag-color.swig' %} 代碼

 <div class="tag-cloud">
          <!--    <div class="tag-cloud-title">
                {{ _p('counter.tag_cloud', site.tags.length) }}
            </div>  -->
             <div class="tag-cloud-tags" id="tags">
			  {{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#FFF', end_color: '#FFF'}) }}            
		  </div>
		</div>
+     {% include 'tag-color.swig' %}		

或者將上方代碼直接添加到下方

將標籤雲放到首頁

在路徑：/themes/next/layout/index.swig 中

{% block content %}下面添加下方代碼

{% block content %}

	<div class="tag-cloud">
	  <div class="tag-cloud-tags" id="tags">
		{{ tagcloud({min_font: 16, max_font: 16, amount: 300, color: true, start_color: '#fff', end_color: '#fff'}) }}
	  </div>
	</div>
	<br>
	
	{% include 'tag-color.swig' %}

歸檔頁美化

修改/themes/next/layout/_macro/post-collapse.swig後的代碼如下：

{% macro render(post) %}

  <article class="post post-type-{{ post.type | default('normal') }}" itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      <{% if theme.seo %}h3{% else %}h2{% endif %} class="post-title">
        {% if post.link %}{# Link posts #}
          <a class="post-title-link post-title-link-external" target="_blank" href="{{ url_for(post.link) }}" itemprop="url">
            {{ post.title or post.link }}
            <i class="fa fa-external-link"></i>
          </a>
        {% else %}
            <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
              {% if post.type === 'picture' %}
                {{ post.content }}
              {% else %}
                <span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
              {% endif %}
            </a>
        {% endif %}
      </{% if theme.seo %}h3{% else %}h2{% endif %}>

      <div class="post-meta">
        <time class="post-time" itemprop="dateCreated"
              datetime="{{ moment(post.date).format() }}"
              content="{{ date(post.date, config.date_format) }}" >
          {{ date(post.date, 'MM-DD') }}
        </time>
      </div>

    </header>
  </article>

{% endmacro %}