写在前面
自己搭建了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末尾添加）：
<!--崩溃欺骗--><script type="text/javascript" src="/js/src/crash_cheat.js"></script>
添加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<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);
2.在next\layout\_layout.swig文件的最下方，</body>前面添加<script type="text/javascript" src="/js/love.js"></script>
Hexo Next背景动画Canvas_nest
Canvas是给博客空白处添加动画的模块，添加方法如下：
- 打开Git进入自己文件夹下
/themes/next文件夹下
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
进入
thems/next/_config.yml文件下修改canvas_nest: true(注意: 冒号后面要空格)将修改部署到线上
hexo clean && hexo d -g
侧边栏页面圆角
侧边栏默认是矩形的，可能有一些朋友不是特别喜欢这种尖锐的四角，希望可以稍稍弄的平滑一点，下面我们来具体实现它。
检查自己使用的是NexT主题下具体哪个布局，在
themes/next/_config.yml中查找自己的scheme使用的是哪一个，我的是Pisces打开
themes/next/source/css/_variables/Pisces.styl文件，里面定义了一些常量，用来定义blog样式表的值。-
然后，找到
$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文件，并在文件中增加以下代码
<div>
{% if not is_index %}
<div style="text-align:center;color: #555;font-size:14px;">-------------The End-------------</div>
{% endif %}
</div>
接着打开\themes\next\layout\_macro\post.swig文件，在这个地方增加如下代码：
即添加+后面的代码进去
{#####################}
{### END POST BODY ###}
{#####################}
+ <div>
+ {% if not is_index %}
+ {% include 'passage-end-tag.swig' %}
+ {% endif %}
+ </div>
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% 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文件中先添加：
<div id="days"></div>
</script>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("04/15/2019 17:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>
- 接着在next/layout/_macro/sidebar.swig文件中修改：
{# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
- {{ theme.links_title }}
+ {{ theme.links_title }}
+ <i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
- {% for name, link in theme.links %}
- <li class="links-of-blogroll-item">
- <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
+ {% for blogrollText, blogrollURL in theme.links %}
+ <li class="links-of-blogroll-item">
+ {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
</li>
{% endfor %}
</ul>
{% include '../_custom/sidebar.swig' %}
</div>
{% 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"，修改该行代码，我的修改为：
- <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
+ <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tags"></i> {{ tag.name }}</a>
点击头像回到主页
修改文件在头像部分添加链接：
<a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
alt="{{ author }}" />
</a>
个性化回到顶部
根据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) %}
<div class="post-nav">
<div class="post-nav-next post-nav-item">
- {% if post.next %}
+ {% if post.prev %}
- <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+ <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
- <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+ <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
</a>
{% endif %}
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
- {% if post.prev %}
+ {% if post.next %}
- <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+ <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
- {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+ {{ post.next.title }} <i class="fa fa-chevron-right"></i>
</a>
{% endif %}
</div>
</div>
{% 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 gulp@3.9.1 -g
然后到站点根目录安装：
npm install gulp@3.9.1 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放在自己想要放置的位置上，放置代码如下：
<br>
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
代码的第一行<br>是添加一个空行用的，你也可以不添加，我的播放器添加在侧边栏，为了使得协调故而添加了一个空行。
不同的代码放在不同的/hexo/themes/next/layout/***.swig会有不同的展示效果，我的放在了/hexo/themes/next/layout/_marco/sidebar.swig文件中以修改侧边栏显示，具体放置方式为：
在sidebar.swig找到if theme.links,将代码添加在endif之后，具体为：
{% endif %}
<br>
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
在代码不同的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 元数据
# 如果不写，则自动取 <!-- more -->
# 之前的文字作为网页的 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 主题 一个小坑
