Hexo Next主题更多配置

next主题配置

next的主题配置文件，位于\themes\next_config.yml。
注意区分站点配置文件和主题配置文件。
位于_config.yml的为站点配置文件。
位于\themes\next_config.yml的为主题配置文件。

next有四种风格：Muse(默认)，Mist，Pisces，Gemini。
这里将风格改为Gemini，修改主题配置文件如下

`#scheme: Mist
#scheme: Pisces
scheme: Gemini`

菜单配置

next默认只菜单项中只有home(首页), archieve(归档)。
这里打开更多菜单项：tags(标签),categories(分类)。

(1) 主题配置文件修改
修改主题配置文件如下

`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 `

tags标签配置

生成标签页

`cd <hexo folder>
hexo new page tags`

成功执行后生成文件\souce\tages\index.md。修改文件内容如下：

`title: tages
date: 2019-12-27 22:15:29
type: "tags"              # 添加此行`

此后，可在具体每一篇博客文档中添加标签，文章将会自动被按照标签分类。标签添加如下所示

categories分类配置

生成分类页

`cd <hexo folder>
hexo new page categories`

成功执行后生成文件\souce\categories\index.md。修改文件内容如下：

`title: categories
date: 2019-12-27 22:15:29
type: "categories"              # 添加此行`

此后，可在具体每一篇博客文档中添加分类，文章将会自动被按照分类进行整理。分类添加如下所示

头像配置

此处为侧边栏加入头像，修改主题配置文件如下：

`avatar:
  #Replace the default image and set the url here.
  url: <avatar image url>`

在侧边栏以及顶端显示当前阅读进度

修改主题配置文件如下：

` back2top:
  enable: true
  #Back to top in sidebar.
  sidebar: false
  #Scroll percent label in b2t button.
  scrollpercent: true
#Reading progress bar
reading_progress:
  enable: top
  #Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px `

保持侧边栏目录时刻展开，并关闭目录自动编号

修改主题配置文件如下：

`toc:
  enable: true
  #Automatically add list number to toc.
  number: false
  #If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  #If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  #Maximum heading depth of generated toc.
  max_depth: 6`

移除底部Hexo与Next声明

修改主题配置文件如下：

`powered:
  #Hexo link (Powered by Hexo).
  enable: false
  #Version info of Hexo after Hexo link (vX.X.X).
  version: false
theme:
  #Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  #Version info of NexT after scheme info (vX.X.X).
  version: false`

打开移动端自适应

修改主题配置文件如下：

mobile_layout_economy: true

开启打赏功能

修改主题配置文件如下：

`reward_settings:
  #If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  #comment: Donate comment here.
reward:
  wechatpay: <your wechatpay reward image link>
  alipay: <your alipay reward image link>
  #bitcoin: <your bitcoin reward image link>`

第三方插件设置

1. 文章字数统计及阅读时长估计
   (1) 插件安装

    `cd <hexo folder>
    npm install hexo-symbols-count-time`
   

(2) 站点配置文件
修改站点配置文件如下：

`symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true`

(3) 主题配置文件
修改主题配置文件如下：

`symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275`

2. 数学公式支持
   (1) 主题配置文件
   next主题支持两种数学渲染引擎，mathjax和katex。
   由于Latex是最常用的数学排版系统，而mathjax集成了Latex，所以这里开启mathjax，配置如下

    `math:
      mathjax:
        enable: true`
   

(2) 插件安装

`cd <hexo folder>
npm un hexo-renderer-marked
npm i hexo-renderer-kramed # or hexo-renderer-pandoc`

(3) 博客内容修改
由于数学公式渲染相当消耗资源，所以默认不会给每一篇博客都进行渲染。要开启某一篇博客的数学渲染，需要手动在Front-matter中生命，形式如下：

`title: <your blog title>
date: <date>
tags:
categories: 
mathjax: true`

3. 博客评论支持
   next支持多种第三方评论插件，此处选择最流行的Disqus。

(1) Disqus配置
首先，注册并登陆Disqus
其次，按照get started -> I want to install Disqus on my site导航，填写必要信息。重点是记住Website Name。计划选择Basic免费版，platform选择”I don’t see my platform listed, install manually with Universal Code”，然后完成设置。

(2) 主题配置文件
在主题配置文件中，打开Disqus

`comments:
  active: disqus
disqus:
  enable: true
  shortname: <your Website Name>
  count: true`

4. 网站流量分析
   (1) 谷歌流量分析
   首先，注册并登陆Google Analysis
   其次，按照侧边栏 -> 设置 -> 媒体资源 -> 跟踪信息 -> 跟踪代码导航，找到并拷贝“跟踪代码”。
   最后，在主题配置文件中，粘贴跟踪代码。

    `google_analytics:
      tracking_id: <your tracking ID>`
   

(2) 百度流量分析（国内）
首先，注册并登陆百度统计
其次，按照我的报告 -> 管理 -> 代码获取导航，找到新版统计代码获取，其格式一般如下

`<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?<your baidu tracking code>";
  var s = document.getElementsByTagName("script")[0];`

拷贝部分，并粘贴到主题配置文件中
baidu_analytics: <your baidu tracking code>
5. 搜索功能
Next提供多种搜索功能，这里介绍本地搜索。本地搜索不需要第三方插件，但仍需安装软件包，特点是操作简单但搜索效果一般，不过已经能够满足基本的搜索需求。
Next同样提供基于第三方插件的搜索服务，如Algolia搜索和Swiftype搜索，但由于目前版本还不稳定，暂时不多做介绍。

(1) 安装

`cd <hexo folder>
npm install hexo-generator-searchdb --save`

(2) 站点配置文件
设置如下

`#local search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000`

(3) 主题配置文件
设置如下

`#Local search
local_search:
  enable: true`

三、博客内容设置

1. 文章折叠显示
   在主页中，所有文章默认全部展开。一般，我们希望文章能够折叠显示，即只显示开头部分，后续部分可点开查看详情。
   next 7.60版本之前，曾提供auto_excerpt功能，实现自动截断文章形成摘要。然而在7.60版本之后，该功能被移除，官方声明如下
   next 7.60更新声明
   若希望继续体验auto_excerpt功能，则需使用next 7.60之前版本。
   在next 7.60版本之后，文章折叠需要再具体每一篇博客中手动设置。具体方法为在文章中段手动添加<!-- more -->。<!-- more -->之前的内容为预览部分，<!-- more -->之后部分会被折叠，需要点开具体文章才可查看详情。

    `title: <!-- more -->测试
    date: <date>`
   

这是在主页中，预览显示的部分。
<!-- more -->
这是在主页中，被折叠的部分。
四、SEO

1. 主题配置文件
   在主题配置文件中，打开SEO和exlurl，优化SEO效果。

    `#Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
    seo: true
    #Automatically add external URL with Base64 encrypt & decrypt.
   

   exturl: true`

2. 谷歌SEO配置
   (1) 登录谷歌站点管理工具
   谷歌站点管理工具

(2) 获取google site verification code
按照导航输入博客网址，进入Google search console。
按照”侧边栏 -> 设置 -> 所有权验证 -> html标记”导航，找到HTML元标记，格式如下所示。

(3) 主题配置文件 粘贴google site verification code到主题配置文件中

`#Google Webmaster tools verification.
#See: https://www.google.com/webmasters
google_site_verification: <your google site verification code>`

3. 百度SEO配置
   (1) 登录百度站点管理工具
   百度站点管理工具

(2) 获取baidu site verification code
按照导航输入博客网址。
注意，此处协议头必须选择https而不是http，否则会导致无法验证。
验证网站是选择HTML标签验证，得到HTML标签验证，格式如下所示

(3) 主题配置文件 粘贴google site verification code到主题配置文件中，并开启百度推送

`#Baidu Webmaster tools verification.
#See: https://ziyuan.baidu.com/site
baidu_site_verification: <your baidu site verification code>`

4. 确认搜索引擎收录
   在谷歌/百度搜索引擎中，搜索site:,若出现结果，则证明被成功收录。
   注意，从通过验证，到被成功收录，有一定时间延迟。特别是百度，延迟时间有时长达一个月。所以若站点管理页面显示通过验证，却未能在搜索引擎中查到结果，可过一段时间再尝试。

5. 提交站点地图
   站点地图是一种文件，您可以通过该文件列出您网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。
   通过提交站点地图，可增加SEO效果和搜索引擎收录效率。

(1) 安装插件

`cd <hexo folder>
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save`

(2) 站点配置文件
在站点配置文件中，添加以下内容

`#自动生成sitemap`
`sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml`

(3) 重新部署博客，生成站点地图
部署博客

`cd <hexo folder>
hexo clean
hexo d -g`

查看链接/sitemap.xml和/baidusitemap.xml，验证站点地图生成成功。
(4) 提交谷歌站点地图
谷歌站点管理工具
按照”侧边栏-站点地图”导航，输入站点地图的链接/sitemap.xml，完成谷歌站点地图的提交。

(5) 提交百度站点地图
百度提供多种站点地图提交方式。
第一是手动提交。
按照”侧边栏 -> 站点地图 -> 手动提交”导航，输入百度站点地图链接/baidusitemap.xml，提交即可。
第二是自动提交。此功能已被集成到next主题中，可以很方便地开启。
首先在next主题配置文件中，开启百度主动推送

#Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true

按照”侧边栏-站点地图-自动提交-自动推送”导航，复制”自动推送工具代码”。将其复制到\themes\next\layout_third-party\baidu-push.swig中，具体格式如下所示

{%- if theme.baidu_push %}
<your 自动推送工具代码>
{%- endif %}