记录一些自己用到的个性化设置
3D动态背景
3D鼠标
实现效果图
具体实现方法
打开主题配置文件_config.yml，查找canvas_nest，设为true1
2
3
4
5...
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true
...
3D线条
实现效果图
具体实现方法
安装模块到~/blog/themes/next/source/lib1
$ git clone https://github.com/theme-next/theme-next-three source/lib/three
打开主题配置文件_config.yml，查找canvas_lines，设为true1
2
3
4
5
6
7
8
9
10...
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false
...
修改文章底部的标签图标
实现效果图
具体实现方法
修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>
在每篇文章末尾统一添加“本文结束”标记
实现效果图
具体实现方法
在路径 /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>
接着打开/themes/next/layout/_macro/post.swig文件，在post-body 之后， post-footer 之前，添加如下代码（post-footer之前两个DIV）：1
2
3
4
5<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件_config.yml在末尾添加：1
2
3# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
点击侧栏头像回到博客首页
首先要在主题配置文件中配置好，比如我把头像avatar.gif放在~/blog/source/uploads/下，则：1
2
3
4# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: /uploads/avatar.gif
然后编辑文件sidebar.swig
1 | + <a href="/"> |
设置页面显示数目
1 | # Home page setting |
gulp 压缩代码
首先安装插件：1
$ npm install gulp -g
然后到站点文件夹根目录：1
$ npm install gulp gulp-minify-css gulp-htmlmin gulp-htmlclean --save
接着在站点文件夹根目录新建 gulpfile.js：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
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 命令时执行的任务
gulp.task('default', ['minify-html', 'minify-css']);
最后部署到 Github Pages 上查看效果：1
2
3
4hexo clean
hexo g
gulp
hexo d
修改(代码)字体大小
打开~/blog/themes/next/source/css/_variables/base.styl文件，如下修改：1
2
3
4
5...
$font-size-base = 15px
...
$code-font-size = 12px
...
设置动态 title
在 /themes/next/source/js/src 目录下新建 dytitle.js 。添加以下内容：
1 | <!--崩溃欺骗--> |
更改 /themes/next/layout/_layout.swig 。在 </body>之前添加：
1 | <!--卖萌--> |
添加音乐&视频
用到两个插件:
- hexo-tag-aplayer
- hexo-tag-dplayer
音乐
首先在站点文件夹根目录安装插件：1
npm install hexo-tag-aplayer --save
官方文档
一般文章中的写法：1
{% aplayer "XXX" "XXX" "https://XXX.mp3" "https://XXX.jpg" "lrc:https://XX.lrc" %}
歌单书写方式:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23{% aplayerlist %}
{
"autoplay": false,
"showlrc": 3,
"mutex": true,
"music": [
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://XXX.mp3",
"pic": "https://XXX.jpg",
"lrc": "https://XXX.lrc"
},
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://XXX.mp3",
"pic": "https://XXX.jpg",
"lrc": "https://XXX.lrc"
}
]
}
{% endaplayerlist %}
视频
首先在站点文件夹根目录安装插件：1
npm install hexo-tag-dplayer --save
官方文档
一般文章中的写法：1
2
3
4
5{% dplayer
"url=https://XXX.mp4"
"pic=https://XXX.jpg"
"api=https://api.prprpr.me/dplayer/"
"id=" "loop=false" %}
配置 Sitemap
Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是XML 文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。
1 | $ npm install hexo-generator-sitemap --save |
配置到站点配置文件:1
2
3sitemap:
path: sitemap.xml
#path 表示 Sitemap 的路径. 默认为 sitemap.xml.
对于国内用户还需要安装:1
$ npm install hexo-generator-baidu-sitemap --save
配置到站点配置文件:1
2baidusitemap:
path: baidusitemap.xml
本地搜索
在站点的根目录下执行以下命令：1
$ npm install hexo-generator-searchdb --save
编辑站点配置文件，新增以下内容到任意位置
1 | search: |
编辑主题配置文件，启用本地搜索功能：
1 | local_search: |
更改标签云（tagcloud）的颜色
如果你和我一样个性化了博客的整体布局颜色，那么默认的标签云页面可能看起来很丑，怎么更改？
修改下文件：1
{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}
Next主题 6.0+ 新配置设置
侧栏头像设置
1 | # Sidebar Avatar |
代码块圆角+复制按钮
1 | codeblock: |
博文字数统计
Next V6 下使用 hexo-symbols-count-time 进行替代。1
$ npm install hexo-symbols-count-time --save
- 在站点配置文件中开启：
1 | symbols_count_time: |
- 然后在主题配置文件中开启：
1 | # Post wordcount display settings |
我的自定义 custom.styl
1 | // Custom styles. |