hexo配置NexT主题
前言
这篇文章就不介绍如何去搭建hexo了
只说如何配置hexo的NexT主题
开发环境：macOS
hexo：v3.8.0
NexT：v6.6.0
更换主题
克隆主题
cd到你的hexo文件下面，输入下面命令克隆NexT皮肤代码到本地
1 | git clone https://github.com/theme-next/hexo-theme-next themes/next |
切换主题
打开站点配置文件 _config.yml
查找theme:
将其后面的参数改为
next后保存
更新主题
1 | # 切换到NexT主题目录下 |
配置网站Favicon图标
效果图
打开
themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找favicon:
将其下面的几位属性的参数改为你图片的路径
⚠️静态文件放到themes/next/source/下面对应的文件夹下
更换底部icon图标
效果图
打开
themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找icon:
更换name的值为你想要的图标图标库地址
💡可将animated的值改为true，让图标有变大变小效果
💡更换color的值可以修改图标的样式
隐藏底部Powered by Hexo及主题版本信息
打开
themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
Powered by Hexo
查找powered:将其下面的enable的值改为false
主题版本信息
查找theme:将其下面的enable的值改为false
添加备案号
打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找beian: 将其下面的
enable的值改为trueicp的值改为你的备案号
更换NexT风格
打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找scheme: 将其下面的
注释去掉，更换一款适合你的
添加头像
打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找avatar: 将其下面的
url: /images/author-img.jpg # 头像的地址rounded: true # 是否圆形显示opacity: 1 # 透明度rotated: true # 鼠标移入移出头像时，头像是否旋转
实现fork me on github
效果图
打开
themes/next/layout/_layout.swig文件
将刚刚复制的代码放到<div class="headband"></div>下面
并且将href改为你自己的地址
实现动态背景
效果图
打开终端
2
3
4
cd themes/next
git clone <https://github.com/theme-next/theme-next-canvas-nest> source/lib/canvas-nest
打开
next/layout/_layout.swig
查找canvas_nest:
将下面的enable的值改为true
💡背景样式可通过更改修改canvas_nest下的其他属性进行配置
实现点击红心效果
效果图
在
next/source/js/新建文件love.js，代码如下
1 |
|
在
themes/next/_config.yml末尾添加以下代码
1 |
|
在
next/layout/_layout.swig的</body>前面添加以下代码
1 |
|
实现点击大爆炸效果
效果图
在
next/source/js/新建文件fireworks.js，代码如下
1 |
|
在
themes/next/_config.yml末尾添加以下代码
1 |
|
在
next/layout/_layout.swig的</body>前面添加以下代码
1 |
|
实现顶部加载进度条
效果图
打开终端
2
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
打开
next/layout/_layout.swig
查找pace:
将它的的值改为true
💡进度条样式可通过更改修改pace_theme的值去更换你自己喜欢的，默认是pace-theme-minimal
- 进度条样式列表:
pace-theme-big-counter
pace-theme-bounce
pace-theme-barber-shop
pace-theme-center-atom
pace-theme-center-circle
pace-theme-center-radar
pace-theme-center-simple
pace-theme-corner-indicator
pace-theme-fill-left
pace-theme-flash
pace-theme-loading-bar
pace-theme-mac-osx
pace-theme-minimal
添加搜索功能
打开终端，执行以下命令
npm install hexo-generator-searchdb --save
打开themes/next/_config.yml
查找local_search:
将它下面的属性enable的的值改为true
在网站底部添加访问量
打开
next/layout/_layout.swig
查找busuanzi_count:
将它下面的属性enable的的值改为true
💡可通过修改busuanzi_count下面的几个属性控制它们显示隐藏及前面icon的样式
💡icon的样式链接https://fontawesome.com/v4.7.0/icons
设置首页不显示全文
打开
themes/next/_config.yml
查找auto_excerpt:
将它下面的属性enable的的值改为true
💡这会让首页的文章多一个阅读全文的按钮
💡可通过修改length的值去更改首页文章显示的字数长度
添加站点/文章字数统计
效果图
打开终端，执行以下命令
npm install hexo-symbols-count-time --save
打开站点配置文件，添加下面的代码
1 | # Post wordcount display settings |
⚠️假如没法出现效果可尝试执行以下命令
1 | cd themes/next |
添加侧边栏社交联系方式
效果图
打开
themes/next/_config.yml文件
查找soical:
将相应注释去掉，并将对应的值改为你的社交链接
添加侧边栏推荐阅读
效果图
打开
themes/next/_config.yml文件
查找links_title:
按下面进行修改
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 图标
links_icon: link
# 标题
links_title: 推荐阅读
# 显示方式
# links_layout: block
links_layout: inline
# 链接
# 格式为【名称: 链接】
links:
掘金: <http://juejin.im>
张鑫旭: <https://www.zhangxinxu.com/>
慕课网: <http://imooc.com>
添加萌妹
效果图
打开终端，输入下面代码安装依赖
输入下面代码安装模型
2
3
npm install --save live2d-widget-model-shizuku
在
站点配置文件末文件末添加下面代码，重启hexo s
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: true
💡可通过修改use的值来更换模型，预览地址https://huaji8.top/post/live2d-plugin-2.0/
⚠️更换模型前记得调用npm install --save live2d-widget-model-模型名字后，再重启hexo s
daoVoice在线聊天
效果图
注册daoVoice账号，地址daoVoice，邀请码
5058b43a
创建完后会跳转到以下页面，公司名称随便填写即可
复制下面的app-id
打开
next/layout/_partials/head.swig
在<meta name="theme-color" content="{{ theme.android_chrome_color }}">后添加下面代码
2
3
4
5
6
7
8
9
10
11
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName[o](0);a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}
在
themes/next/_config.yml文件末添加下面代码
2
3
daovoice: true
daovoice_app_id: 5058b43a
重启
hexo s
添加文章评论功能
效果图
注册来必力账号
注册地址：http://www.laibili.com.cn/
生成来uid，生成地址(https://www.livere.com/insight/myCode)[//www.livere.com/insight/myCode]
打开
themes/next/_config.yml文件
查找livere_uid
将它的值改为你的uid
重启
文章末添加“本文结束标记”
效果图
在
next/layout/_macro/下新建passage-end-tag.swig文件，代码如下
1 | <div style="text-align:center;color: #ccc;font-size:14px;">----------- 本文结束<i class="fa fa-paw"></i>感谢您的阅读 -----------</div> |
打开
next/layout/_macro/post.swig文件，在代码
1 | {#####################} |
之后添加以下代码
1 | {% if not is_index %} |
文末添加版权信息
效果图
在
next/layout/_macro/下创建my-copyright.swig文件，代码如下
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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功！"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="//creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
打开
next/layout/_macro/post.swig文件，在代码
1 | {% if theme.wechat_subscriber.enabled and not is_index %} |
之前添加以下代码
1 | {% if not is_index %} |
在
next/source/css/_common/components/post下创建my-copyright.styl文件，代码如下
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
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功！"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="//creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
打开
next/source/csss/_common/components/post/post.styl文件，在文件末添加下面代码
1 | @import "my-post-copyright" |
在需要增加版权信息的博文中添加
copyright: true即可
💡如果嫌每个markdown生成后都需要手动添加，十分麻烦的话。
💡可以打开/scaffolds/post.md，添加：
💡这样在你hexo new xxx的时候就会自动给新增的markdown添加copyright: true
文章末添加打赏功能
效果图
打开
themes/next/_config.yml
查找reward:
将下面的enable的值改为true
并把你需要用到的打赏方式注释去掉，将图片路径更改为你的二维码图片路径
会发现打赏字体会出现闪动问题
打开next/source/css/_common/components/post/post-reward.styl将下面代码注释即可
1 | /* |
博客代码压缩
在博客根目输入下面代码
2
3
4
npm install `gulp -g`
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save在博客根目录下创建
gulpfile.js文件，并添加以下代码
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
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
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'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);
执行
hexo g && gulp，这样就会在打包博客代码后将代码压缩
假如你是新版的gulp需要将gulpfile.js文件的代码改为如下。
1 | const {src, dest, parallel} = require('gulp'); |
- 参考文章
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 墨陌默！
相关推荐
2018-11-30
从零开始，搭建ss服务器
前言这里选的是vultr的服务器当然如果你有信用卡的话可以考虑注册使用google clound 免费使用一年最近vultr的东京跟新加坡服务器被墙了，会出现可以ping上但是ssh连接超时的问题，可以考虑去使用其它地方的节点（2018-12-13）⚠️部分地方修改过，导致图片跟文字不一致，一切以文字为准。不懂欢迎留言咨询。 购买VPS服务器 vultr的优势 操作简单 扣费方式：按时付费 便宜：最便宜的只要$2.5/M，支持支付宝、微信。相较于阿里的服务器，一个esc服务器¥47/M，还是有一定的优势 vultr的劣势 最低一次性充值$10 账号注册地址：vultr注册步骤就不说了 充值 创建服务器点击右上角的➕号图标 进入创建服务器页面 选择地区这里推荐选择日本(Tokyo Japan)或者新加波(Singapore Singapore)，速度更快。 选择服务器及配置系统选择：我选择的是CentOS...
2025-05-28
处理hexo的leancloud失效
博客好久没理了，只是做了简单的续费。现在发现访客量什么的全都挂了 全部leancloud的接口都401没权限。但是我一直都没动过leancloud的配置，所以应该是leancloud那边的改动导致的。 登上leancloud发现原来是leancloud改了接口，需要改成新版才行。 但是有个问题，如果下一次再出现这种情况，我该怎么办？ 看了下leancloud的文档，发现绑定自己的域名，就不会显现接口地址访问不了的问题。 现在看下怎么配置成自己的域名。 打开设置-域名绑定菜单 点击绑定新域名（我这里是绑定过所以显示这个名字，你们可能差不多） 输入你的域名，然后点击绑定（高级配置默认的挺好的我就不改了） 绑定后需要去你的域名服务商那里添加一条CNAME记录，指向leancloud给你的那个地址（配置完CNAME后，等待十几分钟，再去leancloud刷新下页面就ok了） leancloud那边配置好后，再去hexo的_config.fluid.yml文件里修改下leancloud的域名（这里的yml是你对应主题的配置文件）
2025-06-09
git.remote学习 && hexo主题管理
前言最近把主题换成了hexo-butterfly，顺便把之前的文章迁移过来了。打算对这个主题做一些优化。但是优化后又要提交到git上，以便从其他电脑进行管理。然后如果hexo-butterfly的主题更新，我又要升级的话该怎么办。搜了下，发现git remote这个命令可以解决我的问题。 拉取最新的主题代码 我这里在github上面建了个仓库，模拟了下主题的更新。仓库地址 进入自己的hexo代码文件夹 执行git clone -b main git@github.com:oytoyt/theme-online.git themes/test模拟拉取最新的主题代码 进入到themes/test文件夹，执行git remote -v查看远程仓库地址。 123❯ git remote -vorigin git@github.com:oytoyt/theme-online.git (fetch)origin git@github.com:oytoyt/theme-online.git (push) 修改远程仓库地址 将原来的仓库地址改为upstream，执行git...
2025-06-16
从零开始部署博客到阿里云的服务器
购买阿里云的服务器登录到服务器上ssh root@你的服务器ip安装nginx 更新本地软件包索引:sudo apt update 安装nginx: sudo apt install -y nginx 安装https（如果不需要就不用走这一步） apt-get install python-software-properties apt-get install software-properties-common sudo add-apt-repository ppa:certbot/certbot sudo apt-get update sudo apt-get install -y certbot python3-certbot-nginx 生成证书 停掉nginx:service nginx stop 生成对应域名的证书:certbot certonly --standalone -d...
2025-06-10
本地环境关闭butterfy谷歌分析等数据分析
前言由于只是个小博客，没什么人看。数据都是自己本地贡献不太好。所以打算本地跑博客的时候关闭谷歌分析等数据分析。 修改命令1234"scripts": { "dev": "hexo server --env development", "build": "hexo generate --env production"} 这里--env development和--env production 就是用来区分开发环境和生产环境。 修改主题代码 进入到下面文件中themes/butterfly/layout/includes/head/analytics.pug 在顶部添加下面代码if env.args.env === 'production' 对除了添加代码进行缩进 修改后的代码如下 1234567891011121314151617181920212223242526272829303132333435if env.args.env...
2018-12-06
hexo开启tags
当开启了tags，打开页面http://localhost:4000/tags/报以下错误 1Cannot GET /tags/ 解决办法输入hexo new page tags命令，新建tags文件打开source/tags/index.md文件，添加type: tags代码 在你需要添加tags标记的markdown文件中添加tags: xxx 💡其它配置同理💡一篇markdown需要添加多个tags写成这样tags: [tags1, tags2]
评论