Hexo 搭建我的博客（九）NexT 主题进阶配置

时间 2020-08-22 标签 hexo 搭建我的博客主题进阶配置

目标

本文将介绍一些针对 NexT 主题的个性化配置。javascript

本文相关推荐阅读：css

环境及版本声明

本文基于如下环境及版本：html

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

若主题版本不一致，下面的配置方法可能不适用。java

设置 RSS

NexT 中 RSS 有三个设置选项，知足特定的使用场景：react

# false：禁用 RSS，不在页面上显示 RSS 链接.
# 留空：使用Hexo生成订阅源并自动插入连接。你可能须要先安装插件: `npm install hexo-generator-feed --save`.
# 具体的连接地址：适用于已烧制过 Feed 的情形.
rss:

具体操做以下：git

首先在站点根目录下执行下列命令安装插件：github

npm install hexo-generator-feed --save

更改 主题配置文件，设定 rss 字段的值以下：web

rss: /atom.xml

从新生成、启动服务器显示以下：ajax

添加 tags 页面

新建「标签」页面，并在菜单中显示「标签」连接。「标签」页面将展现站点的全部标签，若你的全部文章都未包含标签，此页面将是空的。下面是一篇包含标签的文章的例子：shell

---
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/live2d-widget@3.x/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/live2d-widget-model-wanko@1.0.5/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:
  # 若是没有定义, 则站点做者的配置会用于此处。
  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`