Hexo博客之NexT配置教程

发表于 2019-02-01 更新于 2023-01-31 分类于博客搭建阅读次数：

本文字数： 39k 阅读时长 ≈ 35 分钟

介绍

在看本篇之前，请确保你已成功搭建好个人博客。如没有，请移步：[博客搭建教程]
该教程中的所有链接均指向为官方链接，望知悉。
该教程为我上一篇教程的后续教程，即 Hexo 的主题配置及修改。
该教程主要是针对 NexT 主题，其他主题略有出入，如有需要请自行百度。

一、注意事项

所有配置内容在冒号后边均有一个空格（划重点！！！）
请区分好这两个概念，以后会以这两个名词来代指配置文件
如果你修改某些配置后，没有效果，请先执行清理缓存操作，再开本地服务
（2021.06.03更新）Next 主题在 7.3.0 开始，官方推荐采用数据文件将配置与主题分离，这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式，便于后续 NexT 版本更新。请点击这里进行设置后在进行基础选项的配置。

二、常用指令

1.创建文章或页面

hexo new [layout] <title> ，layout 属性如下：
post：新建文章，存放路径于 source/_posts
page：新建页面，如404，分类等，存放路径于 source/
draft：新建草稿，存放路径于 source/_drafts
上面的 <title> 属性是博文 Markdown 文件的名字，一般也会自动生成为博客文章的标题，也是博文链接的后缀（如 https://www.wrysmile.cn/2020/03/22/hexo-tutorial/ 中的hexo-tutorial）
新建文章可以使用简写命令，如本文的创建即可以用 hexo n Hexo博客之NexT配置教程
新建草稿也可以用另一个命令 hexo publish [layout] <title>

2.上传仓库

hexo clean 清理缓存文件——db.json和已生成的静态文件——public
hexo g 生成网站静态文件到默认设置的 public 文件夹
hexo s 启动本地服务器，用于预览主题。默认地址：http://localhost:4000/
hexo d 自动生成网站静态文件，并部署到设定的仓库

三、相关链接

Next主题：你可以去 NexT 官网下载，官网有下载链接、下载方法以及安装方法。查看链接
Next插件：这里总结了 Next 部分插件地址。查看链接
Next更新：该地址总结了 Next 各版本更新日志。查看链接

四、基础配置

1.切换主题

将解压好的主题放入数据目录下的 themes 文件夹下，并改名为 next
打开 站点配置文件 ，找到 theme 字段，将其改为 next

1	theme: next //直接把后边修改为主题名就行

2.选择 Scheme

Scheme 这里可以理解为网站的整体布局或方案
NexT 内置了四种样式，在 主题配置文件 中搜索 Schemes，然后将下面四个中任意一个前面的注释符号"#"去掉即可

# Schemes
#scheme: Muse        //默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
#scheme: Mist        //Muse 的紧凑版本，整洁有序的单栏外观
#scheme: Pisces      //双栏 Scheme，小家碧玉似的清新
#scheme: Gemini      //Pisces的宽松版本，看起来比较更美观

3.设置网站语言

在 站点配置文件 中搜索 language，在后边填入你想设置的语言即可
新版本中官方将中文的语言命名由 zh-Hans 改为了 zh-CN

4.菜单设置

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

在 主题配置文件 中搜 menu，需要开启哪个选项就把其前面的注释符号"#"去掉即可

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     //公益404

而图标按以下内容设置，需要用哪个就去掉其前面的注释符号"#"即可

menu_icons:
  enable: true
  #Icon Mapping
  #home: home
  #about: user
  #categories: th
  #tags: tags
  #archives: archive
  #schedule: calendar
  #sitemap: sitemap
  #commonweal: heartbeat

如需对这些页面进行配置，请点击这里跳转到进阶配置

5.开启侧栏功能

在 主题配置文件 中搜 sidebar，position 是指侧栏的位置，display 是指侧栏显示的时机。

sidebar:
  #position: left     //靠左放置
  #position: right    //靠右放置（只针对于Pisces、Gemini这两个Scheme）

 //（display只针对于Muse、Mist这两个Scheme）
  #display: post      //默认行为，在文章页面（拥有目录列表）时显示
  #display: always    //在所有页面中都显示
  #display: hide      //在所有页面中都隐藏（可以手动展开）
  #display: remove    //完全移除

6.修改头像

在 主题配置文件 中搜 avatar，将值设置为头像链接地址

7.修改站点标题、副标题、昵称、描述等信息

在 站点配置文件 中搜 Site，按需修改内容即可

# Site
title:            //标题
subtitle:         //副标题
description:      //站点描述
keywords:         //关键字
author:           //作者
language:         //语言
timezone:         //时区

8.开启友链

在 主题配置文件 中搜 Blog rolls，修改相应参数即可

links_icon: link               //友链的图标
links_title: Links             //友链的标题
links_layout: block            //友链的布局
#links_layout: inline
links:
  Title: http://example.com/   //显示名称：网址链接

新版更新如下：

# Blog rolls
links_settings:
  icon: fa fa-globe
  title: 标题
  # Available values: block | inline
  layout: block
links:
  #Title: https://example.com

9.开启分享功能

(1).百度分享

在 主题配置文件 中搜 baidushare，将前边的注释符号去掉，按下边代码修改即可开启

1
2
3

#baidushare:
  type: slide
  baidushare: true

新版已移除

(2).NeedMoreShare2

在 主题配置文件 中搜 needmoreshare，修改相应参数为 true 即可。

needmoreshare2:
  enable: false                         //这个指全局开关
  postbottom:                           //在文章底部显示
    enable: true
    options:
      iconStyle: default                //这里指图标风格
      boxForm: horizontal               //这里指分享框的样式
      position: bottomCenter            //这里位置可以根据上边注释进行自己调试
      networks: Weibo,Wechat,QQZone     //这里需要哪些网站根据上边注释自己添加
  float:                                //在博客中漂浮显示
    enable: false
    options:
      iconStyle: default
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,QQZone

新版已移除

(3).jiathis

未收录

未收录

10.开启"回到顶部"百分比显示

在 主题配置文件 中搜 b2t，修改相应参数为 true 即可

1 2	b2t: true //是否在侧栏中开启回到顶部开关 scrollpercent: true //是否以百分比形式显示

新版更新如下：

# 回到顶部按钮设置
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

11.开启文章内打赏功能

在 主题配置文件 中搜 reward_comment，去掉前面注释符号并修改相应内容参数即可

#reward_comment: Donate comment here  //打赏内容显示
#wechatpay: /images/wechatpay.jpg     //微信打赏图片/地址
#alipay: /images/alipay.jpg           //支付宝打赏图片/地址
#bitcoin: /images/bitcoin.png         //比特币打赏图片/地址

新版更新如下：

# Donate (Sponsor) settings
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: true
  comment: 介绍
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

12.开启侧栏社交功能

在 主题配置文件 中搜 social，需要哪个去掉哪个前面的注释符号，并修改网址为自己的网址

#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

新版更新如下：

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #weibo: https://weibo.com/u/yoururl || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
social_icons:
  enable: true
  icons_only: false
  transition: false

13.博客主页开启"阅读全文"功能

博客主页默认显示所有文章内容，看起来有些冗杂，故开启"阅读全文"开关可以进行适当控制
这里有三种方法，自行选取适合自己的
第一种最为推荐，可以自己控制显示多少；第二种也推荐，可以自行更改显示内容；第三种不推荐，这种排版显示不美观，但可以进行全局控制。

(1).文章截断

 语法，在文章开头适当位置插入  即可进行首页内容控制

(2).描述

在文章中的 front-matter 中添加 description ，并插入你想要显示的内容摘要即可

title: Hello world
data: 2019-02-02 20:33:56
tags: 标签
categories: 分类
description: //这里填写对该篇文章的描述，该描述仅在首页显示，进入文章后不显示

(3).主题自带

在 主题配置文件 中搜 auto_excerpt，对相应参数进行修改即可

1
2
3

auto_excerpt:     //自动形成摘要
  enable: false   //选择是否开启
  length: 150     //对文章开头的截取长度，默认150个字符

新版更新如下：

1 2	# Automatically excerpt description in homepage as preamble text. excerpt_description: true

14.修改网站图标

找一些自己心仪的图标，并下载 16x16/32x32 且格式为 png 的图标图片
将这两张图片分别改名为 favicon-16x16.png favicon-32x32.png并放置在 themes\next\source\images\ 目录下
在 主题配置文件 中搜 favicon，修改相应的图片即可

15.开启网站顶部刷新进度加载条

在 主题配置文件 中搜 pace，对相应参数进行修改，需要哪种样式就去掉前面的注释符号即可

pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
#For example
pace_theme: pace-theme-flash
#pace_theme: pace-theme-minimal

新版已移除，只有一种默认进度条，如下：

# Progress bar in the top during page loading.
# For more information: https://github.com/rstacruz/nprogress
nprogress:
  enable: true
  spinner: false

16.开启网站动态背景效果

在 主题配置文件 中搜 canvas_nest，之后的四行代码对应动态背景的配置，NexT 中内置了四种动态背景，对相应的参数进行修改即可

# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

这里可以同时开启多个特效，但容易对网站造成相应的资源损耗，建议不要这样做
新版已移除，解决办法请移步到这里进行查看

17.Front-matter 的设置

(1).什么是 Front-matter

就是博文最上方以 --- 分隔的那部分，主要用来对文章进行一些修饰

(2).默认可以使用的参数

参数	描述	默认值
layout	布局
title	标题
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）	多个标签用[,]分隔
categories	分类（不适用于分页）
permalink	覆盖文章网址

(3).怎么修改

打开你 Hexo 的根目录，找到 scaffolds 文件中的 post.md文件，并用 VScode，记事本等软件打开
需要添加哪些功能，按格式添加即可，注意每个参数后面都需要加一个空格

五、进阶配置

1.添加标签、分类、关于、归档等页面

在基础配置中我们已经开启了这三个页面，但当你实际去点这些页面时，你会发现跳转页面显示404错误，这是因为我们还没有创建这些页面，通过下面指令来进行创建。

(1).创建

在 hexo 的根目录打开 git 命令行
分别输入以下命令即可：新建标签页——输入命令 hexo new page "tags"
新建分类页——输入命令 hexo new page "categories"
新建关于页——输入命令 hexo new page "about"
新建归档页——输入命令 hexo new page "archives"

(2).修改内容

在 Hexo 的根目录下找到 source 文件夹，新建好的页面就在里面，用 Markdown 编辑器打开 .md 文件进行编写，内容如下：
标签页

1
2
3

title: 标签                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:39:14   //这里为日期，默认，无需改动
type: "tags"                //这里的类型一定要和基础配置中的菜单中的英文对应

分类页

1
2
3

title: 分类                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:45:41   //这里为日期，默认，无需改动
type: "categories"          //这里的类型一定要和基础配置中的菜单中的英文对应

关于页

title: 关于                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:47:58   //这里为日期，默认，无需改动
type: "about"               //这里的类型一定要和基础配置中的菜单中的英文对应
//关于页面三个横线下边可以写你关于自己的描述，语法为Markdown语法

归档页

1
2
3

title: 归档                 //这里为你在主页想要显示的文字
date: 2019-01-23 14:50:49   //这里为日期，默认，无需改动
type: "archives"            //这里的类型一定要和基础配置中的菜单中的英文对应

2.添加评论功能

(1).来必力评论

使用社交网站账户登录，免去注册过程。提高用户的参与和沟通意愿。管理/删除我的评论内容。提供管理页面，管理网站文章及评论内容。

去来必力官网注册账号。直达链接：查看链接
进入管理页面
选择 City 免费版本
选择一般网站，找到 uid 这一行，复制后面的值
在 主题配置文件 中搜 livere_uid，粘贴刚刚复制的 uid 的值即可
进入博客可以看到，来必力评论功能已添加

(2).Waline评论

前面的来比力评论加载速度总是很慢，所以之后打算换为 Valine 评论，结果发现在 Next8.2.0 版本中移除了对 Valine 的支持，查阅后发现是因为安全问题，可查看这里进行了解
根据上文可得知 Waline 解决了 Valine 安全问题
配置方法可查看该链接进行配置

3.添加网页在线联系功能

去 DaoVoice 官网注册一个账号。~~直达链接：查看链接~~
- 经读者2021.3.17日反映上面链接已经失效，现已更新请点击这里
在这里填入此邀请码——13e39436
找到这段中的 app_id，以后会用到
找到 /themes/next/layout/_partials/head.swig 这个文件，在这两段中间插入这段代码

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/2e5d695d.js","daovoice")
  daovoice('init', {
      app_id: "theme.daovoice_app_id"
    });
  daovoice('update');
  </script>
{% endif %}

注意：将第三行后边的 //widget.daovoice.io/widget/2e5d695d.js 中js文件名改成自己的id就行（即2e5d695d改为自己的id）；将第五行的 theme.daovoice_app_id 部分换为自己的id。

新版 Next 优化：将以上代码直接粘贴到 source\_data\head.njk 中即可

在 主题配置文件 中添加以下代码

1
2
3

# Online contact
daovoice: true
daovoice_app_id:     //这里填你刚才获得的 app_id

然后去 DaoVoice 控制台中的应用设置-聊天设置中进行个性化设置

4.设置 RSS 订阅

RSS 订阅是站点用来和其他站点之间共享内容的一种简易方式，即 Really Simple Syndication(简易信息聚合)，使用这个东西就可以把自己写的博客推送给读者。

在 Git 中安装 hexo-generator-feed 插件命令为： npm install hexo-generator-feed --save
在 站点配置文件 中在最后一行写入以下代码

# Extensions
feed:
 type: atom
 path: atom.xml
 limit: 20
 hub:
 content:
 content_limit: 140
 content_limit_delim: ' '

各参数的含义如下：

type:    RSS的类型(atom/rss2)
path:    文件路径,默认是atom.xml/rss2.xml
limit:   展示文章的数量,使用0或则false代表展示全部
hub:
content: 在RSS文件中是否包含内容 ,有3个值 true/false默认不填为false
content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为false和没有自定义的描述出现
content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志.在达到规定的内容长度之前最后出现的这个分隔符之前的内容,，防止从中间截断.

在 主题配置文件 中搜 rss，按以下设置即可开启 RSS 功能

1	rss: /atom.xml

5.添加网页标题崩溃欺骗搞怪特效

该特效来自一位博主的教程。直达链接：查看链接
旧版 Next 无法生效，新版 Next 将以下代码粘贴到 source\_data\footer.njk 文件中即可：

{# 崩溃欺骗 #}
<script type="text/javascript">
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>

6.添加动态二次元人物

Git 端安装 hexo-helper-live2d 插件命令为： npm install --save hexo-helper-live2d
在 站点配置文件 中添加以下代码，详细配置请参考文档

live2d:
  enable: true                  //控制开关
  scriptFrom: local             //默认
  pluginRootPath: live2dw/      //插件在站点上的根目录(相对路径)
  pluginJsPath: lib/            //脚本文件相对与插件根目录路径
  pluginModelPath: assets/      //模型文件相对与插件根目录路径
  tagMode: false       //标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false         //调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-koharu     //使用的模型名字
  display:
    position: right    //放置位置
    width: 150         //调整宽度
    height: 300        //调整高度
    #hOffset: 0        //调整水平位置，如需要请去掉注释
    #vOffset: -20      //调整垂直位置，如需要请去掉注释
  mobile:
    show: true         //是否在手机端显示，为了不影响观看效果，建议关闭该选项

下载模型，模型名称可以去这里参考，命令为：npm install live2d-widget-model-koharu

live2d-widget-model-koharu 即为模型名字，只需修改这里就行，这个模型就是我当前博客正在使用的，请将目光移到左下角。

下载完成后，在 Hexo 的根目录新建一个名为 live2d_models 的文件夹，在 node_modules 文件夹中找到刚刚下载的 live2d 模型，并将其复制到刚刚新建的文件夹内
修改第3步的代码 use 段，将其改为你下载的模型名称即可

7.开启爱心点击效果

在 themes\next\source\js\src\ 目录下新建 clicklove.js 文件，在其中添加以下代码：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在 themes\next\layout\_layout.swig 文件末尾添加以下代码：

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/clicklove.js"></script>

~~目前无效，正在寻找解决方法~~
无效原因已找到：之前因为是将博客部署在了 Gitee 上，这个上边不显示，后来我把博客部署在了 Github 上，发现这个特效突然出现了，初步猜测是这个原因。

!!!新版 Next 设置

只需要将以下代码粘贴到 source\_data\footer.njk 文件中即可（没有请新建）：

{# 页面点击小红心 #}
<script type="text/javascript">
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
</script>

8.修改文章内链接文本的样式

打开 themes\next\source\css\_custom\ 目录下的 custom.styl 文件，在第一行 \\Custom styles 后边插入以下代码：

if hexo-config("custom_css.post_body_a.enable")
  .post-body
    a:not(.btn){
      color: convert(hexo-config("custom_css.post_body_a.normal_color"));
      border-bottom: none;
      &:hover {
        color: convert(hexo-config("custom_css.post_body_a.hover_color"));
        text-decoration: underline;
      }
    }

这里的 a:not(.btn) 是为了不影响首页的“阅读全文”按钮。这里，我们用了 hexo-config() 函数读取配置，用 stylus 的内建函数 convert() 转换成 stylus 需要的颜色格式。

在 主题配置文件 的末尾填上如下代码：

custom_css:
  # the style of post body link
  post_body_a:
    enable: true                //是否开启
    normal_color: "#4D4DFF"     //原始链接的颜色，这里是蓝色(颜色可自己修改)
    hover_color: "#fc6423"      //鼠标经过时的颜色，这里是橙色(颜色可自己修改)

新版 Next 优化：将第一段代码粘贴到 source\_data\styles.styl 文件中即可

9.修改文章底部标签前面的图标

文章下边标签的图标默认为 “#” 号，并不美观。通过修改代码可以改为比较好看的图标

在 themes\next\layout\_macro\ 文件夹下的 post.swig 文件中搜 rel="tag>#" ，将#号换为 <i class="fa fa-tag"></i> ，如下：

1	<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>

然后就换为比较美观的一个小图标了
新版 Next 优化：在 主题配置文件 将 tag_icon 改为true即可

10.自定义代码块样式

打开 themes\next\source\css\_custom\ 目录下的 custom.styl 文件，向里面加入以下代码（颜色可以自定义）：

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

新版 Next 优化：将以上代码粘贴到 source\_data\styles.styl 文件中即可

11.隐藏网站底部的驱动信息

创建好博客后，页面底部会有“由Hexo强力驱动”字样，如果不想要这部分信息，可按以下操作进行

打开 themes\next\layout\_partials\ 文件夹下的 footer.swig 文件，使用注释符号  注释掉以下代码即可
新版 Next 只需要在 主题配置文件 中 footer 字段中的 powered 值改为 false即可

12.在网站底部添加访客量、总访问量

在 主题配置文件 中搜 busuanzi_count，对相应参数进行修改即可

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: false                                      //是否开启博文阅读量
  page_pv_header: <i class="fa fa-file-o"></i> 阅读数 //前半部分为图标，后半部分为显示的文字
  page_pv_footer:

新版更新如下：

# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: far fa-eye

13.添加字数统计、阅读时长统计功能

Git端安装 hexo-wordcount 插件，命令为：npm install hexo-wordcount --save
在 主题配置文件 中搜 post_wordcount，对相应参数进行修改即可

post_wordcount:
  item_text: true
  wordcount: true      #单篇 字数统计
  min2read: true       #单篇 阅读时长
  totalcount: false    #网站 字数统计
  separated_meta: true

如需修改显示格式，打开 themes\next\layout\_macro\ 文件夹中的 post.swig 文件，按下图修改即可

新版已移除，推荐使用 symbols_count_time ，方法在下面

!symbols_count_time方法

在 git 命令行执行以下代码：

# 卸载原有依赖 不卸载对新插件有影响
npm uninstall hexo-wordcount
# 安装新依赖
npm i hexo-symbols-count-time

在 主题配置文件 中搜 symbols_count_time，对相应参数进行修改即可

symbols_count_time:
  # 换行显示字数统计和阅读时长
  separated_meta: true
  # 文章底部显示
  item_text_post: true
  # 博客底部显示 默认为false
  item_text_total: true

在 站点配置文件 中可以设置显示哪些内容和一些统计维度（没有该字段自行添加即可）：

symbols_count_time:
  # 文章字数
  symbols: true
  # 阅读时长
  time: true
  # 总文章字数
  total_symbols: true
  # 阅读总时长
  total_time: true
  # 是否排除代码统计
  exclude_codeblock: false
  # 平均字长 即将多少个字符统计为1个字数
  awl: 4
  # 每分钟的字数 阅读速度
  wpm: 275
  # 统计单位 这里是分钟
  suffix: "mins."

14.用 LeanCloud 添加阅读次数统计功能

该功能在第十二点的 busuanzi 配置中已有，但其在博客首页并不显示，且不能管理相关博文的阅读量（我认为是缺点），所以我选择 LeanCloud。

先去 LeanCloud 官网注册。直达链接：查看链接
在控制台创建一个新应用，名称随便起，选开发版
点击新创建好的应用的右上角，找到“应用key”选项，之后会用到这些信息
点击存储-创建class，这里的 class 名称为了不出错，最好用 Counter
在设置-安全中心-Web安全域名处填入自己的博客地址
在 主题配置文件 中搜 leancloud_visitors，修改相应配置为 true ，再把第三步的信息填入即可

leancloud_visitors:
  enable: true
  app_id: #你的app_id
  app_key: #你的的app_key

15.设置文章置顶功能

安装支持文章置顶的插件先移除旧插件，命令为：npm uninstall hexo-generator-index --save再安装新插件，命令为：npm install hexo-generator-index-pin-top --save
设置置顶标志打开 themes\next\layout\_macro 目录下的 post.swig 文件，定位到 <div class="post-meta"> 字段，在该行下边加入以下代码：

{% if post.top %}
  <span class="post-meta-item-icon">
    <i class="fa fa-thumb-tack"></i>
  </span>
  <font color="red">置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

新版 Next 不建议修改主题源文件，而是在数据文件中进行修改，方法如下：

在 source\_data\ 下打开 post-meta.njk 文件（没有则新建）

在该文件中新增如下字段：

{% if post.top %}
  <span class="post-meta-divider" style="margin: 0 5px;"> | </span>
  <span class="post-meta-item-icon">
    <i class="fa fa-thumbtack"></i>
  </span>
  <font color="red" style="margin: 0 3px;">置顶</font>
{% endif %}

开启置顶功能
- 想要某篇文章置顶，就去该篇文章的 Front-matter 中加入 top: true 字样。这里 true 可以换为数字，多篇文章置顶情况下，数字越大的越在最上边
- Front-matter 即为每篇文章最前面部分，如下：
  1
  2
  3
  4
  5
  6
  title: 个人博客搭建入门教程
  date: 2019-01-26 23:31:51
  tags: 实用技巧
  categories: 博客搭建
  copyright: true
  top: true
如果想要将 top 预置入 Front-matter 将前往这里

16.插入网易云音乐

(1).在侧栏中插入网易云音乐接口

打开 themes\next\layout\_macro 目录下的 sidebar.swig 文件，定位到 include '../_custom/sidebar.swig' 这一长串代码，在 </div> 下边加入这一段代码：

1	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=86 height=86 src="{{ theme.background_music }}"></iframe>

如下图：
打开网页端网易云音乐，找到你想要插的歌曲，进入播放页面点击“生成外链播放器”
在这个界面找到框住的内容
在 主题配置文件 中适当位置增加网易云入口

1 2	# 侧栏网易云音乐链接 background_music: //这里填写上一步红框中的内容,冒号后边有空格

图片如下：

(2).在文章中插入网易云链接

打开网页端网易云音乐，找到你想要插的歌曲，进入播放页面点击“生成外链播放器”
将以下代码直接插入文章中即可

想要将歌曲改为歌单的请百度：怎么把自己的歌单做成外链

17.在文章底部增加版权信息

(1).NexT内置的Copyright功能

在 主题配置文件 中 post_copyright，将 false 改为 true

post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

之后所有文章都会带有版权信息

(2).个性化配置版权信息

在 themes\next\layout\_macro\ 目录下新建名为 my-copyright.swig 文件，向其中插入以下代码：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script>
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success",
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

中间的标题、作者、时间，最后更新、原始链接、许可协议等都可以自己修改

在 themes\next\source\css\_common\components\post\ 目录下新建名为 my-post-copyright.styl 文件，向其中插入以下代码：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

在 themes\next\layout\_macro\post.swig 文件中，定位到 theme.wechat_subscriber.enabled 这里，在这一行上边插入以下代码：

{% if not is_index %}
  <div>
    {% include 'my-copyright.swig' %}
  </div>
{% endif %}

在 themes\next\source\css\_common\components\post\post.styl 文件的最后加入以下代码：

1	@import "my-post-copyright"

在博客数据文件的根目录下有 scaffolds\post.md 文件，在三条横线上边加入 copyright 即可（置顶 top 类似），如下：

title: {{ title }}
date: {{ date }}
tags:
categories:
description:
top:
copyright:

这样每篇新建的文章都有 copyright 了，如果想要开启版权信息，只要在 copyright 后面写上 true 即可，注意空格!

(3).新版Next优化

新版 Next 不推荐直接修改主题源文件，所以可以按如下方法进行配置：
打开 source\_data\post-body-end.njk 文件（没有请新建），将如下代码复制进去（可以自行修改）：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ author }} 的个人博客">{{ author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> </p>
  <p><span>注意事项:</span>转载请保留原文链接及作者，请尊重作者的劳动成果</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
	  $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	    });
    });  
</script>
{% endif %}

打开 source\_data\styles.styl 文件（没有请新建），将如下代码复制进去（可以自行修改）：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

将 主题配置文件 中的 custom_file_path 字段中的这两个文件取消注释即可
接着执行旧版的5、6操作即可

18.搜索服务

NexT 官网给出了四种搜索——Swiftype、微搜索、Local Search以及Algolia。直达链接：查看链接
个人认为第三个即本地搜索比较方便一些，这里只说一下本地搜索的设置
安装 hexo-generator-search 插件命令为：npm install hexo-generator-search --save
安装 hexo-generator-searchdb 插件命令为：npm install hexo-generator-searchdb --save
在 站点配置文件 最下边添加以下代码：

#搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在 主题配置文件 中搜 local_search，将 enable 改为 true 即可

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

19.为博客添加背景图

可能有人会觉得博客背景太白并不怎么好看，可以通过以下方法来修改背景图

在 themes\next\source\css\_custom\custom.styl 文件中添加以下代码：

//背景图片相关
@media screen and (min-width:1200px) {
    body {
		background-image:url(/images/background.jpg);
		background-repeat: no-repeat;
		background-attachment:fixed;
		background-position:50% 50%;
		background-size: cover
    }
    #footer a {
        color:#eee;
    }
}

将你的背景图命名为 background.jpg 放入 themes\next\source\images\ 目录下，然后重新上传博客即可
我这里上传无效，所以就把上面的url部分换成了图床外链（方法请百度），如下：

1	background-image:url(https://s1.ax1x.com/2020/10/15/0oUEQK.jpg);

新版Next优化：只需要将以上的代码直接添加到 source\_data\styles.styl 文件里即可

20.隐藏首页部分文章(新版Next不支持)

有的时候我们并不想让某些文章出现在首页上，但在归档中还是可以找到的，这时就需要下方的方法了，该方法出自CSDN，转载请声明：原文

(1).修改主题的index.swig

路径在 Hexo\themes\next\layout\index.swig
将这段

{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
        {{ post_template.render(post, true) }}
    {% endfor %}
  </section>

改成

{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
        {% if post.notshow != true %}
            {{ post_template.render(post, true) }}
        {% endif %}
    {% endfor %}
  </section>

注意：上边在 for 循环中判断文章中的属性 notshow，如果不为 true 就打印出文章。所以在需要隐藏的文章 front-matter 中添加 notshow:true 就会隐藏。
!!!注意：最新版

(2).将notshow直接写入front-matter中

打开你 Hexo 的根目录，找到 scaffolds 文件中的 post.md文件，并用 VScode，记事本等软件打开
按下方的格式插入即可

title: {{ title }}
date: {{ date }}
tags:
categories:
description:
top:
notshow:
copyright:

注意：notshow: 后面有一个空格

(3).进行设置

如果需要在你的以前的文章中设置隐藏，打开你的那篇文章的 .md 文件，按我上方的格式插入并在后面表明true即可
如果是新发表的文章，只要你进行过刚刚的设置，那么在你新建一个文档时，自动会补充 notshow 属性，你只要在后面填写 true 即可

21.网站底部添加已运行时间

正在咕咕咕~ ~ ~

六、拓展配置

1.使用插件在文章中插入图片

在 站点配置文件 中搜 post_asset_folder，将值改为 true
安装 hexo-asset-image 插件命令为：npm install hexo-asset-image --save
安装好后，只要你每次新建文章之时，在文章所在目录（即\source_posts）下会自动生成同名文件夹，只要把该篇文章中所需要的图片放在该文件夹内，然后在文章中使用 ![](该文件夹名字/图片名字) 即可在文章中插入该图片

2.使用图床在文章中插入图片

使用图床外链插入图片链接优点：占用空间少，GitHub 的仓库容量仅有200M，使用图床可以减少空间的使用量缺点：图床一但被墙或关闭服务，可能会导致图片全部失效，所以建议将图片备份好，一旦图床失效，可以立即上传到其他图床上
这里我使用的是 SM.MS 图床，点击这里跳转。该图床上传上去以后有多种格式选择，你如果需要在本博客中添加，直接选择 Markdown 即可，如下：
然后在文章的适当位置插入 Markdown 语句即可，格式为：![图片名](图片链接)

3.首页页面优化

本人不是太喜欢 Next 主题的默认样式，有一种死气沉沉的感觉，所以对首页进行了相关的优化
本套配置基于 NexT 主题的 Gemini 的风格，主要包含了全局圆角化、文章透明、左上角颜色修改、去除网站顶部小黑条、手机端优化，可以自行进行修改，效果如下图：
打开 source\_data\styles.styl 文件（没有请新建），粘贴以下代码：

// 左上角分类栏相关修改
// 修改背景颜色与手机端阴影
.site-brand-container {
  background:none;
  border-radius: 15px;
  .site-nav-on & {
    +tablet-mobile() {
      box-shadow: none;
    }
  }
}
// 修改左上角标题颜色
.site-brand-container .site-meta .brand{
  color: black;  
}
.site-brand-container .site-meta .site-subtitle{
  color: gray;
}
// 修改手机端按钮颜色
.site-nav-right .toggle, .site-nav-toggle .toggle{
  color: gray;
}
.site-nav-right .toggle .toggle-line, .site-nav-toggle .toggle .toggle-line{
  background: gray; 
}
// 修改手机端顶部栏圆角
.header-inner{
  background: rgba(255,255,255,.9);
  border-radius: 15px;
}
// 回到顶部圆角
.back-to-top{
  border-radius: 15px;
}
// 去除首页文章与文章之间的背景色
.main-inner{
  background: none;  
}
// 消除顶部黑条
.headband{
    background: transparent;
}

打开 source\_data\variables.styl 文件（没有请新建），粘贴以下代码：

// 修改圆角
$border-radius           = 15px;
$border-radius-inner     = 15px;
// 修改背景透明度
$content-bg-color        = rgba(255,255,255,.9);

将 主题配置文件 中的 custom_file_path 相应文件取消注释即可

4.数据文件功能设置

(1).介绍

自从 NexT-7.3.0 开始，官方推荐采用数据文件将配置与主题分离，这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式，便于后续 NexT 版本更新。
推荐先进行该步操作后再进行以上的选项配置

(2).next.yml(已废弃)

老版本的 NexT 主题还提供了另一种配置方法，就是将主题配置放在 /source/_data/next.yml 文件. 此方法已弃用。
如果 /source/_data/next.yml 文件存在，请删除它，然后下面两种方法二选一，这里是官方文档的解释

(3)._config.[name].yml方式

好处：站点配置文件 和 主题配置文件 分离，便于设置
版本：确保 Hexo 为5.0或更高版本
要求：删除 /source/_data/next.yml 文件
方法：
- 在站点根目录创建 _config.[name].yml 文件，其中[name]字段为 站点配置文件 中 theme 字段内容
- 将 主题配置文件 中的内容全部复制到上面的文件中
- 重新上传博客即可应用以上配置

(4).theme_config方式

好处：站点配置文件 和 主题配置文件 不分离，一个配置文件即可设置所有选项
版本：确保 Hexo 为5.0或更高版本
要求：删除 /source/_data/next.yml 文件
方法：
- 在 站点配置文件 的最下面追加 theme_config: 字段
- 将 主题配置文件 中的内容全部复制到该字段下面
- 将复制的所有内容全部向后缩进两个空格（VS Code的快捷键是选中之后按下 Ctrl + ] 即可快速缩进）
- 重新上传博客即可应用以上配置

5.关于npm插件

本文的配置中很多地方都通过 npm 命令进行了插件的安装，这里写一些相关知识

(1).安装

全局与局部安装

1 2	npm install xxx //利用 npm 安装xxx模块到当前命令行所在目录 npm install -g xxx //利用 npm 安装xxx模块到全局目录

局部安装时将模块写入 package.json 中

1
2
3

npm install xxx				//安装但不将依赖写入 package.json 中
npm install xxx –-save		//安装并将依赖写入 package.json 的 "dependencies" 中
npm install xxx -–save-dev	//安装并将依赖写入 package.json 的 "devDependencies" 中

(2).卸载

全局与局部卸载

1 2	npm uninstall xxx //删除xxx模块 npm uninstall -g xxx //删除全局模块xxx

局部安装时将 package.json 中内容删去

1
2
3

npm uninstall xxx				//删除模块但不删除留在 package.json 中的对应依赖
npm uninstall xxx --save		//删除模块同时删除留在 package.json 中 "dependencies" 下的对应依赖
npm uninstall xxx --save-dev	//删除模块同时删除留在 package.json 中 "devDependencies" 下的对应依赖

6.使用批处理命令部署博客

虽然在上传 Hexo 博客时的命令只有3条，但是本着能懒就懒的原则，使用一个命令完成岂不美哉？
在桌面新建一个 .txt 文档，将如下内容填写进去，使用时请把后面的注释去掉：

@echo off					//关闭回显
H:							//切换到博客站点目录所在的盘符，我这里是H盘
cd H:\Github-blog			//进入站点目录，我这里是H:\Github-blog
hexo clean&&hexo g&&hexo d	//Hexo 命令一键部署

保存以后将这个文件改名为 自动部署.bat ，双击即可执行

7.在博客中插入自己本地文件且不渲染

在博客目录下的 source 目录中新建一个 demo 文件夹，并将自己的 HTML 本地网页存放在此处
- 因为 source 目录在 hexo g 时会生成到托管网站的 /public 目录下
在自己的博客文章中，使用如下两个例子进行引入，这里使用的是相对路径

[例子1](/demo/index.html)
<a href="/demo/index.html">例子2</a>
<a href="/demo/index.html" target="_blank">例子3</a> 
解释：
例子1是使用了Markdown写法，直接在当前窗口打开该页面
例子2是使用了HTML标签，直接在当前窗口打开该页面
例子3是使用了HTML标签和target属性，此时在新的窗口打开该页面，不影响当前页面

因为该页面是属性自己本地页面，不和博客同框架样式的，所以需要取消渲染
打开 站点配置文件 ，找到 skip_render 字段，按如下格式，如果有多个文件换行对照写即可：

1 2	skip_render: - 'demo/index.html'

如果你进行了 hexo-neat 压缩，还需要在 neat_html 字段中，按如下填写（如果没有请无视）：

neat_html:
  enable: true
  exclude:
    - 'demo/index.html'

重新执行 hexo clean && hexo g && hexo d 操作即可

七、问题集合

1.关于本地搜索框被置于最底层的问题

之前在改变全局圆角的时候，因为考虑到背景图片问题，所以我顺便给每个部分设置了一个透明度，使用的是 opacity: 0.9; 这个属性，效果也十分显著
但第二天我就发现，本地搜索框突然不能正常使用，具体表现为：点击搜索有反应，但弹出的搜索框却被置于了网页的最下面一层，且无法进行点击
在我查了一下 GitHub 的 issue 时（点这里查看），发现原来是因为 opacity 的原因，把这个注释掉就好了，但这样就不可以实现透明效果了，所以你可以这样做：
在 background-color 处使用 rgba 来实现，如下：

1 2	background-color: rgba(255,255,255,.8); //前面三个值为你的颜色的rgb值，后面那个值是透明度，值为0-1中间的数

2.关于错误代码问题

(1).Template render error

在执行 hexo g 的命令时提示该代码
经过排查，发现是由于我写的一篇 md 文档导致的，说明里面有部分特殊符号被网页进行了解析
如下图，这里的 import 标签我虽然用的单行代码引用的方法，但被浏览器解析了，而换成代码块的方式，就不会出现错误了

(2).FATAL Port 4000 has been used

在执行 hexo -s 的命令时提示该代码
经过排查，是因为我在上次执行该命令时没有及时终止进程导致的，按如下步骤杀死进程即可成功执行
在 Windows 命令行窗口分别执行如下命令：

1
2
3

netstat -ano						// 查看系统当前所有窗口占用状况
netstat -ano | findstr "4000"		// 查看4000端口被哪个应用占用
tasklist | findstr "进程id号"		// 通过id查找对应的进程名称

注意：如果此时进程名称为 node.exe 即代表是因为 hexo -s 命令没有终止导致的。如果显示为其他名字，代表是其他软件端口与 hexo 的端口冲突，此时应该更换 hexo 端口号，方法自行百度
确认进程名称为 node.exe 时执行如下命令：

1	taskkill /f /t /im "进程id或者进程名称" // 杀掉当前进程

然后再执行 hexo -s 即可成功打开博客了

3.关于git bash无法终止hexo s

在 Windows 的 cmd 窗口执行该命令即可：taskkill /F /IM node.exe

4.关于博客整体的升级问题

升级之前最好查看下 Node.js 、Hexo、Next 之前的版本匹配问题
这里是官方给的版本对照图：
|Hexo 版本|最低兼容 Node.js 版本|
| :----: | :----: |
| 5.0+ | 10.13.0 |
| 4.1 - 4.2 | 8.10 |
| 4.0 | 8.6 |
| 3.3 - 3.9 | 6.9 |
| 3.2 - 3.3 | 0.12 |
| 3.0 - 3.1 | 0.10 or iojs |
| 0.0.1 - 2.8 | 0.10 |

(1).NodeJS升级

Windows 可直接下载最新稳定版并安装
更新 npm 使用以下命令：

1 2	npm -g install npm ( 官方最新稳定版 ) npm -g install npm@6.1.0 ( 自己需要的版本 )

此时可通过执行如下命令查看 Node.js和npm 是否更新成功

1 2	node -v npm -v

(2).Hexo升级

npm install hexo-cli -g			//全局升级hexo
npm install -g npm-check		//安装npm-check
npm-check						//查看系统插件是否需要升级
npm install -g npm-upgrade		//安装npm-upgrade
npm-upgrade						//更新package.json
//在执行npm-upgrade命令后会要求输入yes或者no，直接输入Yes或Y即可
npm update -g					//更新全局插件
npm update --save				//更新系统插件

此时可通过执行如下命令查看 Hexo 是否更新成功

hexo -v

(3).Next升级

若你的主题版本很老，建议对自己的主题文件夹进行备份
在博客根目录打开 git bash 窗口，输入以下命令（next-8.4.0可以自行更改）：

1	git clone https://github.com/next-theme/hexo-theme-next themes/next-8.4.0

在主题配置文件中更换主题为 next-8.4.0

(4).更新后的问题

a).博客主页无法进入且乱码

报错信息为：

1	{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}

原因为：
hexo 在5.0之后把 swig 给删除了，此时需要自己手动安装
修改如下：

1	npm i hexo-renderer-swig

b).博客主页的首页跳转404

报错信息为：点击首页等导航时链接地址为：https://xxx.github.io/ ，且跳转到404页面
原因为：所有导航路径后都有 %20，%20 代表空格，而这个一部分又是 next 主题中生成的，只要将主题配置文件里 || 之前所有的空格删掉即可
修改如下：

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

c).页面特效失效

Next 主题从6.0版本开始就移除了原本关于页面特效的一部分依赖（可比对next/soure/lib下文件），导致新版本无法直接生效相关配置，如果需要安装可以在 theme-next 仓库中搜索主题字段并按文档安装
主题有：canvas_nest、three_waves、canvas_lines、canvas_sphere

这里以 Windows 环境下配置 canvas_nest 为例：

在 hexo/source/_data 下创建 footer.swig 文件（如果有则追加内容）:

1	<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

修改主题配置文件中的如下字段：

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

d).网站语言问题

官方将中文的语言命名由 zh-Hans 改为了 zh-CN
在 站点配置文件 中修改语言字段：

1	language: zh-CN

e).字体大小问题

更新至新版以后字体默认大小比原先大了些，需要调整可以在 font 配置下进行修改，如下：

font:
  enable: true
  # 字体地址
  host:
  # 正文字体
  global:
    # 拓展字体库，设置为 true 将从hosts中加载字体
    external: true
    # 字体族
    family: Lato
    # 大小：size=1 为默认大小，0.8将缩小为80%
    size: 0.9
  title:
    external: true
    family:
    size:
  # 正文标题字体大小
  headings:
    external: true
    family: Lato
    size:
  posts:
    external: true
    family:
  codes:
    external: true
    family:

八、该系列文章

想要了解基础搭建教程请移步这里：[Hexo博客之基础搭建教程]
想要了解高级优化教程请移步这里：[Hexo博客之高级优化教程]
想要了解Markdown教程请移步这里：[Hexo博客之Markdown教程]
想要了解Markdown渲染引擎教程请移步这里：[Hexo博客之Markdown渲染引擎]

介绍

一、注意事项

二、常用指令

1.创建文章或页面

2.上传仓库

三、相关链接

四、基础配置

1.切换主题

2.选择 Scheme

3.设置网站语言

4.菜单设置

5.开启侧栏功能

6.修改头像

7.修改站点标题、副标题、昵称、描述等信息

8.开启友链

9.开启分享功能

(1).百度分享

(2).NeedMoreShare2

(3).jiathis

(4).duoshuo_share

10.开启"回到顶部"百分比显示

11.开启文章内打赏功能

12.开启侧栏社交功能

13.博客主页开启"阅读全文"功能

(1).文章截断

(2).描述

(3).主题自带

14.修改网站图标

15.开启网站顶部刷新进度加载条

16.开启网站动态背景效果

17.Front-matter 的设置

(1).什么是 Front-matter

(2).默认可以使用的参数

(3).怎么修改

五、进阶配置

1.添加标签、分类、关于、归档等页面

(1).创建

(2).修改内容

2.添加评论功能

(1).来必力评论

(2).Waline评论

3.添加网页在线联系功能

4.设置 RSS 订阅

5.添加网页标题崩溃欺骗搞怪特效

6.添加动态二次元人物

7.开启爱心点击效果

!!!新版 Next 设置

8.修改文章内链接文本的样式

9.修改文章底部标签前面的图标

10.自定义代码块样式

11.隐藏网站底部的驱动信息

12.在网站底部添加访客量、总访问量

13.添加字数统计、阅读时长统计功能

!symbols_count_time方法

14.用 LeanCloud 添加阅读次数统计功能

15.设置文章置顶功能

16.插入网易云音乐

(1).在侧栏中插入网易云音乐接口

(2).在文章中插入网易云链接

17.在文章底部增加版权信息

(1).NexT内置的Copyright功能

(2).个性化配置版权信息

(3).新版Next优化

18.搜索服务

19.为博客添加背景图

20.隐藏首页部分文章(新版Next不支持)

(1).修改主题的index.swig

(2).将notshow直接写入front-matter中

(3).进行设置

21.网站底部添加已运行时间

六、拓展配置

1.使用插件在文章中插入图片

2.使用图床在文章中插入图片

3.首页页面优化

4.数据文件功能设置

(1).介绍

(2).next.yml(已废弃)

(3)._config.[name].yml方式

(4).theme_config方式

5.关于npm插件