篇Ⅱ：NexT主題的配置和優化指南

時間  2019-11-21
標籤 主題 配置 優化 指南 简体版
原文   原文鏈接

寫在前面

(1) 什麼是 Hexo：官網傳送門javascript

(2) Hexo 官網：Hexo.iocss

(3) Hexo 主題的選擇：html

本人使用主題爲 NexT v5.1.4。搭建過程各個軟件和工具的版本信息以下：前端

nodejs：v8.10.0
npm：5.6.0  #命令 npm -v 能夠查看到
NexT主題版本：5.1.4  #打開站點配置文件_config.yml搜索version能夠找到
複製代碼

注：新版的 NexT 主題源碼早已轉移在了這個倉庫 <github.com/theme-next/…java

hexo version 的信息以下：node

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
複製代碼

1、主題基本配置

關於博客主題的選擇問題，考慮了好久一直決定不下來選哪一個主題合適，在嘗試了多個以爲不錯的主題以後，最終仍是決定選擇 GitHub 最多 star 的 NexT 主題了。有那麼多人在用，廣泛大衆應該仍是很承認的。NexT 主題版本更新日誌和下載：NexT – Theme for Hexo | NexT主題 - GitHubgit

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

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

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

(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 主題下的設置的步驟以下：

  1. 先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"
---
複製代碼
  1. 而後寫的博客文章，代表所屬「分類」和擁有哪些「標籤」，官方文檔所說的格式以下：
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) 添加本地添加搜索菜單

  1. 安裝 hexo-generator-searchdb 插件：npm install hexo-generator-searchdb --save

  2. 打開站點配置文件找到 Extensions 在下面添加（其實，新增如下內容到任意位置便可）

search:
      path: search.xml
      field: post
      format: html
      limit: 10000
複製代碼
  1. 打開主題配置文件找到 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 %}
複製代碼

把這裏的&asymp;刪除便可。

注：若是想要在文章中使用，能夠這樣插入 <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， 值設置成頭像的連接地址。

其中，頭像的連接地址能夠是：

  1. 完整的互聯網 URL，例如：https://avatars1.githubusercontent.com/u/32269?v=3&s=460
  2. 站點內的地址，例如：
    • /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
複製代碼

二、禁用打賞文字抖動

1）方法一：

具體的作法就是註釋掉文字抖動函數，文件路徑：/themes/next/source/css/_common/components/post/post-reward.styl

## 註釋打賞文字抖動函數，將下面代碼註釋掉
#wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
複製代碼

方法二：

能夠在 themes\next\source\css\_custom\custom.styl 中添加劇疊樣式（推薦）：

//二維碼不抖動
#wechat:hover p, #alipay:hover p {
    animation: none;
}
複製代碼

(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
複製代碼

2、進階優化配置

添加第三方服務，官網文檔：第三方服務集成 - 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 設置步驟：

  1. 先須要去註冊一個帳號：Leancloud官網，點我註冊

    註冊完之後須要建立一個應用，名字能夠隨便起，而後 進入應用 -> 設置 -> 應用key，獲取你的 appid 和 appkey。

  2. 拿到你的 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 -> 選擇你的評論所存放的應用 -> 設置 -> 郵件模板，按下圖設置好用於重置密碼的郵件主題>而後保存：

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

  2. 修改內容：將下面的代碼複製到「內容」中，並將其中的你的網址首頁連接改成你的網址首頁連接。

    <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>
複製代碼

  3. 點擊「保存」按鈕

  4. 修改 NexT 主題配置文件，搜索 valine（快速定位），將其中的notify改成true。

設置完成後：

  1. 發表評論須要像下面這樣的驗證

  2. 若是評論者 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配置優化

標籤樣式更改，打開 \themes\next\source\css\_custom\custom.styl，添加：

//文章下面的標籤樣式
.posts-expand .post-tags a{
	box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
	transition:.2s ease-out;
	padding: 3px 5px;
	margin: 5px;
	background: #eee;
	border-bottom: none;
	border-radius: 10px;
	&:hover {
    color: $blue;
    //text-decoration: underline;
  }
}
複製代碼

(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
複製代碼

參考官網文檔：

(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) 添加音樂、視頻

一、添加單曲音樂

進入 網易雲音樂 的官網，搜索歌曲，點開歌曲，點擊「生成外鏈播放器」生成外鏈，直接拿來用就行。iframe 插件能夠在代碼中設置寬高等參數，auto 爲設置是否自動播放，auto 設爲 0 表示手動播放，爲 1 表示自動播放。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=0&height=66"></iframe>
複製代碼

二、添加歌單

若是想要加入歌單，就須要找到歌單或者本身建立歌單，熱後點擊歌單，找到並點擊進去「生成外鏈播放器」，其他操做就和上面同樣了。不過，若歌單有變化的話，這個外鏈的歌曲一樣跟着變。示例：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=450 src="//music.163.com/outchain/player?type=0&id=2637966813&auto=0&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) 設定站點創建時間

這個時間將在站點的底部顯示，例如 © 2013 - 2015。編輯主題配置文件 _config.yml，新增字段 since：

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 %}
複製代碼

注意，我這裏的&mdash; 對應 -， 這裏後面能夠加上本身想要添加的內容，好比：

<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 換爲別的字體。要注意的是，當你這裏使用了「華文隸書」字體，別人訪問該網頁的電腦或手機若沒有安裝該字體，則不會顯示此字體樣式。我本身在手機端訪問，就發現不會顯示此字體樣式。

**但假若是想要別人在沒有安裝「華文隸書」字體的電腦或手機上顯示該字體樣式，有辦法嗎？**答案是有的。只須要把該字體 ttf 文件放在 NexT 主題源碼中，好比 \themes\next\source\images\ 文件夾下，而後打開 \themes\next\source\css\_custom\custom.styl 文件，添加：

//壓縮的字體
@font-face {
	font-family: STLiti;
	src: url("/images/STLITI.TTF");
}
複製代碼

便可。

這裏提下，電腦安裝了 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>
複製代碼

!!!最後博客底部效果，如圖：

(4) 修改底部的桃心

打開 \themes\next\layout\_partials\footer.swig 文件，修改：

<span class="with-love">
    <i class="fa fa-{{ theme.footer.icon }}"></i>
</span>
複製代碼

修改成：

<span class="with-love" id="animate" style="font-size: 13px">
	<i class="fa fa-heart"></i>
</span>
複製代碼

而後再打開 \themes\next\source\css\_common\components\footer\footer.styl 文件，在相應處添加或修改成以下：

if hexo-config('footer.icon.animated') {
	#animate {
    animation: iconAnimate 1.88s ease-in-out infinite;
	}
}

.with-love {
  display: inline-block;
  margin: 0 5px;
  color: #9a6eac;
}
複製代碼

(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 默認樣式。前端我只會一點，不會改啊，只能這樣了，往後有時間在探究吧~

2019-06-16 更新：如今知道了，只須要在主題配置文件設置 scheme 爲 Gemini 便可。

(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搭建我的博客(進階篇)

(24) 文章標題下顯示評論或Comments字樣

打開：\themes\next\layout\_macro\post.swig 文件，搜索 <span class="post-meta-item-icon">，在全部搜索到的該 span 標籤下添加：

<span class="post-meta-item-text">評論：</span>
複製代碼

或者：（看自個想要中文仍是英文字眼顯示）

<span class="post-meta-item-text">Comments：</span>
複製代碼

由於我用的是 valine 評論，因此我也能夠只在 valine 下添加如上代碼。

{% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<span class="post-comments-count">
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
    </span>
    <span class="post-meta-item-text">Comments：</span>
    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
        <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
    </a>
</span>
{% endif %}
複製代碼

不過仍是建議在搜索到的該標籤下都添加，以防從此換別的評論系統不顯示。

(25) 設置文章標題下的發表、分類、訪問次數、文章字數、閱讀時間等爲英文

打開 \themes\next\languages\zh-Hans.yml，在 post 下相應處修改成以下：

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

注：# 爲註釋。

(26) 設置文章加密

參考：next 主題添加密碼訪問 | YouForever，使用的插件 hexo-blog-encrypt 地址：github.com/MikeCoder/h…

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

3、博客速度/SEO優化

(1) SEO

參考：hexo 博客 seo 優化

(2) 速度優化

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

參考：

4、主題製做

附錄-配置文件說明

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
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程