Hexo-NexT安装和优化教程(持续更新~)

23B9AA6A418DCB5006CBD74DFF25F421

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

前排提醒

  1. 为了主题设置更加简便,推荐使用VS Code进行主题代码的更新
    D4484F077F74851714C77256315B4E52

  2. 同时 Mac 终端输入sudo su进入root用户, Windows 管理员打开cmd进入root用户

  3. 修改/添加代码记得: 后面留一个空格,否则无法生效。
    正确留白:4C33BED0CA743EED5E6211F4212F8BAA
    错误:7BF2564E8673EEF07BEED210D8E41122


_config.yaml文件官方说明

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

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


安装NexT主题

  1. 首先进入你的博客目录,如我的博客目录(blog)地址为
    /Users/breidincasimi/blog
    cd your-hexo-site

  2. 再输入
    git clone https://github.com/iissnan/hexo-theme-next themes/next

  3. 完成后,打开 站点配置文件_config.yaml, 找到 theme 字段,并将其值更改为 next。
    theme: next

  4. 验证主题
    输入hexo s后可在浏览器访问http://localhost:4000查看效果。


Schemes三种主题

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

Muse3BA57E248A421E59361C8C2D0C263CFA
Mist:0C7D718E8FBEC487C5BB47F715A78DD5
Pisces(本人博客采用):
718459A3D0A80A1588B875AF79EE6C6A

1
2
3
4
Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces

社交链接

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

1
2
3
4
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填入友情链接。

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

打赏

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

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

Valine评论(推荐)

  1. 注册LeanCloud并创建应用,名字可随便,选择开发版。0C2812C370D9153460B870CED18B23A9

  2. 点击安全中心,在服务开关中,只打开数据储存。B8123F27BBBCCD88D658D9BA1F52D9B5

  3. 在Web 安全域名中填入域名225DF69E2B0FD0701955CF0FB8819EA8

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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

  5. 配置CDN
    点击https://www.jsdelivr.com/package/npm/valine获取最新的cdn地址:5D97DAD67D66AFD7B8E05414131F126E
    后在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

  6. 此时可以hexo s临时查看Valine是否成功出现!D6B0954174028F2BFE3C16C39873860


动态背景

进入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中添加代码:

1
2
3
4
5
6
7
8
9
10
.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中添加如下代码:

1
2
3
4
5
6
7
8
9
// 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样式内容全部替换为代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.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。并添加代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
!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,并添加代码:

1
2
3
4
5
<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中添加代码:

1
2
3
4
5
<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的!)添加代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 点击这里选择样式。

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

1
2
3
4
5
6
7
<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”>的下面


百度统计

  1. 登录百度统计, 定位到站点的代码获取页面.

  2. 在网站列表中添加博客域名,如图:AA391DEF5486EF7606E9C4904ED05D

  3. 在代码获取中复制hm.js?后面那串统计脚本 id。
    注:复制的id即为baidu_analytics
    A619BCAD8675AACD1563EE70757302A3

  4. themes/_config.yaml中找到baidu_analytics。并将获取的id填上。

    1
    2
    # Baidu Analytics ID
    baidu_analytics: 65exxxxxxxxxxxxxxxxxxxxxxxxxx895

感谢链接(一些博客很值得订阅)

  1. http://theme-next.iissnan.com/getting-started.html
  2. https://www.simon96.online/2018/10/12/hexo-tutorial/
  3. http://www.dragonbaby308.com/hexo-theme-next/
  4. https://www.cnblogs.com/php-linux/p/8416122.html
  5. https://www.jianshu.com/p/b20fc983005f
  6. https://blog.csdn.net/jiunian_2761/article/details/97388997#3_Hexo_Next_32
  7. https://blog.csdn.net/qq_33699981/article/details/60330891
  8. http://sunhome.online/2019/02/01/Valine评论头像以及显示失败处理方法/#more

持续更新~
http://img.tukexw.com/img/485cfceef046659e.jpg

有趣的话给我一瓶肥宅快乐水吧~