Hexo+GitHub搭建靜態博客平臺(五)-NexT主題配置

簡介：深入剖析next主題的配置，包含設置RSS、添加標籤頁面、添加分類頁面、設置字體、代碼高亮、側邊欄、開啓打賞功能、背景設置等。

一、設置 RSS

NexT 中 RSS 有三個設置選項，滿足特定的使用場景。 更改 主題配置文件，設定 rss 字段的值：

• false：禁用 RSS，不在頁面上顯示 RSS 連接。
• 留空：使用 Hexo 生成的 Feed 鏈接。 你可以需要先安裝 hexo-generator-feed 插件。
• 具體的鏈接地址：適用於已經燒製過 Feed 的情形。

1.1 安裝

$ npm install hexo-generator-feed --save

1.2 配置

修改 站點配置文件 :

feed:
type: atom
path: atom.xml
limit: 20

• type - Feed type. (atom/rss2)
• path - Feed path. (Default: atom.xml/rss2.xml)
• limit - Maximum number of posts in the feed (Use 0 or false to show all posts)

二、添加「標籤」頁面

包含標籤的文章的例子：

---
title: 標籤測試文章
tags:
- Testing
- Another Tag
---

2.1 新建頁面

在終端窗口下，定位到 Hexo 站點目錄下。使用 hexo new page 新建一個頁面，命名爲 tags ：

$ cd your-hexo-site
$ hexo new page tags

2.2 設置頁面類型

編輯剛新建的頁面，將頁面的類型設置爲 tags ，主題將自動爲這個頁面顯示標籤雲。頁面內容如下：

---
title: 標籤
date: 2014-12-22 12:39:04
type: "tags"
---

2.3 修改菜單

在菜單中添加鏈接。編輯 主題配置文件 ， 添加 tags 到 menu 中，如下:

menu:
home: /
archives: /archives
tags: /tags

注意：如果有集成評論服務，頁面也會帶有評論。 若需要關閉的話，請添加字段 comments 並將值設置爲 false，如：

---
title: 標籤
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

三、添加「分類」頁面

包含分類的文章的例子：

---
title: 分類測試文章
categories: Testing
---

3.1 新建頁面

在終端窗口下，定位到 Hexo 站點目錄下。使用 hexo new page 新建一個頁面，命名爲 categories ：

$ cd your-hexo-site
$ hexo new page categories

3.2 設置頁面類型

編輯剛新建的頁面，將頁面的 type 設置爲 categories ，主題將自動爲這個頁面顯示分類。頁面內容如下：

---
title: 分類
date: 2014-12-22 12:39:04
type: "categories"
---

3.3 修改菜單

在菜單中添加鏈接。編輯 主題配置文件 ， 添加 categories 到 menu 中，如下:

menu:
home: /
archives: /archives
categories: /categories

注意：如果有集成評論服務，頁面也會帶有評論。 若需要關閉的話，請添加字段 comments 並將值設置爲 false，如：

---
title: 分類
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

四、設置字體

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

爲了解決 Google Fonts API 不穩定的問題，NexT 在 5.0.1 中引入此特性。 通過此特性，你可以指定所使用的字體庫外鏈地址；與此同時，NexT 開放了 5 個特定範圍的字體設定，他們是：

• 全局字體：定義的字體將在全站範圍使用
• 標題字體：文章內標題的字體（h1, h2, h3, h4, h5, h6）
• 文章字體：文章所使用的字體
• Logo字體：Logo 所使用的字體
• 代碼字體： 代碼塊所使用的字體

各項所指定的字體將作爲首選字體，當他們不可用時會自動 Fallback 到 NexT 設定的基礎字體組：

• 非代碼類字體：Fallback 到 “PingFang SC”, “Microsoft YaHei”, sans-serif
• 代碼類字體： Fallback 到 consolas, Menlo, “PingFang SC”, “Microsoft YaHei”, monospace

另外，每一項都有一個額外的 external 屬性，此屬性用來控制是否使用外鏈字體庫。 開放此屬性方便你設定那些已經安裝在系統中的字體，減少不必要的請求（請求大小）。

配置示例：

font:
enable: true

# 外鏈字體庫地址，例如 //fonts.googleapis.com (默認值)
host:

# 全局字體，應用在 body 元素上
global:
external: true
family: Monda

# 標題字體 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab

# 文章字體
posts:
external: true
family:

# Logo 字體
logo:
external: true
family: Lobster Two
size: 24

# 代碼字體，應用於 code 以及代碼塊
codes:
external: true
family: PT Mono

五、設置代碼高亮主題

NexT 使用 Tomorrow Theme 作爲代碼高亮，共有5款主題供你選擇。 NexT 默認使用的是 白色的 normal 主題，可選的值有 normal，night， night blue， night bright， night eighties：

更改 highlight_theme 字段，將其值設定成你所喜愛的高亮主題，例如：

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

六、側邊欄社交鏈接

側欄社交鏈接的修改包含兩個部分，第一是鏈接，第二是鏈接圖標。 兩者配置均在 主題配置文件 中。

<1> 鏈接放置在 social 字段下，一行一個鏈接。其鍵值格式是 顯示文本: 鏈接地址。

# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
微博: http://weibo.com/your-user-name
豆瓣: http://douban.com/people/your-user-name
知乎: http://www.zhihu.com/people/your-user-name
# 等等

<2> 設定鏈接的圖標，對應的字段是 social_icons。其鍵值格式是 * 匹配鍵: Font Awesome 圖標名稱， 匹配鍵 與上一步所配置的鏈接的 顯示文本* 相同（大小寫嚴格匹配），圖標名稱 是 Font Awesome 圖標的名字（不必帶 fa- 前綴）。 enable 選項用於控制是否顯示圖標，你可以設置成 false 來去掉圖標。

# Social Icons
social_icons:
enable: true
# Icon Mappings
GitHub: github
Twitter: twitter
微博: weibo

七、開啓打賞功能

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

打賞功能配置示例：

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

八、友情鏈接

編輯 主題配置文件 添加：

# title
links_title: Links
links:
MacTalk: http://macshuo.com/
Title: http://example.com/

九、騰訊公益404頁面

騰訊公益404頁面，尋找丟失兒童，讓大家一起關注此項公益事業！效果如下 http://www.ixirong.com/404.html

使用方法，新建 404.html 頁面，放到主題的 source 目錄下，內容如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="/"
homePageName="回到我的主頁">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

注：因爲404頁面只能綁定頂級域名，我的博客，沒買也沒綁定域名，所以纔不會有效果。

十、站點建立時間

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

since: 2013

十一、訂閱微信公衆號

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

在每篇文章的末尾顯示微信公衆號二維碼，掃一掃，輕鬆訂閱博客。

在微信公衆號平臺下載您的二維碼，並將它存放於博客source/uploads/目錄下。

然後編輯 主題配置文件，如下：

# Wechat Subscriber
wechat_subscriber:
enabled: true
qcode: /uploads/wechat-qcode.jpg
description: 歡迎您掃一掃上面的微信公衆號，訂閱我的博客！

十二、設置「動畫效果」

NexT 默認開啓動畫效果，效果使用 JavaScript 編寫，因此需要等待 JavaScript 腳本完全加載完畢後纔會顯示內容。 如果您比較在乎速度，可以將設置此字段的值爲 false 來關閉動畫。

編輯 主題配置文件， 搜索 use_motion，根據您的需求設置值爲 true 或者 false 即可：

use_motion: true # 開啓動畫效果
use_motion: false # 關閉動畫效果

十三、設置「背景動畫」

NexT 自帶兩種背景動畫效果

編輯 主題配置文件， 搜索 canvas_nest 或 three_waves，根據您的需求設置值爲 true 或者 false 即可：

# canvas_nest 配置示例
canvas_nest: true //開啓動畫
canvas_nest: false //關閉動畫

# three_waves 配置示例
three_waves: true //開啓動畫
three_waves: false //關閉動畫

十四、如何設置「閱讀全文」

在首頁顯示一篇文章的部分內容，並提供一個鏈接跳轉到全文頁面是一個常見的需求。 NexT 提供三種方式來控制文章在首頁的顯示方式。 也就是說，在首頁顯示文章的摘錄並顯示 閱讀全文 按鈕，可以通過以下方法：

• 在文章中使用 手動進行截斷，Hexo 提供的方式【推薦】
• 在文章的 front-matter 中添加 description，並提供文章摘錄
• 自動形成摘要，在 主題配置文件 中添加：

auto_excerpt:
enable: true
length: 150

默認截取的長度爲 150 字符，可以根據需要自行設定

建議使用 <!-- more -->（即第一種方式），除了可以精確控制需要顯示的摘錄內容以外， 這種方式也可以讓 Hexo 中的插件更好的識別。