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

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找到。设置如下:

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评论(推荐)

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

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

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

  4. 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

  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>之前添加代码。

{% if theme.canvas_nest %}

{% endif %}

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

# 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。

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

文章结束标记

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

<div>
    {% if not is_index %}
        
-------------本文结束感谢阅读-------------
{% 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末尾添加代码:

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,保存后可输入

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”>的下面


百度统计

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

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

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

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

    # 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


 上一篇
笔记《JAVA语言程序设计与数据结构(基础篇)》部分习题解答 笔记《JAVA语言程序设计与数据结构(基础篇)》部分习题解答
本书课后习题多而精,故选取有代表意义的习题,由此记录每道题学到的知识。纯新手向,从中学到的知识有简单有新奇。 第十三章 抽象类和接口*13.17import java.util.Scanner; /** * \* Program:
2019-08-18
下一篇 
首篇:建立博客有感及未来发展 首篇:建立博客有感及未来发展
My heart’s been borrowed.And yours has been blue.All’s well that ends well.To end up with you. 本片目录 前言 博客意义 所需工具
2019-08-01
  目录