Hexo系列(四) NexT主題配置

Hexo 框架容許咱們更換合適的主題，以便於構建不一樣風格的網站，這裏介紹目前最常使用的一款主題之一 —— NexT

1、NexT 安裝

在正式開始講解 NexT 安裝以前，咱們必須明確如下幾個概念：

在使用 Hexo 框架創建的網站中，存在兩份重要的配置文件，它們的文件名稱都是 _config.yml

一份是 站點配置文件，位於 站點根目錄 下，用於網站的基礎配置

另一份是 主題配置文件，位於 themes 目錄 下，用於主題的相關配置

不一樣的主題會有不一樣的主題配置文件，由主題做者所提供

一、下載 NexT

在 站點根目錄 中打開 git bash 窗口，使用以下命令下載 NexT 主題文件到 themes 目錄 中

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

Cloning into 'themes/next'...
remote: Counting objects: 12033, done.
remote: Total 12033 (delta 0), reused 0 (delta 0), pack-reused 12033
Receiving objects: 100% (12033/12033), 13.00 MiB | 1.37 MiB/s, done.
Resolving deltas: 100% (6991/6991), done.
Checking out files: 100% (351/351), done.

注意：若是出現如下錯誤

error: RPC failed; curl 18 transfer closed with outstanding read data remaining
fatal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

請嘗試使用如下命令

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

二、啓用 NexT

打開 站點配置文件， 將 theme 選項的值改成 next，注意要在屬性和值之間要加上一個空格

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

此時，登錄本身的站點，應該能夠看到更改已經成功

2、NexT 配置

一、設置 Scheme

Scheme 是用於 改變網站佈局 的一個設置項，NexT 目前提供四種 Scheme：

• Muse ：默認 Scheme，黑白主調，大量留白
• Mist：Muse 的緊湊版本，整潔有序的單欄外觀
• Pisces：雙欄 Scheme，小家碧玉的清新
• Gemini：新增 Scheme

更改時，打開 主題配置文件，經過搜索關鍵字 Scheme Settings 定位，而後將使用的 scheme 打開註釋便可

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

二、設置動態背景

更改時，打開 主題配置文件，經過搜索關鍵字 Canvas-nest 定位，而後將 canvas_nest 的值改爲 true 便可

# Canvas-nest
canvas_nest: true

三、設置側欄行爲

默認狀況下，側欄僅在文章頁面（擁有目錄列表時）才顯示，並放置於右側位置

能夠經過修改 主題配置文件 中的 Sidebar Settings 字段控制側欄的行爲

（1）側欄位置：position

• left：靠左放置
• right：靠右放置

（2）側欄顯示時機：display

• post：默認行爲，在文章頁面（擁有目錄列表時）顯示
• always：在全部頁面中都顯示
• hide：在全部頁面中都隱藏
• remove：徹底移除

# Sidebar Position, available value: left | right (only for Pisces | Gemini).
position: left
#position: right

# Sidebar Display, available value (only for Muse | Mist):
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically
#  - hide    expand only when click on the sidebar toggle icon.
#  - remove  Totally remove sidebar including sidebar toggle.
display: post
#display: always
#display: hide
#display: remove

四、設置菜單

（1）設置菜單項

打開 主題配置文件，搜索關鍵字 Menu Settings 進行定位，各個菜單項經過 # 註釋開啓或關閉

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
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

部分菜單項的功能描述以下：

• home：主頁
• about：關於
• tags：標籤
• categories：分類
• archives：歸檔

（2）建立文件夾

這裏演示建立 categories 分類頁面的文件夾，其它菜單項的添加相似

在 站點根目錄 下，打開 git bash，輸入命令 $ hexo new page "categories"

$ hexo new page "categories"
INFO  Created: C:\Desktop\test\source\categories\index.md

（3）添加文檔頭部

這裏演示添加 categories 分類頁面的文檔頭部，其它菜單項的添加相似

打開新建的 index.md 文件，在 文檔頭部 添加如下描述：

---
title: categories
date: 2015-12-04 15:37:22
type: "categories"
comments: false
---

五、設置頭像

打開 主題配置文件， 搜索關鍵字 Sidebar Avatar 進行定位，將 avatar 的值設置成頭像圖片的連接地址便可

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: <url>

頭像圖片的連接地址能夠是：

• 完整的互聯網地址：例如，https://www.example.com/avatar.jpg
• 站點內的相對地址：例如，假設圖片命名爲 avatar.jpg，存放在 source/images/ 目錄下，則連接地址能夠寫成 /images/avatar.jpg

六、添加社交連接

打開 主題配置文件，搜索關鍵字 Social Links 進行定位，social 的值按 Key: permalink || icon 格式設置

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/Forwhfang || Github
  CSDN: https://blog.csdn.net/wsmrzx || CSDN
  cnblogs: https://www.cnblogs.com/wsmrzx || cnblogs

七、添加文字統計功能

進入 站點根目錄，打開 git bash 窗口，輸入以下命令安裝插件

$ npm install hexo-wordcount --save

而後打開 主題配置文件，進行以下配置

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

八、添加閱讀量統計功能

在 主題配置文件 中修改 busuanzi_count 字段啓用不蒜子統計功能

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer: 
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

【參考資料】

• http://theme-next.iissnan.com/getting-started.html

• https://github.com/iissnan/hexo-theme-next/wiki

• http://theme-next.iissnan.com/third-party-services.html

• https://hexo.io/plugins/

【Hexo系列相關文章】

• Hexo系列(一) 搭建博客網站

• Hexo系列(二) 配置文件詳解

• Hexo系列(三) 經常使用命令詳解

• Hexo系列(四) NexT主題配置

• Hexo系列(五) 撰寫文章