（Ⅱ）NexT主題的優化定製修改指南

Jaybo發表於2018-01-31

寫在前面

(2) Hexo 官網：Hexo.io

(3) Hexo 主題的選擇：

本人使用的版本為：

nodejs：v8.10.0
npm：5.6.0  #命令 npm -v 可以檢視到
NexT主題版本：5.1.4  #開啟站點配置檔案_config.yml搜尋version可以找到
複製程式碼

hexo version 的資訊如下：

hexo-cli:1.1.0
os:Windows_NT 6.1.7601 win32 x64
http_parser:2.7.0
node:8.10.0
v8:6.2.414.50
uv:1.19.1
z1ib:1.2.11
ares:1.10.1-DEU modules:57
nghttp2:1.25.0openss1:1.0.2n icu:60.1
unicode:10.0
cldr:32.0
tz:2017c
複製程式碼

一、主題基本配置

關於部落格主題的選擇問題，考慮了很久一直決定不下來選哪個主題合適，在嘗試了多個覺得不錯的主題之後，最終還是決定選擇 GitHub 最多 star 的 NexT 主題了。有那麼多人在用，普遍大眾應該還是很認可的。NexT 主題版本更新日誌和下載：NexT – Theme for Hexo | NexT主題 - GitHub

關於這個主題的相關配置、優化定製網上容易找到非常多的資料，但基本的配置，還是建議直接看官方文章：

主題配置 - NexT 使用文件
主題配置參考 · iissnan/hexo-theme-next Wiki（ NexT 主題 GitHub 上其 wiki 頁面關於主題設定教程）

本文會介紹 NexT 主題大部分的基本配置修改以及優化定製部落格。

網上比較全面的修改指南，供參考：

(0) 主題設定/動態背景/顯示當前瀏覽進度

(1) 主題設定

主題設定：開啟主題配置檔案，搜尋 scheme 關鍵字。你會看到有四行 scheme 的配置。我選擇了 scheme: Pisces，下面是我的設定：

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
複製程式碼

Muse：預設 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
Mist：Muse 的緊湊版本，整潔有序的單欄外觀
Pisces：雙欄 Scheme，小家碧玉似的清新
Gemini：左側網站資訊及目錄，塊+片段結構佈局

(2) 動態背景

目前 NexT 主題有 4 種動態背景：

Canvas-nest
three_waves
canvas_lines
canvas_sphere
複製程式碼

設定方法很簡單，直接設定裡需要的動態背景為true。

(3) 顯示當前瀏覽進度

修改themes/next/_config.yml， scrollpercent 值由 false 改為 true：

# Scroll percent label in b2t button
scrollpercent: true
複製程式碼

(1) 關於文章所屬「分類」和「標籤」的設定

之前我使用的別的主題，只要在 source 資料夾下新建的文章前面按如下格式表明所屬分類和標籤：

title: 自學程式設計成功概率有多少可能
date: 2017-05-26 19:57:47
tags: [程式設計,感悟]
categories: 技術 
複製程式碼

但是在 NexT 主題下的設定的步驟如下：

先hexo new page categories新建 categorier 資料夾，其中會自動生成一個index.md檔案，修改（即新增一行）為：

---
title: categories
date: 2018-01-23 17:14:51
type: "categories"
---
複製程式碼

同理，「標籤」也一樣，hexo new page tags，生成 tags 資料夾，其中會自動生成一個index.md檔案，修改為：

---
title: tags
date: 2018-01-23 17:14:51
type: "tags"
---
複製程式碼

然後寫的部落格文章，表明所屬「分類」和擁有哪些「標籤」，官方文件所說的格式如下：

categories:
- Diary
tags:
- PS3
- Games
複製程式碼

但是我親測，如下也是可以的：

categories: 技術
tags: [程式設計,感悟]
複製程式碼

另外，對於 NexT 這個主題，對於「關於」這個選單和上面新建分類和標籤一樣，也是需要手動建立資料夾的，hexo new page about，這樣會生成 about 資料夾，同時自動生成index.md檔案，然後可以在這個.md檔案中寫上自我個人介紹。（親測過，index.md這個檔案的名字不能修改，否則「關於」選單出錯）

關於這部分的設定，官方文件稱其為「Front-matter」，「Front-matter」是檔案最上方以 --- 分隔的區域，用於指定個別檔案的變數，舉例來說：

---
title: Hello World
date: 2013/7/13 20:46:25
---
複製程式碼

以下是預先定義的引數，您可在模板中使用這些引數值並加以利用。

引數	描述	預設值
layout	佈局
title	標題
date	建立日期	檔案建立日期
updated	更新日期	檔案更新日期
comments	開啟文章的評論功能	true
tags	標籤（不適用於分頁）
categories	分類（不適用於分頁）
permalink	覆蓋文章網址

(2) 新增本地新增搜尋選單

安裝 hexo-generator-searchdb 外掛：npm install hexo-generator-searchdb --save
開啟站點配置檔案找到 Extensions 在下面新增（其實，新增以下內容到任意位置即可）

search:
      path: search.xml
      field: post
      format: html
      limit: 10000
複製程式碼

開啟主題配置檔案找到 Local search，將 enable 設定為 true，啟動本地搜尋功能，這樣就能在頁面可以看到搜尋選單了：

# Local search
local_search:
  enable: true
複製程式碼

(3) 新增文章字數統計、閱讀時長（next主題已經整合）

Hexo 提供了 hexo-wordcount 外掛，新版本的 next 中整合了這一點，只需要安裝外掛然後開啟功能就 ok。

第一步：安裝 word_count 外掛，在部落格根目錄下開啟終端：npm install hexo-wordcount --save

第二步：在主題配置檔案 Blog\themes\next\config.yml 中開啟 post_wordcount 統計功能：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true # 單篇 字數統計
  min2read: true # 單篇 閱讀時長
  totalcount: false # 網站 字數統計
  separated_meta: true
複製程式碼

如果僅僅只是開啟 wordcount、min2read，部署之後會發現文章的【字數統計】和【閱讀時長】後面沒有對應的 xxx 字，xx 分鐘等字樣，只有光禿禿的數字在那裡。

解決方案：找到 \themes\next\layout_macro\post.swig 檔案，將“字”、“分鐘” 字樣新增到如下位置即可。

<span title="{{ __('post.wordcount') }}">
     {{ wordcount(post.content) }} 字
</span>

    ...
<span title="{{ __('post.min2read') }}">
     {{ min2read(post.content) }} 分鐘
</span>
複製程式碼

然後才可以看到顯示：閱讀時長 ≈ 2 分鐘，但若是不需要顯示 ≈ ，就修改這個地方：

{% if theme.post_wordcount.item_text %}
        <span class="post-meta-item-text">{{ __('post.min2read') }} &asymp;</span>
 {% endif %}
複製程式碼

把這裡的≈刪除即可。

注：如果想要在文章中使用，可以這樣插入 <i class="fa fa-smile-o" style="font-size:28px;color:#FF8247;"></i> 即可使用。

參考：Hexo新增字數統計、閱讀時長、友情連結

(4) 設定友情連結

在主題配置檔案新增，示例：

# title
links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/
複製程式碼

另外，側邊欄友情連結及選單等旁邊的圖示，可以到圖示庫找到自己喜歡的圖示然後複製到相應程式碼中，也可以到這裡找：Font Awesome，一套絕佳的圖示字型庫和CSS框架。

(5) 設定側邊欄頭像

編輯主題的 _config.yml，新增欄位 avatar，值設定成頭像的連結地址。

其中，頭像的連結地址可以是：

完整的網際網路 URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460
站點內的地址，例如：
- /uploads/avatar.jpg 需要將你的頭像圖片放置在 站點的 source/uploads/（可能需要新建uploads目錄）
- /images/avatar.jpg 需要將你的頭像圖片放置在 主題的 source/images/ 目錄下。

(6) 設定訂閱微信公眾號

注：此特性在版本 5.0.1 中引入，要使用此功能請確保所使用的 NexT 版本在此之後。

在每篇文章的末尾顯示微信公眾號二維碼，掃一掃，輕鬆訂閱部落格。將公眾號二維碼存放於部落格source/uploads/目錄下。然後編輯主題配置檔案，示例如下：

# Wechat Subscriber
wechat_subscriber:
  enabled: false
  qcode: /uploads/wechat.jpg
  description: 歡迎掃描二維碼關注公眾號一起成長~
複製程式碼

(7) 開啟打賞

越來越多的平臺（微信公眾平臺，新浪微博，簡書，百度打賞等）支援打賞功能，付費閱讀時代越來越近，特此增加了打賞功能，支援微信打賞和支付寶打賞。只需要主題配置檔案中填入微信和支付寶收款二維碼圖片地址即可開啟該功能。打賞功能配置示例：

reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image
複製程式碼

我的操作：把收款二維碼存放在了 NexT 主題的source/uploads/目錄下，然後配置如下：

# Reward  讚賞  
reward_comment: 覺得文章對您有幫助請我喝杯咖啡吧^_^ 
wechatpay: /uploads/wechatpay.jpg
alipay: /uploads/alipay.jpg
複製程式碼

(8) 新增RSS訂閱功能

RSS(Really Simple Syndication) 簡易資訊聚合，在網際網路上被廣泛採用的內容包裝和投遞協。是一種描述同步網站內容的格式，使用 xml 格式。當網站內容更新時，可以通過訂閱 RSS 源在 RSS 閱讀器上獲取更新的資訊。大多數內容提供的網站都會提供 RSS 訂閱的功能，方便使用者去獲取最新的內容。

這裡主介紹怎麼給自己的 hexo 部落格新增 RSS 源。

①在 hexo 的根目錄下執行命令：

npm install hexo-generator-feed --save
複製程式碼

②在主題配置檔案 /theme/next/_config.yml 檔案中配置該外掛：

feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit:
    content_limit_delim: ' '
複製程式碼

引數的含義：

type: RSS的型別(atom/rss2)
path: 檔案路徑,預設是atom.xml/rss2.xml
limit: 展示文章的數量,使用0或則false代表展示全部
hub:
content: 在RSS檔案中是否包含內容 ,有3個值 true/false預設不填為false
content_limit: 指定內容的長度作為摘要,僅僅在上面content設定為false和沒有自定義的描述出現
content_limit_delim: 上面擷取描述的分隔符,擷取內容是以指定的這個分隔符作為擷取結束的標誌.在達到規定的內容長度之前最後出現的這個分隔符之前的內容,，防止從中間截斷.
複製程式碼

此外還有一種方法，就是在 next 主題的 _config.yml 檔案中有個 rss 的配置，直接設定為 true 就可以了。

配置好之後執行 hexo g就可以找到你部落格的 pubilc 資料夾下發現 atom.xml 檔案了，然後執行 hexo 服務就可以在個人站點處看到 RSS 的訂閱圖示了,點選這個圖示就可以出現 RSS 訂閱的地址,就可以新增到你的 RSS 閱讀器方便檢視部落格的最新文章。

參考：為hexo部落格新增RSS訂閱功能

(9) 文章字數統計、閱讀時長開啟和關閉，以及使用圖示還是文字

開啟 NexT 主題配置檔案 _config.yml，修改：

post_wordcount:
  item_text: true # 文章 字數統計 閱讀時長 使用圖示 還是 文字表示
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: false # 是否換行顯示 字數統計 及 閱讀時長
複製程式碼

參考：Hexo Next主題開啟字數統計及閱讀時長

另外，如果想要把「發表於」、「分類於」、「閱讀時長」修改為英文，可以開啟 \themes\next\languages\zh-Hans.yml 檔案，修改 posted、visitors 等值為英文，如下：

post:
  created: 建立於
  modified: 更新於
  sticky: 置頂
  posted: Posted on #發表於
  visitors: Visitors #閱讀次數 
  in: In #分類於
  read_more: 閱讀全文
  untitled: 未命名
  toc_empty: 此文章未包含目錄
  wordcount: 字數統計
  min2read: 閱讀時長
  totalcount: Site words total count
複製程式碼

遇到的問題

我在配置過程中有被官方文件坑了，目前猜測是官方文件沒及時更新原因。在此，我記錄下遇到的坑：

1）選單圖示顯示異常

問題：「首頁」、「分類」、「標籤」等這些選單旁邊的圖示都顯示是問號，未顯示正常圖示，我按照官方示例配置是這樣的：

menu:
  home: / 
  categories: /categories/  
  tags: /tags/  
  archives: /archives/  
  about: /about/    
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #公益: /404/ || heartbeat

# Enable/Disable menu icons.    
menu_icons:
  enable: true
  home: home
  about: user
  categories: th
  tags: tags
複製程式碼

網上很多文章寫的都是上面那樣的配置，但後來找到原因了，真正的配置是下面這樣的：

menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  about: /about || user
  
menu_icons:
  enable: true
複製程式碼

原來 NexT 這個主題中的「選單設定」被註釋掉的那些配置樣例，才是正確的配置。OS：官方文件真是坑人啊。

2）友情連結圖示顯示異常

問題：「友情連結」圖示未正常顯示。

官方文件包括網上很多文章寫的都是如下：

social:
  GitHub: https://github.com/yourname
  郵箱: mailto:test@gamil.com
social_icons:
  enable: true
  icons_only: false
  transition: false
  GitHub: github
  郵箱: envelope
複製程式碼

但正確配置其實是如下，和選單配置類似：

social:
  GitHub: https://github.com/yourname || github
  郵箱: mailto:test@gamil.com || envelope
social_icons:
  enable: true
  icons_only: false
  transition: false
複製程式碼

二、第三方服務及其他修改

新增第三方服務，官網文件：第三方服務整合 - NexT 使用文件。

評論系統
資料統計與分析
內容分享服務
搜尋服務
其他服務

(1) 線上聯絡（DaoVoice）★

參考： hexo的next主題個性化教程:打造炫酷網站（含全站總字數、DaoVoice 線上聯絡等等）。

首先在 DaoVoice 註冊賬號，註冊完成後會得到一個 app_id，記下這個 app_id 的值，然後開啟 /themes/next/layout/_partials/head.swig，寫下如下程式碼：

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}
複製程式碼

接著開啟主題配置檔案，在最後寫下如下程式碼：

# Online contact 
daovoice: true
daovoice_app_id: 這裡填你的獲得的 app_id
複製程式碼

注1：安裝成功後可以在 DaoVoice 控制檯上的聊天設定裡設定聊天視窗樣式。

注2：我的 DaoVoice 賬戶註冊使用的 GitHub 賬戶。

(2) 評論Disqus和文章顯示評論數——已更換為LeanCloud的Valine評論功能★

Disqus 官網：disqus.com/ （本人使用的是谷歌賬號註冊和登入）

NexT 主題整合 Disqus 評論，可以開啟 NexT 配置檔案 _config.yml 搜尋「disqus」可以找到。

一開始我採用了 Disqus 評論，操作參考：Hexo 整合 Disqus 評論。在完成 Disqus 網站註冊和配置後（如何配置就不說了，看連結），開啟 NexT 主題配置檔案 config.yml 檔案。

①大於等於 5.1.1 版本，將 disqus 下的 enable 設定為 true，同時提供你的 shortname，count 用於指定是否顯示評論數量：

disqus:
  enable: true
  shortname:
  count: true
複製程式碼

enable 和 count 都設定為 true 後，這樣你的所有文章會顯示評論數，及頁面下面會自動載入 Disqus 的評論外掛。

②小於 5.1.1 版本，設定 disqus_shortname 的值即可：

disqus_shortname: shortname
複製程式碼

接下來就可以進入後臺管理設定你的評論了。

——update：2019-02-14 已棄用 Disqus 評論。參考了知乎文章：Hexo（NexT 主題）評論系統哪個好？ - 知乎，採用了 Valine，不用登陸就可以用。

順便提一下關於幾個評論系統的介紹：多說和網易雲已經倒下了，其次暢言需要備案，Disqus， Hypercomments 和 LiveRe 都是國外的，載入速度賊慢。

Valine 設定步驟：

先需要去註冊一個賬號：Leancloud官網，點我註冊

註冊完以後需要建立一個應用，名字可以隨便起，然後 進入應用 -> 設定 -> 應用key，獲取你的 appid 和 appkey。
拿到你的 appid 和 appkey 之後，開啟主題配置檔案 _config.yml 搜尋 valine，填入 appid 和 appkey。

我的配置：

valine:
 enable: true
 appid: 你的appid    
 appkey: 你的appkey 
 notify: false # mail notifier , https://github.com/xCss/Valine/wiki
 verify: false # Verification code
 placeholder: Just go go # comment box placeholder
 avatar: mm # gravatar style   
 guest_info: nick,mail,link # custom comment header
 pageSize: 10 # pagination size
複製程式碼

另外：如果提示安全問題，請參考網上該文新增安全域名。即在 Leancloud -> 設定 -> 安全中心 -> Web 安全域名，把你的域名加進去。

(1) Valine郵件提醒

Valine 官方提供的郵件提醒功能是基於Leancloud的密碼重置郵件提醒，操作步驟如下：

進入 Leancloud -> 選擇你的評論所存放的應用 -> 設定 -> 郵件模板，按下圖設定好用於重置密碼的郵件主題>然後儲存：

修改郵件主題：你在的評論收到了新的評論

修改內容：將下面的程式碼複製到“內容”中，並將其中的你的網址首頁連結改為你的網址首頁連結。

<p>Hi, {{username}}</p>
<p>
    你在 {{appname}} 的評論收到了新的回覆，請點選檢視：
</p>
<p><a href="你的網址首頁連結" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">馬上檢視</a></p>
複製程式碼

點選“儲存”按鈕
修改 NexT 主題配置檔案，搜尋 valine（快速定位），將其中的notify改為true。

設定完成後：

發表評論需要像下面這樣的驗證
如果評論者 A 評論文章時候留下了郵箱，那麼其他人比如 B，點選回覆 A 的時候，那麼 A 的郵箱就會收到相應的郵件通知，提示：

注意：點選檢視，會跳轉到評論的部落格主頁，而不是對應的評論文章。

注意事項：

- 傳送次數過多，可能會暫時被Leancloud 遮蔽郵件傳送功能
- 由於`郵件提醒`功能使用的“Leancloud的密碼重置郵件提醒”，只能傳遞`暱稱`、`郵箱`兩個屬性，所以郵件提醒連結`無法直達指定文章頁`。請悉知。
- 開啟`郵件提醒`會預設開啟`驗證碼`選項。
- 該功能目前還在測試階段，謹慎使用。
- 目前`郵件提醒`正處於測試階段，僅在`子級`對存在郵件地址的`父級`發表評論時傳送郵件
複製程式碼

參考：NexT主題設定Valine評論系統郵件提醒

(2)文章顯示評論數問題：

**注意，換為 Valine 後，發現文章的評論數不顯示，**嘗試了改動某處看是否能解決問題，發現解決了。操作這樣的：把 disqus 的評論關閉，即設定主題配置檔案下的 disqus 下的 enable 為 false，即可正常顯示評論數。

(3)文章閱讀次數（注：使用的LeanCloud）★

①開啟 LeanCloud 官網，進入註冊頁面註冊。完成郵箱啟用後，點選頭像，進入控制檯頁面，建立一個新應用(型別為JavaScript SDK)，點選應用進入；

②建立名稱為 Counter 的 Class；

③修改配置檔案，編輯網站根目錄下的 _config.yml 檔案，新增如下：

leancloud_visitors:
  enable: true
  app_id: 你的app_id
  app_key: 你的app_key
複製程式碼

其中，app_id 和 app_key 在你所建立的應用的設定->應用Key中。

注：為了保證應用的統計計數功能僅應用於自己的部落格系統，你可以在應用->設定->安全中心的Web安全域名中加入自己的部落格域名，以保證資料的呼叫安全。

參考：

(4 動態背景、點選出現桃心效果、去除文章底部帶#號的標籤

修改模板 /themes/next/layout/_macro/post.swig，搜尋 rel="tag">#，將#換成：

<i class="fa fa-tag"></i>
複製程式碼

參考：2018最新版Hexo部落格Next主題6.0配置優化

(5) 更改正文和程式碼的字型/更改內容區域的寬度

(1) 更改正文和程式碼字型的樣式和大小

NexT 從 5.0.1 版本開始提供一個字型定製特性。以下的修改將覆蓋source/css/_variables/base.styl「字型定製」的特性。編輯主題下的 source/css/_variables/custom.styl 檔案，新增兩個變數：

// 正文字型的大小
$font-size-base = 16px

// 程式碼字型的大小
$code-font-size = 14px
複製程式碼

注1：程式碼字型我設定的為 14px，正文字型設定的為 16px，字型族設定的為 $font-family-base = Lato,"PingFang SC","Microsoft YaHei",sans-serif。

注2：關於程式碼大小設定，除了可以修改主題下的 source/css/_variables/custom.styl 檔案，還可以通過修改同目錄下的 source/css/_variables/base.styl 檔案達到同一目的，base.styl 會覆蓋 custom.style 的修改。

// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 15px
複製程式碼

另外，程式碼大小設定還可以直接改樣式檔案``source/css/_common/_vendor/highlight/hilight.styl`：

$code-block
  background: highlight-background
  margin: 20px 0
  padding: 15px
  overflow: auto
  font-size 15px //$code-font-size;    // 改這裡
  color: highlight-foreground
  line-height:  $line-height-code-block
複製程式碼

參考：程式碼字型大小怎麼改？ · Issue #306 · iissnan/hexo-theme-next

(2) 修改程式碼區主題

新版的 Next 主題卡得很嚴，需要這樣修改。需要動的地方有：主題的 _config.yml 檔案，站點的 _config.yml 檔案。

先在站點的配置檔案中，搜尋hightlight：

highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
複製程式碼

文字自動檢測預設不啟動，所以改成 true 使其起作用。看英文應該能明白什麼意思。解釋下，line_number 表示是否顯示程式碼行號，auto_detect 表示是否對未標識哪種語言的程式碼進行自動檢測，tab_replace 表示是否替換 tab 為空格。附上一個關於 Hexo 的站點及主題配置檔案常見配置項的中文解釋 Hexo 搭建個人部落格 · 進階篇，我放在文章附錄部分。

注意：我有把 auto_detect 設定為了 true，但 hexo s 生成部落格時報錯：TypeError: Cannot set property 'lastIndex' of undefined，後來網上找到了同樣遇到該問題的人，連結：Hexo部落格(12)使用google-code-prettify程式碼高亮 | masikkk，根據文章說，將站點配置檔案 _config.yml 中的 highlight 選項的 auto_detect 設為 false，完美解決。確實如此。

再到主題的配置檔案找到 highlight_theme: normal，註釋顯示有五種顯示主題可用，分別是：

normal
night
night eighties
night blue
night bright
複製程式碼

選擇什麼要看個人審美了。

(3) 更改內容區域的寬度

NexT 對於內容的寬度的設定如下：

700px，當螢幕寬度 < 1600px
900px，當螢幕寬度 >= 1600px
移動裝置下，寬度自適應

如果你需要修改內容的寬度，同樣需要編輯樣式檔案。編輯主題的 source/css/_variables/custom.styl 檔案，新增變數：

// 修改成你期望的寬度
$content-desktop = 700px

// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
複製程式碼

注，當你使用 Pisces 風格時可以用下面的方法，我即採用的如下設定：

//當你使用 Pisces 風格時可以用下面的方法，在 source/css/_variables/custom.styl 中新增
$main-desktop = 1200px
$content-desktop = 950px
複製程式碼

參考官網文件：

常見問題 - NexT 使用文件

(6) 新增自定義選單

以新建「相簿」選單為例：在部落格目錄下的 source 資料夾下新建名為 photo 資料夾，然後在 photo 資料夾下新建一個 index.md 檔案，然後在該檔案填寫：

---
title: 相簿
date: 2018-04-16 22:14:07
type: "photo"
---
複製程式碼

然後開啟主題配置檔案 _config.yml，在 menu 中新增：

menu:
  home: / || home
  archives: /archives || archive
  categories: /categories || th
  tags: /tags || tags
  #新增了「相簿」選單
  相簿: /photo || camera
複製程式碼

解釋下：這裡的「相簿」是部落格中顯示的選單名稱，緊跟的 photo 要和前面 index.md 檔案的 type 值一致，|| 後面的選單的圖示，圖示名稱來自於 FontAwesome icon，若沒有配置圖示，預設會使用問號圖示。

參考：hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你自己的定製化部落格

(7) 新增音樂/視訊

1）新增單曲音樂

進入網易雲音樂的官網，搜尋歌曲，點開歌曲，點選「生成外鏈播放器」生成外鏈，直接拿來用就行。iframe 外掛可以在程式碼中設定寬高等引數，auto 為設定是否自動播放。flash 不可以自己設定引數。

自動播放示例：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=350 height=86 src="//music.163.com/outchain/player?type=2&id=185678&auto=1&height=66"></iframe>
複製程式碼

嵌入不自動播放只需要把以上程式碼中的 auto 改為 =0 即可。

2）新增歌單

如果想要加入歌單，就需要找到歌單或者自己建立歌單，熱後點選歌單，找到並點選進去「生成外鏈播放器」，其餘操作就和上面一樣了。不過，若歌單有變化的話，這個外鏈的歌曲同樣跟著變。示例：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=450 src="//music.163.com/outchain/player?type=0&id=2637966813&auto=1&height=430"></iframe>
複製程式碼

3）新增視訊

開啟視訊網站，比如優酷、YouTube 等。以優酷為例，開啟某個視訊後，點選「分享」，再複製 iframe 程式碼貼上到 Markdown 文章即可。示例：

<iframe height=498 width=510 src='http://player.youku.com/embed/XMTU0ODEwMzM3Ng==' frameborder=0 'allowfullscreen'></iframe>
複製程式碼

(8) 設定標題樣式（為淺藍色）

進入主題目錄 hexo\themes\next\source\css\_common\components\post\ 修改 post.sty 檔案，在配置的後面新增下面的程式碼。該檔案是博文的樣式表。

/*新增下面的CSS程式碼來修改部落格標題樣式*/
.page-post-detail .post-title {
  font-size: 26px;
  text-align: center;
  word-break: break-word;
  font-weight: $posts-expand-title-font-weight
  background-color: #b9d3ee;
  border-radius:.3em;
  line-height:1em;
  padding-bottom:.12em;
  padding-top:.12em;
  box-shadow:2px 2px 7px #9fb6cd;
  +mobile() {
    font-size: 22px;
  }
}
/*新增上面的CSS程式碼來修改部落格標題樣式*/
@import "post-expand";
@import "post-collapse";
@import "post-type";
@import "post-title";
複製程式碼

注意：如果想把主頁標題樣式一同修改，可以用把 .page-post-detail 去掉。

參考：hexo框架基於next主題定製（各種優化，很全面）

(9) 設定文章封面圖片

如果只是插入本地圖片作為文章封面，即在部落格首頁的時候會顯示文章的封面圖片，進入這篇文章的詳細頁面後，將不顯示這張圖片。

按如下方式操作：

1）修改 \themes\next\layout\_macro\post.swing 檔案。將如下程式碼複製：

{% if post.summary_img  %}
  <div class="out-img-topic">
    <img src={{ post.summary_img }} class="img-topic">
  </div>
{% endif %}
複製程式碼

新增到下圖所示的位置:

2）在新建的文章新增一個欄位屬性：summary_img。summary_img 的值是圖片的路徑，如：

---
title: CSS 各種Hack手段
date: 2017-06-25 03:25:24
categories: 前端
tags: [CSS]
comments: false
summary_img: /images/css-hack-1.png
---
複製程式碼

當然也可以不設定summary_img的圖片路徑，即也就不會顯示封面圖。

PS：這裡有個注意點，親測，圖片存放的資料夾只能新建在 source 目錄下。

參考文章：

(10) 網頁載入進度條★

開啟 /themes/next/layout/_partials/head.swig 檔案，在檔案末尾新增如下程式碼：

<!-- 網頁載入條 -->
<script src="https://neveryu.github.io/js/src/pace.min.js"></script>
複製程式碼

然後，開啟 /themes/source/css/_custom/custom.styl 檔案，在檔案末尾新增如下程式碼：

/*網頁載入條*/
/* This is a compiled file, you should be editing the file in the templates directory */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #1e92fb;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #e90f92;
  border-left-color: #e90f92;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
/*網頁載入條 END*/
複製程式碼

參考：Hexo-NexT搭建個人部落格（五） | Never_yu's Blog

另外，還看到一個方法，參考：Hexo-NexT配置超炫網頁效果 - 簡書

編輯主題配置檔案搜尋pace，將其值改為ture就可以了，選擇一款你喜歡的樣式。

# Progress bar in the top during page loading.
pace: ture
# 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
複製程式碼

(11) 底部：顯示(或隱藏)底部"強力驅動"和版本

開啟 themes/next/_config.yml 檔案，將 powered 設定為 true，顯示“強力驅動”；將 enable 設定為 true，顯示版本資訊。

# 頁尾
footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2018

  # Icon between year and copyright info.
  # icon: user
  icon: sun-o

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
-  powered: true
+  powered: false
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
-    enable: true
+    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true
複製程式碼

參考：Hexo+NexT 打造一個炫酷部落格 - 掘金（各種定製優化，非常全面）

如果需要修改，可以參考下節 (12) 的內容。

(12) 底部：設定站點建立時間和作者名稱

(1) 設定站點建立時間

since: 2013
複製程式碼

其中，網站頁面會在 - 後面的年份會自動根據當前年份顯示。參考：設定站點建立時間 · iissnan/hexo-theme-next Wiki

(2) 修改站點時間後面的作者名稱

找到 \themes\next\layout\_partials\下面的footer.swig檔案，開啟可以發現如下語句：

第一個框，是底部的站點時間後面的作者名稱，如果想加東西，一定要在雙大括號外面寫。如：xxx{{config.author}}，當然你要是想改徹底可以變數都刪掉，看個人意願。

(3) 順帶補充其他——修改底部"強力驅動"和版本資訊

第二個框，是底部的 “由Hexo驅動” 的 Hexo 連結，先給刪掉防止跳轉，如果想跳轉當然也可以自己寫地址，至於中文一會處理。注意刪除的時候格式不能錯，只把<a>標籤這部分刪除即可，留著兩個單引號''，否則會出錯。在我所使用的 next 版本刪除 <a> 標籤後結果如下：

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '') }}{#
#}</div>
{% endif %}
複製程式碼

第三個框，是更改底部的“主題-Next.XX”，這個比較爽直接將- 後面</div> 之前的都刪掉，，刪掉之後在上一行 - 後面可以隨意加上你想顯示的東西，不要顯示敏感資訊喲，請自重。在我所使用的 next 版本刪除 - 後面的對應程式碼的結果如下：

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; </div>
{% endif %}
複製程式碼

注意，我這裡的— 對應 -，這裡後面可以加上自己想要新增的內容，比如：

<a herf="https://pages.github.com/">Hosted By GitHub Page</a>
複製程式碼

接下來，處理剩餘的中文資訊。找到這個地方\themes\next\languages\ 下面的語言檔案zh-Hans.yml（這裡以中文為例，有的習慣用英文的配置檔案，道理一樣，找對應位置即可）開啟之後，如圖：

看到了吧，這個就是傳值傳過去的，你想顯示什麼就在這裡面大肆的去改動吧。其實在第二個框中，就可以把值都改掉，不用接受傳值的方式，完全自己可以重寫。不過我不建議那樣做，因為傳值這樣只要是後續頁面需要這幾個值那麼就都會通過取值去傳過去，要是在剛才 footer 檔案中直接寫死，後續不一定哪個頁面需要傳值，但是值為空了或者還是原來的，可就尷尬了。所以還是這樣改動吧。

參考：Hexo Next底部powered by的logo欄更改以及注意事項（附官方文件,文末有福利鏈） - 掘金

(13) 底部：新增網站已執行時間

在themes/layout/_parrials/footer.swing 中新增：

<!--新增網站的執行時間-->
<span id="sitetime"> <br></span>
<script language="javascript">
	function siteTime(){
		window.setTimeout("siteTime()", 1000);
		var seconds = 1000
		var minutes = seconds * 60
		var hours = minutes * 60
		var days = hours * 24
		var years = days * 365

		var today = new Date()
		var todayYear = today.getFullYear()
		var todayMonth = today.getMonth()
		var todayDate = today.getDate()
		var todayHour = today.getHours()
		var todayMinute = today.getMinutes()
		var todaySecond = today.getSeconds()
		var t1 = Date.UTC(2017,4,18,11,00,00)
		var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
		var diff = t2-t1

		var diffYears = Math.floor(diff/years)
		var diffDays = Math.floor((diff/days)-diffYears*365)
		var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
		var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
		var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
		document.getElementById("sitetime").innerHTML=" 本站已執行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小時 "+diffMinutes+" 分鐘 "+diffSeconds+" 秒<br>"
	}
	siteTime()
</script>
複製程式碼

參考：Hexo和Next主題的相關設定（持續更新） - 簡書

(14) 底部：新增訪問人數和訪問量(使用的不蒜字統計)、全站總字數

(1) 新增人數和訪問量

不蒜子是號稱極簡網頁計數器，事實上也是如此，僅僅需要兩步即可完成統計，分別為引入不蒜子 JS 和顯示統計數，為訪問量統計與訪問人數統計。

①引入不蒜子 JS

開啟 \themes\next\layout_partials\footer.swig 檔案，在頂部新增如下程式碼：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
複製程式碼

②顯示統計數

訪問量統計：

演算法a：pv 的方式，單個使用者連續點選 n 篇文章，記錄 n 次訪問量。

<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
複製程式碼

訪問人數統計：

演算法b：uv的方式，單個使用者連續點選 n 篇文章，只記錄 1 次訪客數。

<span id="busuanzi_container_site_uv">
  本站訪客數<span id="busuanzi_value_site_uv"></span>人次
</span>
複製程式碼

接著在合適的地方新增需要顯示的統計數字程式碼（同上檔案），我是在如下位置新增的：

<!-- 不蒜字統計 -->
<div>
	<i class="fa fa-user-md"></i>
	<span id="busuanzi_container_site_uv">
	  訪問人數：<span id="busuanzi_value_site_uv"></span>
	</span>&nbsp;|&nbsp;
	
	<i class="fa fa-eye"></i>
	<span id="busuanzi_container_site_pv">
	  總訪問量：<span id="busuanzi_value_site_pv"></span>
	</span>&nbsp;|&nbsp;
	
	<!-- 新增部落格全站總字數統計-->
	<i class="fa fa-pencil"></i>
	<span class="post-count">部落格全站共 {{ totalcount(site) }} 字</span>
</div>
	
{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
複製程式碼

注：之前就是使用的該方式新增的訪問人數、訪問量，但後來發現部落格並不顯示了，猜測可能是服務商關閉或是別的什麼問題。

參考：

(2) 新增部落格全站字數統計

新增單篇文章的字數統計，參考「(3) 新增文章字數統計、閱讀時長（next主題已經整合）」小節內容。

底部新增全站總字數，方法類似。先安裝：npm install hexo-wordcount --save，開啟 /themes/next/layout/_partials/footer.swig 在合適位置新增相應程式碼，我的和不蒜字統計在一起。

新增在別的地方，參考：Hexo-NexT配置超炫網頁效果 - 簡書

!!!最後，根據 (11)、(12)、(13) 、(14) 節的的修改後的結果：

(15) 設定文章加密訪問

開啟 themes/next/layout/_partials/head.swig檔案，在 ``之前插入程式碼：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('請輸入密碼') !== '{{ page.password }}'){
                alert('密碼錯誤');
                history.back();
            }
        }
    })();
</script>
複製程式碼

然後寫文章時加上password: xxx，如：

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---
複製程式碼

參考：最全Hexo部落格搭建+主題優化+外掛配置+常用操作+錯誤分析 | 遇見西門（非常全面~）

(16) 文章末尾新增"本文結束"標記/文章末尾追加版權資訊

參考：Hexo+NexT 打造一個炫酷部落格 - 掘金

(17) 取消文章目錄對標題的自動編號和取消目錄

(1) 取消文章目錄對標題的自動編號

修改 NexT 主題配置檔案 _config.yml，搜尋 number ，值改為 false。

(2) 取消目錄

如果想幹脆取消目錄，修改 NexT 主題配置檔案 _config.yml，搜尋 toc: ，修改 toc 下的 enable 值改為 false。

toc:
  enable: false

  number: false
複製程式碼

參考：hexo的NexT主題，怎麼取消“文章目錄”對標題的自動編號？

(18) 在右上角或者左上角實現fork me on github

點選這裡或者這裡挑選自己喜歡的樣式，並複製程式碼。例如，我是使用的一款右上角的，複製如下程式碼：

然後貼上剛才複製的程式碼到 themes/next/layout/_layout.swig 檔案中（放在 <div class="headband"></div> 的下面），並把 href 改為你的 GitHub 地址。

參考：hexo的next主題個性化配置教程 - SegmentFault 思否

(19) 底部大改版：新增自定義版權等資訊、訪問人數/次、網站執行時間等資訊★

注：已對「(12) 設定站點建立時間」、「(13) 新增網站已執行時間」做的修改做了更換；以及隱藏了底部"強力驅動"和版本內容（如何隱藏見該文 (11) 節操作）。

(1) 底部新增自定義版權資訊

注：如上，左側是之前的，右側是修改後的。

開啟 \themes\next\layout\_partials\ 資料夾下的 footer.swig 檔案。現把修改後的程式碼摘入如下，方便複製：

<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}<font color=black face=STLiti>Copyright &nbsp;</font><font color=black>&copy;</font> {% if theme.footer.since and theme.footer.since != current %}<font color=black face=STLiti>{{ theme.footer.since }} - </font>{% endif %}{#
#}<font color=black face=STLiti><span itemprop="copyrightYear">{{ current }}</span></font>
  <span class="with-love">
    <i class="fa fa-{{ theme.footer.icon }}"></i>
  </span>
  <span class="author" itemprop="copyrightHolder" style="font-family:STLiti;color:black;">{{ theme.footer.copyright || config.author }} . All Rights Reserved.</span>

  {% if theme.post_wordcount.totalcount %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    {% if theme.post_wordcount.item_text %}
      <span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>
    {% endif %}
    <span title="{{ __('post.totalcount') }}">{#
    #}{{ totalcount(site, '0,0.0a') }}{#
  #}</span>
  {% endif %}
</div>
複製程式碼

這是效果：

這裡使用的是「華文隸書」字型，你也可以通過修改face=STLiti 換為別的字型。要注意的是，當你這裡使用了「華文隸書」字型，別人訪問該網頁的電腦或手機若沒有安裝該字型，則不會顯示此字型樣式。我自己在手機端訪問，就發現不會顯示此字型樣式。

**但一定要別人在沒有安裝「華文隸書」字型的電腦或手機上顯示該字型樣式，有辦法嗎？**答案是有的。只需要把該字型放在 NexT 主題原始碼中，比如 \themes\next\source\images\ 資料夾下。

電腦安裝了 Office，會自動安裝一些字型，包括「華文隸書」。如何安裝字型：下載和安裝自定義字型以便在 Office 中使用 - Office 支援

方法1：雙擊下載好的 ttf 檔案，點選「安裝」即可。
方法2：複製下載好的 ttf 檔案，貼上到 C:\Windows\Fonts 會自動安裝字型。

解除安裝字型：進入 C:\Windows\Fonts 選擇需要解除安裝的字型刪除即可。

(2) 底部新增訪問人數和人次，以及網站執行時間

開啟 \themes\next\layout\_partials\ 資料夾下的 footer.swig 檔案，新增如下內容：

<!--此處為建站時間 -->
    <script>
    var now = new Date(); 
function createtime() { 
    var grt= new Date("04/17/2017 20:01:01");
    now.setTime(now.getTime()+250); 
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
    document.getElementById("timeDate").innerHTML =dnum+"&thinsp;天"; 
    document.getElementById("times").innerHTML = hnum + "&thinsp;時" + mnum + "&thinsp;分" + snum + "&thinsp;秒"; 
} 
setInterval("createtime()",250);
</script>
複製程式碼

再開啟 \themes\next\layout\_third-party\analytics\ 資料夾下的 busuanzi-counter.swig 檔案，刪除全部內容，貼上如下程式碼：

{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.total_visitors %}
    <font color=DarkSlateGray face=STLiti><span class="site-uv" title="訪問人數">
      <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>人次
    </span><span class="post-meta-divider">|</span></font>
    <font color=DarkSlateGray face=STLiti>
    <span title="總字數"><i class="fa fa-edit"></i>&ensp;<span class="post-count">{{ totalcount(site) }}</span>字,</span>
    <span id="timeDate" title="網站執行時間">載入天數...</span><span id="times" title="網站執行時間">載入時分秒...</span><span class="post-meta-divider">|</span>
    </font>
  {% endif %}

  {% if theme.busuanzi_count.total_views %}
    <font color=DarkSlateGray face=STLiti><span class="site-pv" title="總訪問量">
      <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>次
    </span></font>
  {% endif %}
</div>
{% endif %}
複製程式碼

注：這裡同上一樣，使用了「華文隸書」字型。

最後在開啟 next 主題配置檔案 _config.yml 找到 busuanzi_count，修改為如下：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user #圖示
  total_views: true
  total_views_icon: eye
  post_views: false
  post_views_icon: eye
複製程式碼

記得 enable 設定為 true。

(3) 備案資訊

開啟 /themes/next/layout/_layout.swig 檔案，新增如下程式碼：

注：如上，左側是之前的，右側是新增的程式碼。

現把新增後的程式碼摘入如下，方面複製：

<div class="footer-inner">
    {% include '_partials/footer.swig' %}
    {% include '_third-party/analytics/analytics-with-widget.swig' %}
    <!--備案等自定義↓-->

    <div style="font-family:STLiti;display:inline-block;height:20px;line-height:20px;">
        <a target="_blank" href="" ><img src="/images/gov.png" style="float:left;"/>贛公網安備 xxxxxxxxxxxx號</a>
        <span class="post-meta-divider" style="color: #555;">|</span><span><a href="http://www.miitbeian.gov.cn" target="_blank">贛ICP備xxxxx號</a></sapn>
    </div> 

    {% block footer %}{% endblock %}
</div>
複製程式碼

其中，備案資訊開頭的圖片存放在 \themes\next\source\images\ 資料夾下。

效果：

!!!最後的部落格底部效果，如下圖：

如果沒有備案，不想底部顯示備案資訊，可以考慮顯示其他，比如相同位置新增如下程式碼：

<!--版權等自定義↓-->

<div style="font-family:Courier New;display:inline-block;height:20px;line-height:20px;">
    Powered by <a target="_blank" href="https://hexo.io/zh-cn/index.html">Hexo</a>,Theme by 
    <a target="_blank" href="https://theme-next.iissnan.com/">NexT</a>. 
    Hosted by <a target="_blank" href="https://pages.github.com/">GitHub Page</a>
</div>
複製程式碼

!!!最後部落格底部效果，如圖：

(20) 左側新增社交連結和協議

開啟 next 主題配置檔案_config.yml ，找到 social_icons，設定 icons_only 和 transition 為 true：

social_icons:
  enable: true
  icons_only: true # false
  transition: true  # false
複製程式碼

然後 hexo s 預覽可以看到：

再開啟 \themes\next\layout\_macro\ 資料夾下的 sidebar.swig 檔案，在如下兩處新增程式碼：

注：如上，左側是之前的，右側是修改後的。

先把兩處改動摘入如下：

<span class="links-of-author-item">
    <! --增加的下面這行 懸浮顯示文字-->
    {% set sidebarURL = link.split('||')[0] | trim %} 
    <a href="{{ link.split('||')[0] | trim }}" target="_blank" title="{{ name + ' &rarr; ' + sidebarURL }}">
複製程式碼

{% endif %}

<! --增加的下面這部分，知識共享協議 -->
{% if theme.sidebar.copyright %}
<div class="cc-license motion-element" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="external nofollow noopener noreferrer" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a></div>
{% endif %}

{# Blogroll #}
複製程式碼

其中，svg 檔案存放在 \themes\next\source\images\ 資料夾下。

效果：

(21) 關於頁面樣式的修改，如連結的顏色、回頂部按鈕樣式、底部頁碼等等

開啟 \themes\next\source\css\_custom\ 資料夾下的 custom.styl 檔案，新增如下內容，修改內容已有註釋寫明：

// 更改文中連結的顏色
.post-body a {
  color: $orange;
  text-decoration: none;
  border-bottom: 1;
  &:hover {
    color: $blue;
    //text-decoration: underline;
  }
}

// 右下角返回頂部按鈕樣式
.back-to-top:hover {
    color: rgb(136, 255, 13);
	background-color: rgba(0, 0, 0, 0.75); //black
}

// 文章```程式碼塊頂部樣式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}


//修改文章內code樣式
code {color:#c7254e;background:#f9f2f4;border:1px solid #d6d6d6;}

// [Read More]按鈕樣式: 黑底綠字
.post-button .btn:hover {
	
    color: rgb(136, 255, 13) !important;
	background-color: rgba(0, 0, 0, 0.75); //black
}

// 頁面底部頁碼
.pagination .page-number.current {
	
    border-radius: 100%;
    background-color: rgba(100, 100, 100, 0.75);
}
// 頁面底部頁碼, 去除滑鼠置於上方時，數字上方的線
.pagination .prev, .pagination .next, .pagination .page-number {
    margin-bottom: 10px;
    border: none;
	color: rgb(1, 1, 1);
}

// 頁面底部頁碼，滑鼠置於上方，黑底綠字
.page-number:hover,.page-number:active{
	color: rgb(136, 255, 13);
	border-radius: 100%;
    //background-color: rgba(255, 0, 100, 0.75); //品紅
	background-color: rgba(0, 0, 0, 0.75); //black
}
複製程式碼

關於頁面的很多設定都可以在此設定。

除了上面這些，我還設定了其他很多，比如頁面底部頁碼、網頁載入條、返回頂部按鈕、左側資訊欄等樣式。可參考：Vincentqyw-custom.styl、Lruihao-custom.styl。檢視效果：見我部落格

另外在網上有看到別人的部落格有個頁面效果——文章之間、以及文章與下面分頁之間有隔橫，這個效果樣式一直想拿到，覺得那樣的更好看。後面聯絡到了部落格作者，問了這事，他說是用的最新版的 NexT 主題，預設就是這樣。再然後我找到了 NexT 版本更新說明的部落格網站 NexT – Theme for Hexo 發現它也是那樣的效果（最新原始碼：hexo-theme-next），看來真是新版 NexT 預設樣式。前端我只會一點，不會改啊，憂桑QAQ，只能這樣了，日後有時間在探究吧~

(22) 更換部落格背景圖

開啟 \themes\next\source\css\_custom\ 資料夾下的 custom.styl 檔案，新增如下程式碼：

//背景圖
body { 
    background-image: url(/images/background.jpg);
    background-attachment: fixed; // 不隨螢幕滾動而滾動fixed,scroll,inherit
    background-repeat: no-repeat; // 如果背景圖不夠螢幕大小則重複鋪，改為no-repeat則表示不重複鋪
    background-size: cover; // contain等比例鋪滿螢幕 //cover拉伸鋪滿
    background-position: bottom;//x,y軸調整
    +mobile(){
      //background-position: 0% -20%;https://i.loli.net/2018/12/29/5c270a0523154.jpg
      //https://i.loli.net/2018/12/29/5c270fc2bfcad.png
      background-image: url(https://ziyuan.lruihao.cn/images/bg_cell.png);
      background-size: cover;
    }
}
複製程式碼

其中，背景圖片為 background-image 後面的 url 地址，即存放在 \themes\next\source\images\ 資料夾下。

(23) 設定部落格的圖示favicon

第一步：首先要有一個常見格式名（如.jpg, .png等）的圖片作為備選 favicon，選擇一個 favicon 製作網站完成製作，例如 FavIcon from Pics、位元蟲、favicon製作 - 線上工具，最好設定為 32x32，除了自己製作，當然也可以去一些網站上找，如：EasyIcon。

第二步：將favicon.ico檔案放在網站根目錄下的 source 資料夾，如 /themes/next/source/images 資料夾下，並且修改配置檔案：

favicon:
  small: /images/favicon-16x16-next.png #小圖示 預設的NexT
  medium: /images/favicon.ico	#中圖示 預設NexT
  apple_touch_icon: /images/apple-touch-icon-next.png #蘋果觸控圖示
  safari_pinned_tab: /images/logo.svg #safari固定標籤
複製程式碼

可以看到有四種效果，一般我們只需將 medium 換成我們自己圖示路徑就行了。然後重新整理網站，就可以看到效果了。效果：

參考：關於Hexo6.0搭建個人部落格(進階篇)

(99) 第三方服務整合的比較全面的DEMO欣賞

博採眾長

「關於」頁面特別地還有個網易音樂播放，不錯，另外，部落格最底部的優化的不錯，打算借鑑。
Vincent Qin
wustxiao's blog
Zack's Blog
進擊的學霸的部落格

三、部落格速度/SEO優化

(1) SEO

參考：hexo 部落格 seo 優化

(2) 速度優化

注：關於速度的優化，本人還未實踐…

參考：

四、主題製作

附錄-配置檔案說明

Hexo 的各種通用的配置都是在部落格根目錄行下的 _config.yml 檔案中設定的。下面介紹一些常用的配置項：

# Site 基本資訊
title: Ruikye                      # 部落格標題，如左上角顯示
subtitle: ruikye 的個人部落格         # 部落格副標題
description: 移動開發技術分享部落格     # 用於搜尋引擎搜尋到的描述資訊
author: 零雨の夜                    # 部落格署名，一般會現在在部落格的最下方，rg: &copy;2014 零雨の夜
email: xxx@xxx.com                # 可不填
language: zh-CN                   # 讓部落格支援中文
...
# Writing
...
highlight:              # 程式碼高亮
  enable: true          # 開啟程式碼高亮
  line_number: false    # 是否顯示行號
  tab_replace: true     # 是否替換 tab 為空格
...
# Pagination
## Set per_page to 0 to disable pagination
per_page: 1             # 文章分頁時，每頁最多顯示文章數，eg: 我的部落格在首頁和歸檔頁最多隻顯示一篇文章
pagination_dir: page    # 分頁目錄
...
# Extensions
## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
## Themes: https://github.com/hexojs/hexo/wiki/Themes
theme: bs-light         # 這裡配置部落格的主題風格，主題安裝在 themes/ 目錄下，這裡的值就是主題的資料夾名字 
exclude_generator:
plugins:
- hexo-generator-feed   # 安裝、啟用的外掛，這裡是啟動 RSS 訂閱的外掛
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: github                                                  # 部落格託管伺服器型別
  repository: https://github.com/rakkang/rakkang.github.io.git  # 託管伺服器地址
  brach: master                                                 # 部落格使用的程式碼分支
複製程式碼

除了 Hexo 的通用配置外，每個主題還有各自的配置檔案，主題的配置檔案放在：themes/[xxx]/_config.yml, 如：themes/bs-light/_config.yml，下面以 bs-light 為例：

# 導航欄，如右上角的顯示，Tips: RSS 欄是外掛新增的不再這裡
menu:
  首頁: /                 # 格式是：[顯示標籤]:[索引目錄]
  存檔: /archives
# 文章右邊的小部件
widgets:
# search/tag/category/recent_posts/tagcloud   ----> 這裡是 bs-light 的可用小部件
- search                 # 搜尋框
- recent_posts           # 最近釋出的文章
- category               # 存檔目錄
- tagcloud               # 文章的標籤集合
# 如果在文章的 *.md 中使用 <!-- more -->，那麼之後的內容不會在首頁顯示，而是顯示 閱讀全文 的連結，顯示可以更改
# 如：更多，檢視原文等
excerpt_link: 閱讀全文
# 部落格的社交分享，eg: 部落格底部的兩個圖示
social:
# key weibo/twitter/google/github/stackoverflow/rss
# value url
# e.g github: https://github.com/DaiXiang
  github: https://github.com/rakkang
  rss: /atom.xml
...
cnzz_analytics: true     # 部落格的訪問統計，這裡使用 CNZZ 的統計
# google_analytics:
# rss:
# comment_provider:      # 評論功能，一般使用國內的 多說評論
# Facebook comment
複製程式碼

update：2018-01-30

update：2019-02-13 標題由「Hexo之NexT主題的配置及遇到的問題」改為了「NexT主題的優化定製修改指南.」；增加了很多內容，如「2.第三方服務及其他修改」這節內容；其他地方做了一些刪減和修改。

update：2019-02-14 補充完善和新增了很多內容。

update：2019-02-15 新增了「新增RSS訂閱功能」、「取消文章目錄對標題的自動編號和取消目錄」等小節、以及站點底部和頁面樣式的一些修改等

update：2019-02-17 修改了一點頁面樣式；增加了「三、部落格速度/SEO優化」節；增加了部落格 favicon

next主題配置與優化
2020-12-16
優化
Hexo設定主題以及Next主題個性設定
2017-12-13
Hexo
hexo-theme-next主題設定
2018-09-21
Hexo
專題《一》mysql優化 ---------主從複製，讀寫
2019-03-19
MySql優化
定製不同風格的App主題
2021-03-24
APP
hexo next主題
2016-07-28
Hexo
vue create 初步解析以及定製化修改
2021-12-27
Vue
API優先方法的完整指南 - ITNEXT
2022-07-01
API
新電腦優化設定指南小白必看的 Win10 優化設定教程
2019-02-21
優化Win10
設定修改linux主機名遇到的問題
2016-07-29
Linux
hexo高階教程：next主題優化之加入網易雲音樂、網易雲跟帖、炫酷動態背景、自定義樣式，打造屬於你自己的定製化部落格
2017-04-10
Hexo優化
hexo的next主題個性化教程打造炫酷網站
2017-12-20
Hexo網站
wordpress 文章的釋出和修改時定製文章標題
2018-08-17
Redis 主從複製與哨兵優化部署解析
2020-12-19
Redis優化
Hexo Next主題進階教程
2018-07-31
Hexo
Hexo NexT 主題初體驗
2018-07-25
Hexo
WAS修改了主機名的設定方法
2008-01-16
SQL優化指南
2018-12-01
SQL優化
Tkinter (41) 定製和建立 ttk 主題和樣式
2020-08-28
如何設定 MariaDB 主主複製
2022-05-23
MIUI小米主題和迪士尼中國達成授權合作推出專屬定製主題
2018-03-19
UI
修改部落格園主題
2024-10-28
Next.js頁面渲染的優化方案
2019-01-26
JS優化
使用next主題配置部落格基本資訊
2018-03-05
Notionnext 改了個導航主題
2024-09-02
提升元件庫通用能力 - NutUI 線上主題定製功能探索
2022-03-25
元件UI
在 IBM Lotus Quickr 8.5 for WebSphere Portal 中定製主題
2010-09-29
IBMUIWeb
前端效能優化指南
2019-11-01
前端優化
MySQL效能優化指南
2015-03-04
MySql優化
MongoDB效能優化指南
2016-02-27
MongoDB優化
將hexo主題next改成自己喜歡的樣子
2018-07-02
Hexo
Oomox：定製和建立你自己的 GTK2、GTK3 主題
2019-05-01
OomoxGTK2GTK3
效能優化(二) UI 繪製優化
2019-04-26
優化UI
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
天地圖修改主題顏色修改背景色
2022-04-14
地圖
微信怎麼設定桌布主題背景？微信設定桌布主題背景的方法
2019-11-04
App繪製優化
2018-09-24
APP優化
移動介面優化指南
2011-08-31
優化