Hexo的Next主題配置

使用Next主題

• 在這裏Downloads Next主題代碼
• 將下載的代碼放在myBlog/next目錄下
• 設置站點myBlog/_config.yml的theme字段值爲next
• 生成新頁面hexo g
• 開啓服務hexo s --debug
• 發佈代碼hexo d

注：此時登陸網站，發現是空白的，打開控制檯，提示不少vendors目錄下的文件404，解決辦法是將next主題下即myBlog/themes/next/source下的vendors目錄名改成lib，並修改myBlog/themes/next/_config.yml的_internal: vendors改成_internal: lib。

參考：iissnan的回答

主題配置

主題風格設定

經過修改next主題下的_config.yml的scheme字段，配置不一樣的風格。

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces

本站點使用的是默認的Muse，顯示效果以下：

菜單設置

經過修改next主題下的_config.yml的menu字段，選定顯示的菜單項。

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html

其中，home表明主頁，categories表明分類頁，about表明關於頁面，archives表明歸檔頁，commonweal表明404頁面（page not found時候顯示的頁面）。

菜單項文本修改是在對next主題下的language文件夾下的文件進行修改，若當前語言是簡體中文，直接修改language/zh-Hans.yml裏的對應字段便可。

本站點顯示主頁，分類頁，關於頁面和歸檔頁。

頭像設置

在主題下的source/images/下放置頭像文件avatar.gif便可。

設置文章代碼主題

Next主題總共支持5種主題，默認主題是白色的normal。經過修改next主題下的_config.yml的highlight字段，來設置代碼主題。

本站點使用的是night主題。即令highlight爲night。

添加標籤頁面

前面經過修改next主題下的_config.yml文件中的menu選項，能夠在主頁面的菜單欄添加標籤選項，可是此時點擊標籤，跳轉的頁面會顯示page not found。

添加標籤頁面的具體方法是：

• 新建頁面

輸入以下命令：

$ cd myBlog
$ hexo new page tags

輸入命令後，在myBlog/source下會新生成一個新的文件夾tags，在該文件夾下會有一個index.md文件。

• 設置頁面類型

在上步新生成的myBlog/source/tags/index.md中添加type: "tags"，index.md文件內容以下：

---
title: tags
date: 2016-11-15 19:10:05
type: "tags"
---

• 設置具體文章的tags

當要爲某一篇文章添加標籤，只需在myBlog/source/_post目錄下的具體文章的tags中添加標籤便可，如：

---
title: 基於Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加爲標籤後的效果以下：

添加分類頁面

步驟與添加標籤頁面相似，具體以下：

• 新建頁面

輸入以下命令：

$ cd myBlog
$ hexo new page categories

輸入命令後，在myBlog/source下會新生成一個新的文件夾categories，在該文件夾下會有一個index.md文件。

• 設置頁面類型

在上步新生成的myBlog/source/categories/index.md中添加type: "categories"，index.md文件內容以下：

---
title: categories
date: 2016-11-15 19:11:13
type: "categories"
---

• 設置具體文章的categories

當要爲某一篇文章添加分類，只需在myBlog/source/_post目錄下的具體文章的categories中添加分類便可，如：

---
title: 基於Hexo和Github搭建博客
date: 2016-11-09
tags: [npm, hexo, github]
categories: 搭建博客
---

本站添加爲標籤後的效果以下：

添加關於我頁面

步驟與添加標籤頁面相似，具體以下：

• 新建頁面

$ cd myBlog
$ hexo new page about

輸入命令後，在myBlog/source下會新生成一個新的文件夾about，在該文件夾下會有一個index.md文件。

• 修改about/index.md

本站點index.md以下：

---
title: about
date: 2016-11-15 19:08:50
---
## 關於我

一隻學習前端的小菜鳥，歡迎分享知識。

From XDU

QQ：847909475
Email: 847909475@qq.com

效果以下：

引入第三方服務

加入評論功能

本站點使用的是多說。加入評論功能的步驟以下：

• 登陸多說，填寫表單，建立站點

圖片中紅框圈中的框中內容就是下一步duoshuo_shortname字段的值

• 添加duoshuo_shortname

在站點的myBlog/_config.yml中加入duoshuo_shortname字段，值爲第一步紅框裏的內容

加入評論後效果以下：

加入分享功能

本站點使用的是多說。加入分享功能的步驟以下：

在站點的myBlog/_config.yml中加入duoshuo_share字段，值爲true。

加入分享後效果以下：

加入站點內容搜索功能

本站點使用的是Local Search。加入站點內容搜索功能步驟以下：

• 安裝hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save

注意：安裝時應在站點根目錄下，即myBlog目錄下

• 添加search字段

在站點myBlog/_config.yml中添加search字段，以下：

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

效果以下：

加入數據統計與分析功能

本站點使用的是百度統計。加入數據統計與分析功能步驟以下：

• 註冊站長帳號並登錄

在這裏註冊站長帳號，並填寫信息，網站域名和網站首頁如下圖爲例來填寫，註冊完成後並登錄。

• 在跳轉的頁面中會顯示下圖，複製hm.js後的id值
  

• 添加baidu_analytics字段

在站點myBlog/_config.yml中添加search字段，值爲上步複製的id值

至此，該功能已成功加入，大約過20min後在百度統計上能夠看到站點的訪問狀況，以下圖：

參考連接

• hexo-theme-next
• Next使用文檔