目標

本文將介紹一些針對 NexT 主題的個性化配置。

本文相關推薦閱讀：

環境及版本聲明

本文基於以下環境及版本：

hexo: 3.8.0
hexo-cli: 1.1.0
NexT: 7.1.0
OS: Ubuntu 18.04 LTS x86_64

若主題版本不一致，下面的配置方法可能不適用。

設置 RSS

NexT 中 RSS 有三個設置選項，滿足特定的使用場景：

# false：禁用 RSS，不在頁面上顯示 RSS 連接.
# 留空：使用Hexo生成訂閱源並自動插入鏈接。你可能需要先安裝插件: `npm install hexo-generator-feed --save`.
# 具體的鏈接地址：適用於已燒製過 Feed 的情形.
rss:

具體操作如下：

首先在站點根目錄下執行下列命令安裝插件：

npm install hexo-generator-feed --save

更改 主題配置文件，設定 rss 字段的值如下：

rss: /atom.xml

重新生成、啓動服務器顯示如下：

添加 tags 頁面

新建「標籤」頁面，並在菜單中顯示「標籤」鏈接。「標籤」頁面將展示站點的所有標籤，若你的所有文章都未包含標籤，此頁面將是空的。下面是一篇包含標籤的文章的例子：

---
title: QuickSort
date: 2019-04-13 17:49:09
tags: [Java, Sort]
categories:
- [Algorithm, Sort]
---

QuickSort Demo

新建頁面

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

$ hexo new page tags
INFO  Created: ~/VScode/hexo/source/tags/index.md

設置頁面類型

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

---
title: tags
date: 2019-04-13 17:56:13
type: "tags"
---

修改菜單

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

menu:
  home: / || home
  tags: /tags/ || tags
  archives: /archives/ || archive

注意

如果沒有設置頁面類型，默認情況下「標籤」頁面會被當成普通頁面，我們文章的標籤信息不會出現在「標籤」頁面中，例如：

在設置了頁面類型後，再打開：

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

---
title: tags
date: 2019-04-13 17:56:13
type: "tags"
comments: false
---

添加 categories 頁面

與 “添加 tags 頁面” 類似

新建頁面

$ hexo new page categories 
INFO  Created: ~/VScode/hexo/source/categories/index.md

設置頁面類型

編輯剛剛新建的頁面（source/categories/index.md），將頁面的類型設置爲 categories ，主題將自動爲這個頁面顯示分類。頁面內容如下：

---
title: categories
date: 2019-04-13 17:57:40
type: "categories"
---

修改菜單

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

menu:
  home: / || home
  categories: /categories/ || th
  archives: /archives/ || archive

注意

如果沒有設置頁面類型，則文章的分類信息不會出現在「分類」頁面中，下面是設置了頁面類型後的示例：

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

設置閱讀全文

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

使用 ``

在文章中嵌入  標記，Hexo 會將其之上的內容作爲首頁預覽內容，這是 Hexo 提供的方式

使用 description

在文章的 front-matter 中添加 description，並提供文章摘錄

使用 NexT 配置

如果需要自動形成摘要，則將 auto_excerpt 下的 enable 設置成 true，默認截取的長度爲 150 字符，可以根據需要在 主題配置文件 中自行設定：

# 自動將頁面滾動到<!-- more -->標記下的部分.
scroll_to_more: true

# 在Cookie中自動保存每個帖子/頁面上的滾動位置.
save_scroll: false

# 自動摘錄 description 作爲主頁的預覽內容.
excerpt_description: true

# 自動摘錄（不推薦）.
auto_excerpt:
  enable: true
  length: 150

# Read more button
# 如果爲true，則會在摘錄部分顯示read more按鈕.
read_more_btn: true

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

設置文章置頂

默認順序

Hexo 默認主頁文章按日期降序。

# Home page setting
# path: 博客主頁根路徑. (default = '')
# per_page: 每頁顯示文章數量. (0 = 禁用分頁)
# order_by: 文章排序. (默認按日期降序)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

安裝 hexo-generator-index-pin-top

首先是卸載默認排序插件，安裝新插件，新插件支持文章置頂：

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

置頂文章

在需要置頂的文章的 front-matter 中設置 top: 1 即可實現文章置頂功能，並且數字越大文章越靠前，如：

---
title: Hello World
top: 1
---

添加置頂圖標

上面置頂文章會文章排在前面，但是不會有任何有關 “置頂” 的標識。我們可以修改 NexT 主題的/themes/next/layout/_macro/post.swig 文件，在 <div class="post-meta"> 下加入 “置頂” 標識，如圖標和文字描述：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>{{ __('post.sticky') }}</font>
  <span class="post-meta-divider">|</span>
{% endif %}

此時的效果如下：

設置代碼塊高亮

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

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

啓用代碼塊複製功能

編輯 主題配置文件，啓用 codeblock 模塊，如下：

codeblock:
  # Manual define the border radius in codeblock, leave it blank for the default value: 1
  border_radius:
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result
    show_result: true
    # Style: only 'flat' is currently available, leave it blank if you prefer default theme
    style:

設置 copy_button: true，啓用複製按鈕；同時設置 show_result: true，顯示代碼複製結果。

修改文章鏈接樣式

打開文件 /themes/next/source/css/_common/components/post/post.styl，在末尾添加以下 CSS 樣式:

.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

顏色可自定義，在這裏選中狀態爲橙色，鏈接樣式爲藍色，效果如下:

修改文章底部標籤樣式

打開模板文件 /themes/next/layout/_macro/post.swig，找到 for tag in post.tags 部分，將 # 換成 <i class="fa fa-tag"></i>，如下:

{% for tag in post.tags %}
  <a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}

修改後，效果如下：

統一添加文章結束標記

在 /themes/next/layout/_macro 下新建 passage-end-tag.swig 文件，並添加以下代碼：

<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束 <i class="fa fa-heart"></i> 感謝閱讀-------------</div>

打開 /themes/next/layout/_macro/post.swig 文件，在 END POST BODY 後面引入 passage-end-tag.swig，如下：

{#####################}
{### END POST BODY ###}
{#####################}

{% if theme.passage_end_tag.enable and not is_index %}
  {% include 'passage-end-tag.swig' %}
{% endif %}

在 主題配置文件 _config.yml 的末尾添加以下配置：

# 文章結束標記
passage_end_tag:
  # 是否顯示文章結束標記
  enable: true

該配置爲自定義配置，與上面的代碼配套使用，方便通過簡單的配置來啓用或者關閉文章結束標記。顯示效果如下：

添加版權信息

編輯 主題配置文件，修改如下配置：

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# 許可證的可用值: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 如果你喜歡CC許可證的翻譯版本，可以設置 lanuage 的值.
# CC許可證有39種語言版本，你可以根據需要找到特定的正確的縮寫.
creative_commons:
  license: by-nc-sa
  # 是否在側邊欄顯示版權信息
  sidebar: true
  # 是否在文章底部顯示版權信息
  post: true
  # 可以設置CC許可證的翻譯版本
  language:

by-nc-sa 表示 署名-非商業性使用-相同方式共享，更加詳細的解釋請查閱官網 creativecommons.org

設置 sidebar: true 後，顯示效果如下：

設置 post: true 後，顯示效果如下：

如果需要自定義文章底部版權信息的，可以自行修改 /themes/next/layout/_partials/post/post-copyright.swig 文件。

設置打賞功能

首先將你的 WeChat Pay / Alipay / Bitcoin 的收款二維碼圖片放到 /themes/next/source/images 文件夾下，或者上傳到圖牀並獲取它們的絕對 HTTP 地址。

編輯 站點配置文件，啓用打賞功能，例如選擇使用微信支付和支付寶：

# Reward (Donate)
reward_settings:
  # 如果爲true，則默認會在每篇文章底部顯示打賞.
  # 你可以通過在 Front-matter 中設置 `reward: true | false` 在特定文章中顯示或隱藏打賞.
  enable: true
  animation: false
  comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！

reward:
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.png

效果如下：

點擊打賞按鈕：

設置站點背景

NexT 默認提供3種背景配置，但都需要安裝依賴。以下配置均不修改 vendors: 下的內容。

Canvas-nest 背景

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

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

Step 3

編輯 主題配置文件，啓用 cavas_nest 模塊，如下：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: false # 是否在手機上顯示
  color: "0,0,255" # RGB顏色值, 用 ',' 分隔
  opacity: 0.5 # 線條透明度: 0~1
  zIndex: -1 # 背景的 z-index 屬性值
  count: 99 # 線條數量

在 站點根目錄下 啓動服務器，顯示效果如下（其它設置可根據需要自行修改）：

JavaScript 3D library 背景

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

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

Step 3

編輯 主題配置文件，設 three_waves，canvas_lines，canvas_sphere 其中一項爲 true，如下：

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: true
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

在 站點根目錄下 啓動服務器，three_waves 顯示效果如下：

canvas_lines 效果如下：

canvas_sphere 效果如下：

Canvas-ribbon 背景

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

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

Step 3

編輯 主題配置文件，啓用 canvas_ribbon 模塊，如下：

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: ribbon的寬度.
# alpha: ribbon的透明度.
# zIndex: ribbon的顯示級別.
canvas_ribbon:
  enable: true
  size: 300
  alpha: 0.6
  zIndex: -1

在 站點根目錄下 啓動服務器，顯示效果如下：

設置左上角或右上角 github 圖標

開啓默認設置

NexT 支持通過配置開啓右上角 github 圖標，編輯 主題配置文件，啓用 github-banner 如下：

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  # 點擊即跳轉到該鏈接，自行設定
  permalink: https://github.com/yourname
  # 當鼠標懸浮於上方時顯示的文本
  title: Follow me on GitHub

效果如下：

進階自定義設置

自定義配置使其可以使用 GitHub Ribbons 和 GitHub Corners 中的任何一款圖標。

修改 /themes/next/layout/_partials/github-banners.swig 文件內容如下：

github-banner.swig

同時編輯 站點配置文件，修改 github_banner 部分如下：

# `Follow me on GitHub` banner in the top-left or top-right corner.
# `Fork me on GitHub` banner in the top-left or top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/wylu
  title: Follow me on GitHub
  # Available values of ribbons:
  # See: https://github.blog/2008-12-19-github-ribbons/
  # ribbons-left-red | ribbons-left-green | ribbons-left-darkblue 
  # ribbons-left-orange | ribbons-left-gray | ribbons-left-white
  # ribbons-right-red | ribbons-right-green | ribbons-right-darkblue 
  # ribbons-right-orange | ribbons-right-gray | ribbons-right-white
  # Available values of corners:
  # See: http://tholman.com/github-corners/
  # corners-right-black | corners-right-green | corners-right-red 
  # corners-right-blue | corners-right-white
  # corners-left-black | corners-left-green | corners-left-red
  # corners-left-blue | corners-left-white
  # If not set, it will use NexT default style.
  type:
  # You can set size of banner.
  # Default values for ribbons: width = height = 120
  # Default values for corners: width = height = 80
  size:
  # whether to display on the mobile side.
  # If use left banner, you should better set it "false" as the banner will cover menu button. 
  mobile: true

這樣你就可以通過 type 隨意切換 banner 的樣式了。

設置側欄閱讀進度百分比

編輯 站點配置文件，修改 back2top 部分如下：

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

設置頂部閱讀進度條

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

Step 3

編輯 主題配置文件，啓用 reading_progress 模塊，如下：

注意：不是vendors:下的reading_progress

# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
  enable: true
  color: "#37c6c0"
  height: 2px

設置頂部頁面加載進度條

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

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

Step 3

編輯 主題配置文件，啓用 pace 模塊，如下：

注意：不是vendors:下的pace

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: 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
pace_theme: pace-theme-minimal

設置閱讀位置標記功能

Bookmark 是一個插件，允許用戶保存他們的閱讀位置。只需單擊頁面左上角的書籤圖標（如書籤）即可保存閱讀位置，當他們下次訪問您的博客時，他們可以通過單擊主頁上的書籤圖標繼續讀取最後一個位置。

注意：實測當站點語言設置爲 en 時，該功能不能正常使用，若設置爲 zh-CN 可以正常使用，其它語言未測試。

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

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

Step 3

編輯 主題配置文件，啓用 bookmark 模塊，如下：

注意：不是 vendors: 下的 bookmark

# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
  enable: true
  # If auto, save the reading position when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

啓用數學公式渲染引擎

編輯 主題配置文件，修改 bookmark 配置，如下：

# Math Equations Render Support
math:
  enable: true

  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front Matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: false

  engine: mathjax
  #engine: katex

  # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
  mathjax:
    cdn: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

    # See: https://mhchem.github.io/MathJax-mhchem/
    #mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
    #mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) needed to full Katex support.
  katex:
    cdn: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
    #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css

    copy_tex:
      # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
      enable: false
      copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
      copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css

設置 enable: true，即啓用引擎渲染數學公式。per_page 表示是否自動渲染每一頁，如果爲 true 則只渲染 front-matter 中包含 mathjax: true 的文章。例如：

---
title: Hello World
date: 2019-04-12 17:49:09
top: 1
mathjax: true
---

要想更好的支持 mathjax 需要安裝 hexo-rendering-pandoc (或者 hexo-renderer-kramed)，詳見 Hexo相關問題和優化中有關數學公式渲染的說明。

設置字數統計和預計閱讀時間

包括文章字數統計、預計閱讀時間，和頁面底部站點總字數統計、總閱讀時間預計。

Symbols count and time to read of articles.

Better than hexo-reading-time and faster than hexo-worcount. No external dependencies.

插件 hexo-symbols-count-time 的使用說明詳見 https://github.com/theme-next/hexo-symbols-count-time

Step 1

進入到工程目錄下，安裝 Hexo 插件：

npm install hexo-symbols-count-time --save

Step 2

編輯 站點配置文件，添加如下內容：

# Hexo plugin: hexo-symbols-count-time
# https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  symbols: true # 文章字數統計
  time: true # 文章預計閱讀時間
  total_symbols: true # 頁面底部站點總字數統計
  total_time: true # 頁面底部站點總閱讀時間預計

Step 3

此插件集成在 NexT 主題中，在 Hexo 站點配置文件 中啓用插件後，你可以調整 NexT 配置中的選項，查看 主題配置文件，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true # 文章統計結果是否獨立一行顯示
  item_text_post: true # 是否展示文章統計結果的文本
  item_text_total: true # 是否展示站點統計結果的文本
  awl: 2
  wpm: 275

如果 separated_meta: false，則效果如下：

awl

平均字長（平均一個字的字符數），默認值：4。
- CN≈2
- EN≈5
- RU≈6
wpm

每分鐘閱讀字數，默認值：275。
- 慢≈200
- 正常≈275
- 快≈350

中國用戶注意事項：因爲中文平均字長約爲 1.5，如果你大多數情況下用中文寫帖子（沒有混合英文），建議將 awl 設置爲 2，將 wpm 設置爲 300。但是，如果你通常將你的帖子與英語混合，那麼 awl 到 4 和 wpm 到 275 就會很好。

添加 Live2D 看板娘萌寵

插件 hexo-helper-live2d 的使用說明詳見 https://github.com/EYHN/hexo-helper-live2d

詳細配置過程及說明推薦參考 Miaia 的博客用Live2D讓看板喵入住你的Hexo博客吧(^o)/~

Step 1

進入到工程目錄下，安裝 Hexo 插件：

npm install hexo-helper-live2d --save

Step 2

在插件作者的博客中挑選一個模型，記錄該模型的名字。模型資源名稱爲 live2d-widget-model-模型名稱，例如選擇模型 shizuku ，則其對應的 Live2D 資源名稱爲 live2d-widget-model-shizuku，然後直接在站點根目錄下安裝該模型，命令如下：

npm install live2d-widget-model-shizuku --save

Step 3

編輯 站點配置文件，添加如下內容：

# Hexo plugin: hexo-helper-live2d
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  #scriptFrom: jsdelivr # jsdelivr CDN
  #scriptFrom: unpkg # unpkg CDN
  #scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
  model:
    use: live2d-widget-model-shizuku # npm-module package name
    #use: wanko # folder name in (hexo base dir)/live2d_models/
    #use: ./wives/wanko # folder path relative to hexo base dir
    #use: https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json # Your custom url
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -10
  mobile:
    show: false
    scale: 0.05
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

執行命令 hexo clean && hexo g && hexo s，效果如下：

配置項說明，摘自 Miaia 博客用Live2D讓看板喵入住你的Hexo博客吧(^o)/~

配置項	類型	屬性	備註
enable	Boolean	`true`或者`false`	控制live2d插件是否生效。
scriptFrom	String	`local`或者`jsdelivr`或者`unpkg`	l2dwidget.js使用的CDN地址，local表示使用本地地址。
pluginRootPath	String	例如：`live2dw/`	插件在站點上根目錄的相對路徑。
pluginJsPath	String	例如：`lib/`	腳本文件相對與插件根目錄路徑。
pluginModelPath	String	例如：`assets/`	模型文件相對與插件根目錄路徑。
tagMode	Boolean	`true`或者`false`	標籤模式, 控制是否僅替換tag標籤而非插入到所有頁面中。
debug	Boolean	`true`或者`false`	調試模式, 控制是否在控制檯輸出日誌。
model.use	String	例如：`live2d-widget-model-hijiki`	npm 模塊包名（上文例中即使用的這個方式）。
model.use	String	例如：`hijiki`	博客根目錄/live2d_models/ 下的目錄名。
model.use	String	例如：`./wives/hijiki`	相對於博客根目錄的路徑。
model.use	String	例如：`https://域名/model.json`	你自定義live2d模型json文件的url。
model.scale	Number	可選值，默認值爲 `1`	模型與canvas的縮放。
model.hHeadPos	Number	可選值，默認值爲 `0.5`	模型頭部橫座標。
model.vHeadPos	Number	可選值，默認值爲 `0.618`	模型頭部橫座標。
display.superSample	Number	可選值，默認值爲 `2`	超採樣等級。
display.width	Number	可選值，默認值爲 `150`	canvas的長度。
display.height	String	可選值，默認值爲 `300`	canvas的高度。
display.position	Number	可選值，默認值爲 `right`	顯示位置：左或右。
display.hOffset	Number	可選值，默認值爲 `0`	canvas水平偏移。
display.vOffset	Number	可選值，默認值爲 `-20`	canvas水平偏移。
mobile.show	Boolean	可選值，默認值爲 `true`	控制是否在移動設備上顯示。
mobile.scale	Number	可選值，默認值爲 `0.5`	移動設備上的縮放。
react.opacityDefault	Number	可選值，默認值爲 `0.7`	默認透明度。
react.opacityOnHover	Number	可選值，默認值爲 `0.2`	鼠標移上透明度（此項貌似沒有效果）。

官方API文檔

添加文章分享按鈕

Step 1

進入到 NexT 主題目錄下：

cd themes/next

Step 2

安裝模塊到 source/lib 目錄下：

git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

Step 3

編輯 主題配置文件，啓用 needmoreshare2 模塊，如下：

# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks:
# Weibo,Wechat,Douban,QQZone,Twitter,Facebook,Linkedin,Mailto,Reddit,Delicious,StumbleUpon,Pinterest,
# GooglePlus,Tumblr,GoogleBookmarks,Newsvine,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: true
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

啓用 postbottom 分享按鈕，點擊按鈕效果如下：

啓用 float 分享按鈕，點擊按鈕效果如下：

這兩個分享按鈕可同時啓用，也可以單獨使用其中一個，其它參數配置效果可自行測試。

設置網頁底部信息

查看 主題配置文件，默認 footer 配置如下：

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: user
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#808080"

  # If not defined, `author` from Hexo main config will be used.
  copyright:

  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # http://www.beian.miit.gov.cn
  beian:
    enable: false
    icp:

  # Any custom text can be defined here.
  #custom_text: Hosted by <a href="https://pages.coding.me" class="theme-link" rel="noopener" target="_blank">Coding Pages</a>

默認效果如下：

注意：默認是沒有 站點總字數 和 站點閱讀時長 的，這裏有相關顯示是因爲上面啓用了統計功能。

設置建站時間

編輯 footer 下的 since 配置如下，例如建站時間爲2019，則：

footer:
  # 指定建站日期，若沒有定義則使用當前的年份作爲建站日期。
  since: 2019

設置版權所有者

footer:
  # 如果沒有定義, 則站點作者的配置會用於此處。
  copyright: wylu

編輯 footer 下的 icon 配置如下：

footer:
  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

這裏使用 fa-heart 的圖標，並且啓用動畫和設置 icon 的顏色爲紅色。

隱藏 Hexo 和 NexT 信息

編輯 footer 下的 powered 和 theme 配置如下：

footer:
  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true

修改完配置後，效果如下：

添加站點運行時間

在 /themes/next/layout/_custom 文件夾下新建一個名稱爲 site-runtime.swig 的文件，並添加內容如下：

<div id="site-runtime">
  <span class="post-meta-item-icon">
    <i class="fa fa-clock-o"></i>
  </span>
  <span id="runtime"></span>
</div>
<script language="javascript">
  function isPC() {
    var userAgentInfo = navigator.userAgent;
    var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    for (var i = 0; i < agents.length; i++) {
      if (userAgentInfo.indexOf(agents[i]) > 0) {
        return false;
      }
    }
    return true;
  }

  function siteTime(openOnPC, start) {
    window.setTimeout("siteTime(openOnPC, start)", 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;

    {% if theme.footer.runtime.start %}
      start = new Date("{{ theme.footer.runtime.start }}");
    {% endif %}
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var diff = now - start;

    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);

    if (openOnPC) {
      document.getElementById("runtime").innerHTML = "Running: " + diffYears + " years " + diffDays + " days " + diffHours + " hours " + diffMinutes + " mins " + diffSeconds + " secs";
    } else {
      document.getElementById("runtime").innerHTML = "Running: " + diffYears + "y " + diffDays + "d " + diffHours + "h " + diffMinutes + "m " + diffSeconds + "s";
    }
  }

  var showOnMobile = {{ theme.footer.runtime.mobile }};
  var openOnPC = isPC();
  var start = new Date();
  siteTime(openOnPC, start);

  if (!openOnPC && !showOnMobile) {
    document.getElementById('site-runtime').style.display = 'none';
  }
</script>

編輯文件 /themes/next/layout/_partials/footer.swig，在文件底部添加如下內容：

{% if theme.footer.runtime.enable %}
  {% include '../_custom/site-runtime.swig' %}
{% endif %}

編輯 主題配置文件，在 footer 下添加如下配置作爲其子配置項：

# Site Runtime
runtime:
  enable: true
  # The time of the site started running. If not defined, current time of local time zone will be used.
  # You can specify the time zone by adding the `+HOURS` or `-HOURS` format time zone.
  # If not specify the time zone, it will use `+0000` as default.
  # ex: "2015-06-08 07:24:13 +0800", `+0800` specify that it is the time in the East Eight Time Zone.
  start: 2015-06-08 08:00:00 +0800
  # Whether to show on the mobile side
  mobile: true

注意：runtime 必須在 footer 下才能正常工作，與 footer 下的 theme 是平級關係，該配置支持設置是否在移動端顯示，不支持修改展示文本語言。對於要修改展示文本語言的，可以直接修改 site-runtime.swig 文件。

添加鼠標點擊效果

愛心點擊效果

在 /themes/next/source/js/src 下新建文件 love.js，接着把該鏈接下的 js 代碼複製到 love.js 文件中。如果鏈接失效，可以到博主Github 複製。如果沒有 src 目錄，則自行手動創建。

煙花點擊效果

在 /themes/next/source/js/src 下新建文件 fireworks.js，接着把該鏈接下的 js 代碼複製到 fireworks.js 文件中。

新建 `click-animation.swig`

在 /themes/next/layout/_custom 文件夾下新建文件 click-animation.swig，並添加如下代碼：

{% if theme.click_animation.enable %}
  <script type="text/javascript">
    function isPC() {
      var userAgentInfo = navigator.userAgent;
      var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
      for (var i = 0; i < agents.length; i++) {
        if (userAgentInfo.indexOf(agents[i]) > 0) {
          return false;
        }
      }
      return true;
    }
    var showOnMobile = {{ theme.click_animation.mobile }};
    var openOnPC = isPC();

    {% if theme.click_animation.style == "love" %}
      if (openOnPC || showOnMobile) $.getScript("/js/src/love.js");
    {% elseif theme.click_animation.style == "fireworks" %}
      if (openOnPC || showOnMobile) {
        var newCanvas = $('<canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;"></canvas>');
	    $("body").append(newCanvas);
        $.getScript("http://cdn.bootcss.com/animejs/2.2.0/anime.min.js").done(function (script, textstatus) {
          if (textstatus == "success" && typeof(anime) != undefined) {
            $.getScript("/js/src/fireworks.js");
          }
        });
      }
    {% endif %}
  </script>
{% endif %}

修改 `_layout.swig`

在 /themes/next/layout/_layout.swig 文件 <body> 標籤內的底部添加如下代碼：

{% include '_custom/click-animation.swig' %}

添加自定義配置項

編輯 主題配置文件，在文件末尾添加如下配置：

# Mouse Click Animation.
click_animation:
  enable: true
  # Available values of style: love | fireworks
  # If not define, there will be no click animation even enabled.
  style: love
  # Whether to show on the mobile side
  mobile: false

當 style: love 時，效果如下：

當 style: fireworks 時，效果如下：

添加自定義404頁面

參考 MOxFIVE 博客在 Hexo 中創建匹配主題的404頁面

在站點根目錄下，執行如下命令創建404頁面：

hexo new page 404

編輯新建的頁面文件，默認在站點根目錄下 /source/404/index.md，在 front-matter 中添加 permalink: /404，表示指定該頁面固定鏈接爲 http://"主頁"/404.html

---
title: 404
date: 2019-05-07 22:30:57
comments: false
permalink: /404
---

<center>404 Not Found
對不起，您所訪問的頁面不存在或者已刪除
[點擊此處](https://wylu.github.io)返回首頁
</center>


* 我的Github：[http://github.com/wylu](http://github.com/wylu)
* 我的CSDN：[https://blog.csdn.net/qq_32767041](https://blog.csdn.net/qq_32767041)
* 給我留言：[https://wylu.github.io/guestbook/](https://wylu.github.io/guestbook/)

在本地打開鏈接 http://localhost:4000/404.html ，如果能看到如下效果，則表示配置成功。需要注意的是，在本地測試時，當你嘗試跳轉到一個不存在的頁面時，不會顯示自定義的404頁面，但是當我們將頁面部署到 GithubPages 時，它就會使用我們自定義的404頁面。

添加圖片放大預覽功能

利用 Fancybox 能放大查看圖片。

有 Fancybox2 和 Fancybox3 兩個版本，這裏使用 Fancybox3。

如果已經有 fancybox2 的，需要在站點根目錄下執行下列命令進行刪除：

rm -rf themes/next/source/lib/fancybox

進入到 themes/next 主題目錄下，執行以下命令安裝 fancybox3 模塊：

cd themes/next

git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

編輯 主題配置文件，啓用 fancybox，修改配置如下：

fancybox: true

放大預覽效果如下：

Hexo 搭建個人博客（九）NexT 主題進階配置

目標

環境及版本聲明

設置 RSS

添加 tags 頁面

新建頁面

設置頁面類型

修改菜單

注意

添加 categories 頁面

新建頁面

設置頁面類型

修改菜單

注意

設置閱讀全文

使用

使用 description

使用 NexT 配置

設置文章置頂

默認順序

安裝 hexo-generator-index-pin-top

置頂文章

添加置頂圖標

設置代碼塊高亮

啓用代碼塊複製功能

修改文章鏈接樣式

修改文章底部標籤樣式

統一添加文章結束標記

添加版權信息

設置打賞功能

設置站點背景

Canvas-nest 背景

Step 1

Step 2

Step 3

JavaScript 3D library 背景

Step 1

Step 2

Step 3

Canvas-ribbon 背景

Step 1

Step 2

Step 3

設置左上角或右上角 github 圖標

開啓默認設置

進階自定義設置

設置側欄閱讀進度百分比

設置頂部閱讀進度條

Step 1

Step 2

Step 3

設置頂部頁面加載進度條

Step 1

Step 2

Step 3

設置閱讀位置標記功能

Step 1

Step 2

Step 3

啓用數學公式渲染引擎

設置字數統計和預計閱讀時間

Step 1

Step 2

Step 3

添加 Live2D 看板娘 萌寵

Step 1

Step 2

Step 3

添加文章分享按鈕

Step 1

Step 2

Step 3

設置網頁底部信息

設置建站時間

設置版權所有者

設置建站時間和版權所有者之間的圖標

隱藏 Hexo 和 NexT 信息

添加站點運行時間

添加鼠標點擊效果

愛心點擊效果

使用 ``

添加 Live2D 看板娘萌寵

新建 `click-animation.swig`

修改 `_layout.swig`