NexT主题优化

写在前面

自己搭建了Hexo后，自己有强迫症，喜欢瞎搞，把网站搞得好看一点。于是仿照网上的教程做一下修改，并记录过程。有些过程当时并未记录下引用大部分内容参照网上博文修改，自己稍微修改了一点点配置。

之后如果还有修改会不断更新该文章，若有环境差异不符或错误请自行Google~，毕竟探索出真知

我的博客的主题是NexT，一款很简洁很流行的主题，如果实在有问题也可以联系我~

和Hexo环境略有差异，可移步 我的博客 查看本文。

给网页title添加一些搞怪特效

在next\source\js\src文件夹下创建crash_cheat.js，添加代码：

` 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);     } });`

引用

在next\layout\_layout.swig文件中，添加引用（注：在swig末尾添加）：

添加Live2d看板动画

安装相关依赖

npm install live2d-widget-model-z16  #我安装的是z16，一个小萝莉，那就安装z16，可以换

配置

修改hexo主站点下的_config.yml文件，在其中加入如下代码：

配置

# live2d配置宠物
live2d:
  # enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    # live2d-widget-model-wanko 
    use: live2d-widget-model-z16 # 通过修改use来确定使用哪种model
    # Other Models：
    # hibiki 
    # use: live2d-widget-model-hibiki
    # haruto 
    # use: live2d-widget-model-haruto
  display:
    position: right   # 在本博客中我放置于右侧
    width: 150
    height: 300
    hOffset: 80  # 调节水平位置
    vOffset: -50  # 调节垂直位置
  mobile:
    show: false

另外，不同的模型可以根据这个博客查看，可以根据个人喜好自行选择~

上线：

hexo clean && hexo g && hexo d

若报错：

live2d tag detected, but won't be use. Make sure 'tagMode' config is expected. See #36, #122

参考 Github 的Issues：

如果您想使用最近的注入模式(将会在每个页面上显示):
请从 layout/layout.ejs 或 layout/_layout.swig 中删掉 前的 {{ live2d() }} 或 <%- live2d() %>.

如果您想使用旧的标签模式(仅替换 live2d 标签):
请保留{{ live2d() }} 或 <%- live2d() %>, 并将 tagMode 设置为 true.

Next主题添加鼠标心形点击特效

1、在next\source\js\目录下新建love.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

2.在next\layout\_layout.swig文件的最下方，前面添加

Hexo Next背景动画Canvas_nest

Canvas是给博客空白处添加动画的模块，添加方法如下：

1. 打开Git进入自己文件夹下/themes/next文件夹下

cd themes/next  
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

2. 进入 thems/next/_config.yml文件下修改 canvas_nest: true(注意: 冒号后面要空格)

3. 将修改部署到线上

hexo clean && hexo d -g

侧边栏页面圆角

侧边栏默认是矩形的，可能有一些朋友不是特别喜欢这种尖锐的四角，希望可以稍稍弄的平滑一点，下面我们来具体实现它。

1. 检查自己使用的是NexT主题下具体哪个布局，在themes/next/_config.yml中查找自己的scheme使用的是哪一个，我的是Pisces

2. 打开themes/next/source/css/_variables/Pisces.styl文件，里面定义了一些常量，用来定义blog样式表的值。

3. 然后，找到$border-radius

   // Borders
   // --------------------------------------------------
   $box-shadow-inner                 = initial;
   $box-shadow                       = initial;
   
   $border-radius-inner              = initial;
   $border-radius                    = initial;
   

   修改$border-radius中的initial为16px

   同样的，修改 themes/next/source/css/_schemes/Pisces/_layout.styl文件，修改两处border-radius：

   .header-inner {
     position: absolute;
     top: 0;
     overflow: hidden;
     padding: 0;
     width: $sidebar-desktop;
     background: white;
     box-shadow: $box-shadow-inner;
   - border-radius: $border-radius-inner;
   + border-radius: $border-radius;//修改上面的侧边栏的弧度
    
    ///.......
    .content-wrap {
     float: right;
     box-sizing: border-box;
     padding: $content-desktop-padding;
     width: $content-desktop;
     background: white;
     min-height: 700px;
     box-shadow: $box-shadow-inner;
   - border-radius: $border-radius-inner;
   + border-radius: $border-radius; //修改整个文章页面的弧度
   

主页面优化

文章背景出现阴影边框

这个效果实现起来很简单，打开blog\themes\next\source\css\_custom\custom.styl文件，放入以下代码：

// 主页文章添加阴影效果
 .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);
  }

文章结尾提示 “本文结束”

在文件夹\themes\next\layout\_macro中新建passage-end-tag.swig文件，并在文件中增加以下代码

    {% if not is_index %}
        
-------------The End-------------
    {% endif %}

接着打开\themes\next\layout\_macro\post.swig文件，在这个地方增加如下代码：

即添加+后面的代码进去

 {#####################}
 {### END POST BODY ###}
 {#####################}

+ 

+  {% if not is_index %}
+    {% include 'passage-end-tag.swig' %}
+  {% endif %}
+ 

 {% if theme.wechat_subscriber.enabled and not is_index %}
   

     {% include 'wechat-subscriber.swig' %}
   
 {% endif %}

最后打开主题配置文件，在文件的最后增加如下代码：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

侧边栏推荐阅读

在博客根目录下打开配置文件，找到# Blog rolls,修改至如下代码样式：

# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
  Python Cookbook: https://python3-cookbook.readthedocs.io/zh_CN/latest/index.html#
  过往记忆: https://www.iteblog.com/
  Talking Machine: http://www.thetalkingmachines.com/

添加运行时间

• 在next/layout/_custom/sidebar.swig文件中先添加：

• 接着在next/layout/_macro/sidebar.swig文件中修改：

{# Blogroll #}
{% if theme.links %}
  

    

      
-    {{ theme.links_title }}
+    {{ theme.links_title }} 
+     
    
    

-     {% for name, link in theme.links %}
-       

-         {{ name }}
+     {% for blogrollText, blogrollURL in theme.links %}
+       

+         {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
        
      {% endfor %}
    
     {% include '../_custom/sidebar.swig' %}
  
 {% endif %}

这里并没有修改颜色，如果修改颜色的话，在/next/source/css/_custom/custom.styl加入如下的语句：

// 自定义的侧栏时间样式
#days {
   display: block;
   color: rgb(7, 179, 155);  //自定义
   font-size: 13px;
   margin-top: 15px;
}

修改博客字体

在 Google Fonts 上找到心仪的字体，然后在主题配置文件中为不同的应用场景配置字体：

themes\next\_config.yml修改为：

font:
  enable: true

  # 外链字体库地址，例如 //fonts.googleapis.com (默认值)
  host:

  # 全局字体，应用在 body 元素上
  global:
    external: true
    family: Monda

  # 标题字体 (h1, h2, h3, h4, h5, h6)
  headings:
    external: true
    family: Roboto Slab

  # 文章字体
  posts:
    external: true
    family:

  # Logo 字体
  logo:
    external: true
    family:

  # 代码字体，应用于 code 以及代码块
  codes:
    external: true
    family:

为标签添加图标

默认情况下标签前缀是 # 字符，用户可以通过修改主题源码将标签的字符前缀改为图标前缀

在文章布局模板中找到文末标签相关代码段，搜索rel="tag"，修改该行代码，我的修改为：

- {{ tag_indicate }} {{ tag.name }}
+  {{ tag.name }}

点击头像回到主页

修改文件在头像部分添加链接：

个性化回到顶部

根据DIYgod 的博客和Yearito的博客学习而来，原理很简单，将 back-to-top 按钮添加图片背景，并添加 CSS3 动效即可（实际上我并不懂）。

首先，找到自己喜欢的图片素材放到 source\images\ 目录下。我下载的是Yearito的博客下的小猫上吊素材：点击下载

然后在自定义样式文件中添加如下代码：

themes\next\source\css\_custom\custom.styl

//自定义回到顶部样式
.back-to-top {
  right: 60px;
  width: 70px;  //图片素材宽度
  height: 900px;  //图片素材高度
  top: -900px;
  bottom: unset;
  transition: all .5s ease-in-out;
  background: url("/images/scroll.png");

  //隐藏箭头图标
  > i {
    display: none;
  }

  &.back-to-top-on {
    bottom: unset;
    top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 200px ) : 0px;
  }
}

修正文末导航跳转逻辑

参考 reuixiy | 打造个性超赞博客 Hexo+NexT+GitHubPages 的超深度优化 #5.2,我们发现文章底部的左侧 / 右侧箭头分别导航到更旧 / 更新的文章链接，这不符合常理，我们对此进行修改：

themes\next\layout\_macro\post.swig

[diff] [themes\next\layout\_macro\post.swig]
{% if not is_index and (post.prev or post.next) %}
  

    

-      {% if post.next %}
+      {% if post.prev %}
-        
+        
-           {{ post.next.title }}
+           {{ post.prev.title }}
        
      {% endif %}
    

    

    

-      {% if post.prev %}
+      {% if post.next %}
-        
+        
-          {{ post.prev.title }} 
+          {{ post.next.title }} 
        
      {% endif %}
    
  
{% endif %}

为主题添加背景

upflash提供了大量的图片和外链API，可以用来当作自己的博客背景，首先我们需要修改css样式文件。

body {
    background:url(https://source.unsplash.com/random/1920x1080);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

其中文中的url调用了upflash的AP接口，每次访问生成一个1920*1080的图片，当然你可以换成固定的图片文件链接，这个时候已经设置好背景了，但是我们发现整个文章内容部分也会被背景所充斥，造成主题部分图片很亮，我们需要设置一下，不同的样式设置方法不通，我的是NexT主题下的Pisces样式，我们首先去更改文章主体部分的透明度。

未更改之前，文章主体部分的不透明度是0.7，我们需要改的高一些。修改文件：

.content-wrap {
  float: right;
  box-sizing: border-box;
  padding: $content-desktop-padding;
  width: $content-wrap;
  background: rgba(255,255,255,0.85); //0.85是透明度;

这样就完成了背景的修改

利用GULP压缩代码

首先任意目录安装：

npm install [email protected] -g

然后到站点根目录安装：

npm install [email protected] gulp-minify-css gulp-htmlmin gulp-htmlclean --save

接着在站点文件夹根目录新建 gulpfile.js：

// 文件位置：~/blog/gulpfile.js

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'))
});
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true
    }))
    .pipe(gulp.dest('./public'))
});
gulp.task('default', ['minify-html', 'minify-css']);

最后部署到 GitHub Pages 上查看效果：

hexo clean && hexo g && gulp && hexo d

Hexo添加音乐模块

使用Aplayer来为自己的博客添加音乐模块，参考博客Yann

首先了解Aplayer，aplayer是一个非常漂亮好用的HTML5音乐播放器，安装方式为：

npm install aplayer --save

然后在/hexo/themes/next/source/dist文件夹下创建music文件，将下列代码写进去：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: false,
    loop: 'all',
    volume: 0.7,
    listFolded: true,
    listMaxHeight: 60,
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
        }
    ]
});

参数修改

上面代码为你在hexo上生成aplayer播放器的样式，参数修改参考官方中文文档，可以参照中文文档修改更多有意思的东西。

将播放器放在合适的位置

上面操作完成后，aplayer的样式就已经设置好了。现在要做的就是把aplayer放在自己想要放置的位置上，放置代码如下：

代码的第一行
是添加一个空行用的，你也可以不添加，我的播放器添加在侧边栏，为了使得协调故而添加了一个空行。
不同的代码放在不同的/hexo/themes/next/layout/***.swig会有不同的展示效果，我的放在了/hexo/themes/next/layout/_marco/sidebar.swig文件中以修改侧边栏显示，具体放置方式为：
在sidebar.swig找到if theme.links,将代码添加在endif之后，具体为：

{% endif %}

在代码不同的endif后添加会将播放器放在不同的位置。

Hexo模板

# ！！！！！！！！！！
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# ！！！！！！！！！！

title:
# 文章标题，可以为中文

date:
# 建立日期，如果自己手动添加，请按固定格式
# 就算不写，页面每篇文章顶部的发表于……也能显示
# 只要在主题配置文件中，配置了 created_at 就行
# 那为什么还要自己加上？
# 自定义文章发布的时间

updated:
# 更新日期，其它与上面的建立日期类似
# 不过在页面每篇文章顶部，是更新于……
# 在主题配置文件中，是 updated_at

permalink:
# 若站点配置文件下的 permalink 配置了 title
# 则可以替换文章 URL 里面的 title（文章标题）

categories:
# 分类，支持多级，比如：
# - technology
# - computer
# - computer-aided-art
# 则为 technology/computer/computer-aided-art
# （不适用于 layout: page）

tags:
# 标签
# 多个可以这样写 [标签1,标签2,标签3]
# （不适用于 layout: page）

description:
# 文章的描述，在每篇文章标题下方显示
# 并且作为网页的 description 元数据
# 如果不写，则自动取 
# 之前的文字作为网页的 description 元数据

keywords:
# 关键字，并且作为网页的 keywords 元数据
# 如果不写，则自动取 tags 里的项
# 作为网页的 keywords 元数据

comments:
# 是否开启评论
# 默认值是 true
# 要关闭写 false

layout:
# 页面布局，默认值是 post，默认值可以在
# 站点配置文件中修改 default_layout
# 另：404 页面可能用到，将其值改为 false

type:
# categories，目录页面
# tags，标签页面
# picture，用来生成 group-pictures
# quote？
# https://io-oi.me/tech/test/

photos:
# Gallery support，用来支持画廊╱相册，用法如下：
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/test/

link:
# 文章的外部链接
# https://io-oi.me/tech/test/

image:
# 自定义的文章摘要图片，只在页面展示，文章内消失
# 此项只有参考本文 5.14 节配置好，否则请勿添加！

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好，否则请勿添加！

password:
# 文章密码，此项只有参考教程：
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节，配置好，否则请勿添加！
# 发现还是有 bug 的，就是右键在新标签中打开
# 然后无论是否输入密码，都能看到内容

参考链接：

hexo-添加Live2d看板动画 （添加宠物）- yaliya 主题 一个小坑

Next主题添加鼠标心形点击特效

Hexo Next背景动画Canvas_nest: true设置无效的解决方案

Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效

Hexo NexT主题内加入动态背景

hexo next主题优化，打造个人精致网站

Hexo 搭建个人博客系列：主题美化篇