一、网站标题栏背景颜色
打开 themes/next/source/css/_custom/custom.styl
, 在里面写下如下代码:
1 | .site-meta { |
二、开启加载动画
修改 themes/next/_config.yml
,搜索关键字 pace
并把 false
修改为 true
,加载条有许多样式,可自行更换。
三、浏览页面的时候显示当前浏览进度
修改 themes/next/_config.yml
,搜索关键字 scrollpercent
, 并把 false
改为 true
。
四、背景的设置
在主题配置文件中,查找canvas
:
1 | # Canvas-nest |
开启相应的背景,只要把对应的false
设置为true
,记得把其他都改为false
五、修改内容区域宽度
Next 对内容的宽度的设定如下:
- 700px,当屏幕宽度 < 1600px
- 900px,当屏幕宽度 >= 1600px
- 移动设备下,宽度自适应
在主题目录下的 source\css_variables\custom.styl
文件,新增变量:
1 | // 修改成你期望的宽度 |
此方法不适用于 Pisces Scheme
, Pisces Scheme
编辑themes\next\source\css\_schemes\Picses\_layout.styl
文件,更改以下 css 选项定义值:
1 | .header {width: 1150px;} |
六、NexT主题分页的翻页箭头显示
修改:
themes\next\layout\_partials\pagination.swig
为1
2
3
4
5
6
7
8
9
10
11{% if page.prev or page.next %}
<nav class="pagination">
{{
paginator({
prev_text: '<',
next_text: '>',
mid_size: 1
})
}}
</nav>
{% endif %}
七、添加自定义menu菜单
- 修改
themes/next/_config.yml
,在menu下添加菜单项,格式为Key: /link || icon
,icon即为 Font Awesome 提供的图标。注意统一缩进,如果出现地址多了%20/
无法访问,则删去||
前的空格, 例如skill: skill|| book
。 - 修改
themes/next/languages/zh-Hans.yml
,在menu下添加对应Key的中文,例如skill: 技能
,注意统一缩进。 - 在博客根目录,即执行hexo操作的目录,运行
hexo new page "skill"
,也就是第1步对应添加的Key然后编辑新建的source/skill/index.md
即可。同样,我们也可以使用技术: /tags/tech || wrench
,实现按照标签进行自定义菜单。
八、搜索功能
安装插件
1
npm install hexo-generator-searchdb --save
打开
themes/next/_config.yml
,搜索关键字local_search
,设置为true
打开hexo的站点配置
_config.yml
,添加1
2
3
4
5search:
path: search.xml
field: post
format: html
limit: 10000
九、统计功能
显示文章字数统计、阅读时长及总字数,
安装插件
1
npm i --save hexo-wordcount
打开
themes/next/_config.yml
,搜索关键字post_wordcount
,将所需选项的false
改为true
打开
themes/next/layout/_macro/post.swig
,搜索关键词post.wordcount
,添加字
到末尾1
2
3<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>同理,搜索关键词
post.min2read
,添加分钟
到末尾1
2
3<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分钟
</span>
十、文章加密访问
打开 themes/next/layout/_partials/head.swig
文件插入代码:
1 | <script> |
写文章时加上password: *
:
1 |
|
十一、hexo在文章中添加图片
安装图片上传插件
npm install hexo-asset-image --save
在
_config.yml
配置文件中,修改为post_asset_folder: true
修改:
/node_modules/hexo-asset-image/index.js
为1
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...
if(config.post_asset_folder){
var link = data.permalink;
/* 注释以下内容
var beginPos = getPosition(link, '/', 3) + 1;
var appendLink = '';
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
// if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
if(/.*\/index\.html$/.test(link)) {
// when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
// image in xxtitle/ will go to xxtitle/index/
appendLink = 'index/';
var endPos = link.lastIndexOf('/');
}
else {
var endPos = link.lastIndexOf('.');
}
link = link.substring(beginPos, endPos) + '/' + appendLink;
*/
/* 修改为下面四行 */
var link = data.permalink;
var beginPos = getPosition(link, '/', 3) + 1;
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);
var toprocess = ['excerpt', 'more', 'content'];
...然后每次
hexo n "文章标题"
时,_posts
文件夹里都会新建一个文章标题
的文件夹,把你的图片素材统一放这里,然后md格式的文章正文里引用[图片说明](文章标题/图片名.扩展名)
十二、部分图片禁用fancybox
打开 theme/next/source/js/src/utils.js
,添加 if ($(this).hasClass('nofancybox')) return;
1 | wrapImageWithFancyBox: function () { |
使用时,在img标签使用的时候加上 class="nofancybox"
即可。
十三、添加代码块折叠功能
先创建
themes/next/scripts/custom/fold_tag.js
,1
2
3
4
5
6
7
8/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
var text = args[0];
if(!text) text = "点击显/隐";
return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});以及
themes/next/source/custom/fold_action.js
文件,1
2
3
4
5
6
7
8$(document).ready(function(){
$(document).on('click', '.fold_hider', function(){
$('>.fold', this.parentNode).slideToggle();
$('>:first', this).toggleClass('open');
});
//默认情况下折叠
$("div.fold").css("display","none");
});然后创建文件
themes/next/layout/_custom/post-details.swig
1
2
3
4{# hexo-theme-next/layout/_custom/post-details.swig
add to: themes/hexo-theme-next/layout/_scripts/pages/post-details.swig
#}
<script type="text/javascript" src="{{ url_for(theme.custom) }}/fold_action.js?v={{ version }}"></script>并在
`themes/next/layout/_scripts/pages/post-details.swig
的末尾加上1
{% include '../../_custom/post-details.swig' %}
修改主题下的
_config.yml
,添加custom: custom
, 注意空格1
2
3
4
5# Assets
css: css
js: js
images: images
custom: custom最后修改
themes/next/source/css/_custom/custom.styl
,添加1
2
3
4
5
6
7
8
9
10.hider_title{
font-family: "Microsoft Yahei";
cursor: pointer;
}
.close:before{
content: "▼";
}
.open:before{
content: "▲";
}
十四、文章目录修改
目录默认展开。打开
themes/next/source/css/_custom/custom.styl
添加以下内容1
2//文章目录默认展开
.post-toc .nav .nav-child { display: block; }取消自动编号,开启自动换行。打开
themes/next/_config.yml
,搜索关键词toc
1
2
3
4
5
6
7
8toc:
enable: true
# Automatically add list number to toc.
number: false
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: true
十五、文章结束语
添加模板文件
在主题目录下
\layout\_macro
中新建passage-end-tag.swig
文件,并添加以下内容:1
2
3
4
5
6
7<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">
-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
</div>
{% endif %}
</div>导入模板文件
在
\layout\_macro\post.swig
文件中,找到:1
2
3{#####################}
{### END POST BODY ###}
{#####################}在上面代码之前添加:
1
2
3
4
5<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>配置
在主题配置文件中添加:1
2
3# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
十六、增强文章底部标签
修改模板/themes/next/layout/_macro/post.swig
,搜索 rel=”tag”>#
,将 #
换成
1 | <i class="fa fa-tag"></i> |