Hexo-NexT安装和优化教程（持续更新～）

23B9AA6A418DCB5006CBD74DFF25F421

本教程参考了NexT官方中文文档以及收集了一些他人博客的内容，并加以整合。在文章下将依次标明地址。

前排提醒

为了主题设置更加简便，推荐使用VS Code进行主题代码的更新
同时 Mac 终端输入sudo su进入root用户， Windows 管理员打开cmd进入root用户
修改/添加代码记得: 后面留一个空格，否则无法生效。
正确留白：
错误：

_config.yaml文件官方说明

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

安装NexT主题

首先进入你的博客目录，如我的博客目录(blog)地址为
/Users/breidincasimi/blog
cd your-hexo-site
再输入
git clone https://github.com/iissnan/hexo-theme-next themes/next
完成后，打开站点配置文件_config.yaml，找到 theme 字段，并将其值更改为 next。
theme: next
验证主题
输入hexo s后可在浏览器访问http://localhost:4000查看效果。

Schemes三种主题

在themes/next/_config.yaml中的scheme中选择自己喜欢的主题即可,如下所示。

Muse： 3BA57E248A421E59361C8C2D0C263CFA
Mist: 0C7D718E8FBEC487C5BB47F715A78DD5
Pisces(本人博客采用)：
718459A3D0A80A1588B875AF79EE6C6A

Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces

社交链接

在themes/next/_config.yaml中的social填入社交链接。

social:
  GitHub: https://github.com/1073015375
  csdn: https://blog.csdn.net/CasimiBreidin/article/details/98479038
  Bilibili: https://space.bilibili.com/19412606

链接图标可去Font Awesome找到。设置如下：

1
2
3

social_icons:    
  GitHub: github
  csdn: crosshairs

友情链接

在themes/next/_config.yaml中的links填入友情链接。

links:
  Baidu: http://lab.mkblog.cn/lmbtfy/
  Google: http://www.google.com.hk

打赏

在themes/next/_config.yaml中的Reward添加支付宝/微信图片。

# Reward
reward_comment: 有趣的话给我一瓶肥宅快乐水吧～
wechatpay: /images/wx.JPG
alipay: /images/zfb.JPG
bitcoin: #/images/dashang.png

Valine评论（推荐）

注册LeanCloud并创建应用，名字可随便，选择开发版。
点击安全中心，在服务开关中，只打开数据储存。
在Web 安全域名中填入域名

在themes/next/_config.yaml中的valine中填写appid和appkey。 (别忘记把enable：false改为true)

valine:
  enable: true    # 打开valine评论功能
  appid:         
  appkey:        
  notify: false   # 邮件提醒
  verify: false   # 评论时是否有验证码，需要在Leancloud 设置->安全中心 中打开
  placeholder: ～各位可以畅所欲言～ # 评论框默认显示
  avatar: mm # 评论者的头像
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

其中appid和appkey在LeanCloud中的应用key获取。 F5D9854F58D1ADF11BF9588D74AE08

配置CDN
点击https://www.jsdelivr.com/package/npm/valine获取最新的cdn地址：
后在themes/next/layout/_third-party/comments/valine.swig将官方cdn//unpkg.com/valine/dist/Valine.min.js换成获取的cdn//cdn.jsdelivr.net/npm/valine@1.3.9/dist/Valine.min.js
此时可以hexo s临时查看Valine是否成功出现！

动态背景

进入themes/next/layout/_layout.swig，在 < /body>之前添加代码。

1
2
3

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

后在themes/next/_config.yml中设置

1 2	# Canvas-nest canvas_nest: true

文章内链接颜色

在themes/next/source/css/_common/components/post/post.styl中添加代码：

.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/source/css/_custom/custom.styl中添加如下代码：

// Custom styles.
// 文章添加阴影
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

CDFF3C77BDCFBFCA1819136E94162618

头像设置/翻转效果

头像设置：找到themes/next/source/css/_custom/custom.styl中的avatar，添加本地图片链接。
翻转效果：找到themes/next/source/css/_common/components/sidebar中的sidebar-author.styl将css样式内容全部替换为代码：

.site-author-image {
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  transition: 1.4s all;
}

.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

点击出现红心

在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{con
tent: '';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+";trans
form: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,scal
e: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在末尾添加代码，用来引用clicklove.js。

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

文章结束标记

1 在themes/next/layout/_macro中新建passage-end-tag.swig，并添加代码：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢阅读-------------</div>
    {% endif %}
</div>

2 在themes/next/layout/_macro/post.swig中添加代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

3 在themes/_config.yaml末尾添加代码：

1 2	passage_end_tag: enabled: true

安装Live2d 看板娘

1.安装hexo-helper-live2d –save文件

在博客根目录输入npm install hexo-helper-live2d --save
若安装失败，Windows可在git bash安装，Mac可输入cnpm install hexo-helper-live2d --save
~~比如我安装所有插件只能使用cnpm而非npm，原因未知._.~~
2.在站点配置文件_config.yaml中（非themes/_config.yaml的！）添加代码：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    # 填写你所需要的看板娘名称
    use: live2d-widget-model-tororo
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

其中看板娘可在https://blog.csdn.net/wang_123_zy/article/details/87181892预览或者点击这里查看官方。

3.安装看板娘所需文件
输入npm install live2d-widget-model-name，其中name为你选择的看板娘名字，如npm install live2d-widget-model-tororo，保存后可输入

1 2	hexo clean hexo s

可先在本地网址预览。 EE1D76424C72393EF4D9BAB014A23BB9

Fork me on github

55ADCD23E9555F75A041DE5ED7EC7F70

1 点击这里选择样式。

如这里我选择黑色样式，复制右边原代码：

<a href="https://github.com/you"><img 
width="149" height="149" src="https://
github.blog/wp-content/uploads/2008/12/
forkme_right_darkblue_121621.png?
resize=149%2C149" class="attachment-full 
size-full" alt="Fork me on GitHub" data-
recalc-dims="1"></a>

2 将代码段开头的https://github.com/you换成自己的github链接。

3 找到themes/next/layout/_layout.swig，向里面添加上面所改后的代码段，并放在< div class=”headband”>

的下面。

百度统计

登录百度统计，定位到站点的代码获取页面.
在网站列表中添加博客域名，如图：
在代码获取中复制hm.js?后面那串统计脚本 id。
注：复制的id即为baidu_analytics。
在themes/_config.yaml中找到baidu_analytics。并将获取的id填上。
1
2
# Baidu Analytics ID
baidu_analytics: 65exxxxxxxxxxxxxxxxxxxxxxxxxx895

感谢链接（一些博客很值得订阅）

持续更新～