前言
我这篇文章主要是讲解以next主题的各项具体设置,让自己的博客更加美化。(网上有很多关于Next主题的配置方法,我主要是把网上找到的各个设置做个汇总吧)
NexT是一款简洁优雅且易于使用的主题,配置比较简单,只需要稍微修改配置文件即可,功能也比较全,分类、归档、标签显示明了,让人一看就知道干嘛的。
设置侧边栏设置圆形可旋转头像
设置效果:
设置方法:
找到生成的Hexo目录themes/next/source/css_common/components/sidebar
下的sidebar-author.styl
,将里面的css样式内容全部替换为:
1 | .site-author-image { |
添加动态背景
设置效果:
设置方法:
打开生成的Hexo目录themes/next/layout/_layout.swig
文件,
在</body>
上面添加代码(注意不要放在</head>
的后面)
1 | {% if theme.canvas_nest %} |
配置项说明color :线条颜色, 默认: '0,0,0';三个数字分别为(R,G,B)
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
然后打开主题配置文件,修改canvas_nest
为true
1 | canvas_nest: true |
点击出现桃心效果
设置效果:
设置方法:
在网址输入如下
http://7u2ss1.com1.z0.glb.clouddn.com/love.js
然后将里面的代码copy一下,新建love.js
文件并且将代码复制进去,然后保存。
将love.js
文件放到路径themes/next/source/js/src
里面,然后打开themes/next/layout/_layout.swig
文件,在末尾(在前面引用会出现找不到的bug)
添加以下代码:
1 | <!-- 页面点击小红心 --> |
添加RSS
设置效果:
设置方法:
执行以下命令安装RSS插件
1 | npm install hexo-generator-feed --save |
编辑网站根目录下的_config.yml
,添加以下代码开启
1 | plugin: |
字数统计
设置效果:
设置方法:
安装统计插件
1 | npm i --save hexo-wordcount |
NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能,如果我们需要使用,只需要在主题配置文件themes/next/_config.yml
中打开wordcount
统计功能即可。如下所示:
1 | # Post wordcount display settings |
显示文字
打开post.swig
文件,路径:themes/next/layout/_macro/post.swig
修改【字数统计】,找到如下代码:
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }}
</span>
添加字
到{{ wordcount(post.content)}}
后面,修改后为:
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>
同理,我们修改【阅读时长】,修改后如下:
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>
修改``代码块自定义样式
设置效果:
设置方法:
打开themes/next/source/css/_custom/custom.styl
,向里面加入:(颜色可以自己定义)
1 | // Custom styles. |
博文置顶
设置效果:
设置方法:
首先安装插件:
1 | npm uninstall hexo-generator-index --save |
然后在需要置顶的文章的Front-matter
中加上top: true
即可。比如下面这篇文章:

置顶功能就完成了。
不过置顶的文章显示在最上面之后,如果没有明确的置顶标志,是不是感觉有点怪怪的呢?
设置置顶标志
打开:themes/next/layout/_macro
目录下的post.swig
文件,定位到<div class="post-meta">
标签下,插入如下代码:
1 | {% if post.top %} |
结尾添加“本文结束”标记
设置效果:
1 | <div> |
1 | <div> |
1 | # 文章末尾添加“本文结束”标记 |
修改结尾#
标签
设置效果:
设置方法:
修改模板themes/next/layout/_macro/post.swig
搜索rel=”tag”
,将后面的#
换成
1 | <i class="fa fa-tag"></i> |
修改文章内链接文本样式
设置效果:
设置方法:
修改文件themes/next/source/css/_common/components/post/post.styl
,在末尾添加如下css
样式,:
1 | // 文章内链接文本样式 |
其中选择.post-body
是为了不影响标题,选择p
是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。
主页文章添加阴影效果
设置效果:
设置方法:
打开themes/next/source/css/_custom/custom.styl
,在里面加入:
1 | // 主页文章添加阴影效果 |
添加站内搜索
设置效果:
设置方法:
安装hexo-generator-searchdb
插件
1 | npm install hexo-generator-searchdb --save |
编辑_config.yml
站点配置文件,新增以下内容到任意位置:
1 | search: |
编辑themes/next/_config.yml
主题配置文件,启用本地搜索功能,将local_search:
下面的enable:
的值,改成true
1 | # Local search |
首页不显示全文(只显示预览)
设置效果:
设置方法:
打开主题配置文件/themes/next/_config.yml
,将auto_excerpt
下面的enable:
的值,改成true
1 | # Automatically Excerpt. Not recommand. |
除了这个方法,还有一个更灵活的方法,直接在编辑的文章中添加<!--more-->
标记。这样只会显示<!--more-->
标记之前的那部份。
添加顶部加载条
设置效果:

添加到百度统计
设置效果:
设置方法:
首先你要去百度统计注册个账号。
将安装代码复制到github上的index.html
文件里面的</head>
前面(大约在150行左右)
然后复制百度统计的KEY
编辑文件themes/next/_config.yml
,将Baidu Analytics ID
下面的baidu_analytics:
的值设置成百度统计的KEY
1 | # Baidu Analytics ID |
侧边栏推荐阅读
设置效果:
设置方法:
编辑文件themes/next/_config.yml
,找到# Blog rolls
修改成下面的样子就OK了。(links里面写你想要的链接):
1 | # Blog rolls |
生成sitemap文件
设置效果:
设置方法:
首先安装相关插件:
1 | npm install hexo-generator-sitemap --save |
注:根据个人喜欢选择合适插件即可
接着修改主题配置文件themes/next/_config.yml
,找到menu:
将下面sitemap
前面的#
号去掉,再添加baidusitemap: /baidusitemap.xml
1 | menu: |
添加联系方式
设置效果:
设置方法:
修改themes/next/_config.yml
站点配置文件,找到# Social Links
,将social:
下面对应的·#
号去掉。
1 | # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. |
注释:seoial_icons节点中后面的值是http://fontawesome.io/icons/ 中提供的图标的名称。之后其他链接如推特,微博等都可自行增减。
添加打赏功能
设置效果:
设置方法:
打开themes/next/_config.yml
站点配置文件,找到# Reward
把wechatpay:
和alipay:
前面的#
号删除。然后将自己的二维码文件wechatpay.jpg
、alipay.jpg
图片放入themes/next/source/images
中即可。
1 | # Reward |
文章加密访问
设置效果:
设置方法:
打开themes/next/layout/_partials/head.swig
文件。
在<meta name="theme-color" content="{{ theme.android_chrome_color }}">
下面插入代码:
1 | <script> |
然后在需要加密的文章头上添加password:
标签字段,后面跟上你要设置的密码。如下图:
博客加上萌萌的宠物
设置效果:
设置方法:
首先安装live2d插件
1 | npm install -save hexo-helper-live2d |
然后在在hexo的_config.yml
主站配置文件中结尾处添加下面这些代码:
1 | live2d: |
然后刷新一下hexo就可以看到效果了.
1 | hexo clean && hexo s |
下面这段是出于原创:
萌萌宠物网上找了好多资料,发现没有一个能说清楚live2d是怎么配置和更换宠物的.所以我在这里给大伙写一下我的经验.
如果要变更宠物需要先安装他的插件包,代码如下: 想知道有哪些宠物可以点这里
1 | npm install live2d-widget-model-z16 |
然后在use: live2d-widget-model-wanko
这串代码中将live2d-widget-model-wanko
变成你安装的宠物名字,如刚才装的live2d-widget-model-z16
再刷新一下hexo就可以看到效果了.width:150
和height:300
这二个是代表宠物的宽度和高度.你可以自行设置.也是要刷新hexo才可以看到效果.
如果在手机上观看博客,萌宠可能会影响观看.将mobile:
下面的show:
的值true
改成false
之后,在手机上就不会显示萌宠了.
1 | mobile: |
自定义鼠标样式
设置效果:
设置方法:
打开themes/next/source/css/_custom/custom.styl
,在里面添加如下代码:
1 | // 鼠标样式 |
其中url里面必须是ico图片,ico图片可以上传到网上,然后获取外链,复制到url里就行了。
小技巧:二个ICO图标可以设置成一大一小。这样点击起来,就会有动画效果了。
修改主题宽度
设置原因:
因为next默认的主题宽度觉得有点窄,想把他改宽一点,比较好看.所以就有了下面这个方法
设置方法:
在themes/next/source/css/_schemes/Picses/_layout.styl
文件末尾添加如下代码:
1 | // 以下为新增代码!! |
显示阅读百分比
设置效果:
设置方法:
打开themes/next/_config.yml
主题配置文件,找到# Scroll percent label in b2t button
将scrollpercent:
的值,改成true
1 | # Scroll percent label in b2t button |
点击爆炸效果
设置效果:
设置方法:
首先在themes/next/source/js/src
里面建一个叫fireworks.js
的文件,代码如下:
1 | {% if theme.fireworks %} |
再打开themes/next/_config.yml
主题配置文件,在文件最后添加:
1 | # Fireworks |
隐藏网页底部 powered By Hexo / 强力驱动
设置方法:
打开themes/next/layout/_partials/footer.swig
,使用隐藏符号之间的代码即可,或者直接将这段代码删除。
设置分页显示
设置方法
打开_config.yml
主站配置文件,找到index_generator:
,设置成如下代码:
1 | index_generator: |
说明:index_generator:
是设置主页显示多少篇文章开始分页,archive_generator:
是设置归档主页显示多少篇文章开始分页,tag_generator:
是指底分页条显示多少个分页的链接.
取消Coding跳转页
设置效果:
取消下面这个跳转页面.
设置方法:
打开themes/next/layout/_partials/footer.swig
文件。将下面的代码添加到如下图的位置.
1 | {% if theme.footer.powered and theme.footer.theme.enable %} |
然后在Coding网站上,勾选已放置 Hosted by Coding Pages
加入valine在线评论
设置效果:
设置方法:
首先要先去LeanCloud注册一个帐号.然后再创建一个应用.
进入应用->设置->应用key,获取你的appid 和 appkey 如图所示:
拿到appid
和appkey
之后,打开themes/next/_config.yml
主题配置文件,查找valine
,填入appid
和 appkey
我的配置:
1 | valine: |
最后!记得在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去.
刷新一下~ 是不是就能看到评论框了?
压缩博客
设置方法:
运行下面的命令安装插件:
1 | npm install gulp -g |
然后在博客根目录下新建一个gulpfile.js
的文件,输入下面的代码:
1 | var gulp = require('gulp'); |
对生成博客进行压缩就执行hexo g && gulp
,就会根据gulpfile.js
的配置,对博客进行压缩了。
小技巧: linux下可以,将下面的代码添加到~/.bashrc
文件的结尾。
代码:
1 | alias up='hexo clean && hexo g && hexo d' #部署到网上 |
添加完后,刷新~/.bashrc
文件。
1 | source ~/.bashrc |
这样部署时只需要输入up
或者upg
就可以实现部署了,不用打那么多字了。
实现fork me on github
设置效果:
设置方法:
点击这里或者这里挑选自己喜欢的样式, 复制代码:
粘贴刚才复制的代码到themes/next/layout/_layout.swig
文件中,放在<div class="headband"></div>
的下面,并把href改为你的github地址

显示文章热度
设置效果:
设置方法:
next主题集成leanCloud,打开themes/next/layout/_macro/post.swig
,在画红线的区域添加℃
打开,themes/next/languages/zh-Hans.yml
,将画红框的改为热度
.
打开themes/next/_config.yml
找到leancloud_visitors
,将enable:
改成true
,再填上自己的app_id
和app_key
。不懂怎么看app_id和app_key的可以点这里!
1 | leancloud_visitors: |
hexo载入动画效果
设置方法:
编辑themes/netx/_config.yml
找到motion
,将enable
的值,改成true
1 | # Use velocity to animate everything. |
#
号里都是载入效果,有时间可以自己多试一试!
建立md模板
你是在站点文件夹根目录用hexo new <title>
新建的文章,那么其实它就是将文章的模版文件~/scaffolds/post.md
复制了一份到~/blog/source/_posts/
下,所以这也意味着:
你可以直接通过在~/blog/source/_posts/
下新建.md结尾的文件来写新的文章。
你可以通过自定义文章的模版文件,从而每次命令行新建的文章都会有你自定义的内容。
下面是我的post.md
内容
1 | title: {{ title }} |
在博文中添加版权信息
设置效果:
设置方法:
在目录themes/next/layout/_macro/
下建立my-copyright.swig
文件,填入下面的代码:
1 | {% if page.copyright %} |
在目录themes/next/source/css/_common/components/post/
下建立my-post-copyright.styl
1 | .my_post_copyright { |
修改themes/next/layout/_macro/post.swig
,在代码
1 | <div> |
之前添加下面的代码:
1 | <div> |
修改themes/next/source/css/_common/components/post/post.styl
文件,在最后一行增加:
1 | @import "my-post-copyright" |
然后保存退出。
在需要增加版权信息显示的博文抬头,添加copyright: true
。如下图:
按文章更新时间排序
这个功能我单独写了一篇文章,请访问下面的链接了解。
美化右侧滚动条
设置效果:

设置方法:
打开themes\next\source\css\_custom\custom.styl
文件,将下面的代码添加进去。
1 | //设置滚动条的样式 |
优化选择的文字样式
设置效果:
设置方法:
打开themes\next\source\css\_custom\custom.styl
文件,将下面的代码添加进去。
1 | ::selection { |
valine评论实现邮箱提醒
这个功能我单独写了一篇文章,请访问下面的链接了解。
未完待续…….