Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(四)

簡介

上篇Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(三)主要是對NexT總體佈局的配置，達到完美喜歡的佈局格式。
接下來繼續對NexT主題博客進行配置，本篇主要是添加一些經常使用的第三方訪問或者服務。請跟着腳步開啓新的旅行吧。

配置

1.Math Equations Render Support 數學方程式渲染支持

這裏可能有時須要在文章中使用到時數學公式了，在這裏設置一下。

math:
  enable: true  #默認爲false
  per_page: true
  engine: mathjax   #兩種方式  mathjax / katex
  mathjax:
    cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML  #默認 這裏你們根據本身需求
  katex:
    cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css   #默認

2.Han Support 支持漢字

設置漢字支持，我沒配置，若是你們想配置的話就按照如下步驟：
1.打開Git Bash Here,進入theme/next目錄下

$ cd theme/next

2.獲取該漢字支持Git module,執行命令如下命令得到

$ git clone https://github.com/theme-next/theme-next-han source/lib/Han

3.設置漢字支持

han: true

4.更新update

$ cd themes/next/source/lib/Han
$ git pull

• 注：經過該連接能夠查看以上步驟 https://github.com/theme-next...

3.添加圖標連接到GitHub

通常在右上角或者左上角，以下個人博客配置。

• 配置右上角Fork_me_on_GitHub,按如下步驟進行

1.打開Fork_me_on_GitHub連接，裏面有許多樣式，選擇本身喜歡的樣式，將其複製下來。

2.打開本身博客項目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 將複製的內容粘貼到<div class="headband"></div>下面，以下：

• 注：要修改紅色框裏面的鏈接爲本身在GitHub上的鏈接。

• 配置右上角的Fork_me_on_GitHub

本例的方式和上面的方式同樣的步驟，可是獲取的鏈接不一樣了，本例的鏈接地址是GitHub Corners

4.將文章底部#標籤修改帶爲帶圖標的形式

在博客項目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，將 #號 換成<i class="fa fa-tag"></i>

• 原先#號的樣式

• 修改成圖標的樣式

5.font字體設置

在themes/next/_config.yml搜索font

font:
  enable: true #默認false 若是要進行字體修改那麼設置爲true

  global:
    external: true
    family: Lato   #設置字體  下同
    size:   #字體大小  下同

  headings:
    external: true
    family:
    size:
  posts:
    external: true
    family:
  logo:
    external: true
    family:
    size:
  codes:
    external: true
    family:
    size:

6.設置背景動畫樣式

NexT裏面有幾種動畫背景樣式canvas_nest、three_waves、canvas_lines、canvas_sphere等

• canvas_nest以下圖所示

按照如下步驟完成

1.打開Git Bash Here進入本身文件夾下/themes/next文件夾下

$ cd /themes/next

2.下載安裝 canvas_nest module 執行

$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

在 /themes/next/source/lib查看會看到canvas_nest文件夾

3.在/themes/next/_config.yml設置

canvas_nest: true

• 注：canvas_nest鏈接
• 注：這裏也能夠查看設置步驟：canvas_nest設置
• three_waves如圖所示

打開three_waves 查看設置步驟，這裏和canvas_nest步驟是同樣的，這裏就不寫咯。
下載完成後，在/themes/next/_config.yml設置

three_waves: true
#OR
canvas_lines: true
#OR
canvas_sphere: true

• canvas_ribbon只適合 scheme Pisces 這裏不測試了，你們能夠進入canvas_ribbon安裝

7.在網站底部添加訪問量

1.進入\themes\next\layout\_partials\footer.swig文件頂部第一行添加

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

2.搜索{% if theme.footer.powered.enable %}在這個位置上添加如下代碼

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

• 注：這裏的id值能夠選擇兩種

# busuanzi_value_site_uv  表示用戶連續點擊n篇文章，只記錄1次訪客數
# busuanzi_value_site_pv  表示用戶連續點擊n篇文章，記錄+n次訪問量
# 這裏對應的是2上的id值

8.給每篇文章添加類別和標籤

在建立的文章都在source/_post目錄下找到，每篇文章添加tags、categories

9.添加進度條

• 注：添加進度條的話在手機瀏覽的時候通常狀況都有自帶的進度條了，例如微信瀏覽、瀏覽器瀏覽等等，這樣就出現重複的進度條了，這裏看我的是否添加。可是在電腦瀏覽器瀏覽倒是不錯的。

本例設置的以下pace-theme-center-circle顯示

按照如下步驟進行

• 注：或者進入這裏 Progress配置查看如何配置

1.打開Git Bash Here進入本身文件夾下/themes/next文件夾下

$ cd /themes/next

1. 下載安裝 Progress module 執行

$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

在 /themes/next/source/lib查看會看到pace文件夾
3.在/themes/next/_config.yml設置

pace: true  #設置爲true
# 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-center-circle #這裏任選其中一種

• 注你們在這裏想用什麼樣式就本身測試。

10.添加站內搜索

因爲可能我須要快速查找相關文章，那麼就須要添加站內搜索。

按如下步驟進行

• 注：或者進入NexT配置站內搜索文檔查看如何配置

1. 安裝站內搜索插件

$  npm install hexo-generator-searchdb --save
或者
$ cnpm install hexo-generator-searchdb --save

2.在根目錄下的_config.yml添加

#表示站內搜索
search:  
    path: search.xml
    field: post
    format: html
    limit: 10000

3.在themes/next/_config.yml文件中搜索local_search,進行設置

local_search:
  enable: true  #設置爲true
  trigger: auto  # auto /  manual，auto 自動搜索、manual：按回車[enter ]鍵手動搜索
  top_n_per_article: 1
  unescape: true

11.添加打賞功能

查看配置以下

NexT主要提供三種打賞方式分別是微信、支付寶、比特幣
在themes/next搜索Reward,三個都打開吧

# Reward
reward_comment: Donate comment here  # 描述
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
bitcoin: /images/bitcoin.png

總結

本篇咱們進行了NexT主題的相關配置，這讓咱們的博客已經很是漂亮了，接下來咱們主要進行添加NexT的評論系統、添加百度、Google檢索等高級配置，但願各位讀者在配置時遇到問題是，隨時評論，咱們一塊兒解決相關問題。

推薦

你們也能夠查看關於Hexo相關文章。

Hexo搭建GitHub博客--初級(一)
Hexo搭建GitHub博客--初級(二)
Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(三)
Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(四)

個人博客

歡迎你們隨時進入個人博客學習，咱們一塊兒探究。