Hexonext配置指南

为什么你的博客总是这么空?

Hexonext配置指南
逐步完善中

基础配置

占位置

进阶配置

代码块复制功能

下载 clipboard.js
第三方三方插件 clipboardjs ,相关介绍和兼容性我就不赘述了,去它主页github上看。

下载链接: 二选一
clipboard.js
推荐 clipboard.min.js
右键链接另存为保存到\themes\next\source\js\src

clipboardjs 使用

\themes\next\source\js\src 目录下创建 clipboard-use.js 并添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*页面载入完成后,创建复制按钮*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += ' <i class="fa fa-globe"></i><span>copy</span>';
copyHtml += '</button>';
$(".highlight .code pre").before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);

\themes\next\source\css\_custom\custom.styl 样式文件中添加下面代码

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
30
31
32
33
34
35
36
//代码块复制按钮
.highlight{
//方便copy代码按钮(btn-copy)的定位
position: relative;
}
.btn-copy {
display: inline-block;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc,#eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
-webkit-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
padding: 2px 6px;
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
}
.btn-copy span {
margin-left: 5px;
}
.highlight:hover .btn-copy{
opacity: 1;
}

引用

\themes\next\layout\_layout.swig 文件中,添加引用(注:在 swig 末尾或 body 结束标签 </body> 之前添加)

1
2
3
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

美化

侧栏加入已运行的时间

/themes/next/layout/_custom/sidebar.swig 添加以下代码

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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:13:14");
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>

上面 Date 的值记得改为你自己的,且按上面格式,然后修改
/themes/next/layout/_macro/sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{# 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 }}&nbsp;
<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>
</li>
{% endfor %}
</ul>
{% include '../_custom/sidebar.swig' %} {#添加此行#}
</div>
{% endif %}

{% include '../_custom/sidebar.swig' %} {#删除此行#}

这样就可以了!当然,要是不喜欢颜色,感觉不好看,就可以在上文所提的 custom.styl 加入
/themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}

超链接配色

先在 /themes/next/source/css/_custom/custom.styl 添加以下参数

1
2
3
4
5
6
7
8
9
10
11
//修改超链接样式
if hexo-config("custom_css.post_body_a.enable")
.post-body
a:not(.btn){
color: convert(hexo-config("custom_css.post_body_a.normal_color"));
border-bottom: none;
&:hover {
color: convert(hexo-config("custom_css.post_body_a.hover_color"));
text-decoration: underline;
}
}

PS: 其中的 a:not(.btn) 是为了不影响 阅读全文按钮
然后在 主题配置文件 /themes/_config.yml 中加入 custom_css的配置

1
2
3
4
5
6
custom_css:
# the style of post body link
post_body_a:
enable: true
normal_color: "#0593d3"
hover_color: "#0477ab"

后续修改 超链接 样式时,只需修改 配置文件 里面的 颜色值 即可

代码框配色

短代码框

/themes/next/source/css/_custom/custom.styl 添加

1
2
3
4
5
//修改短代码框
code {
color: #fd00ff; // 字体颜色
background: #fbd9ff; // 背景颜色
}

TOC[文章目录]

next侧边栏的文章目录默认是关闭的
可以通过修改 主题配置文件 /themes/next/_config.yml 来开启

1
2
3
4
5
6
7
8
9
# Table Of Contents in the Sidebar
toc:
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 # 文章目录自动换行

逐级展开

/themes/next/source/css/_custom/custom.styl 添加以下参数

1
2
3
4
5
//文章目录[TOC]逐级展开
.post-toc .nav .nav-child {
//none开启block关闭
display: none;
}

第三方

占位置

如有漏缺请联系Yaklo补全

参考

参考文章

Hexo NexT 代码块复制功能
侧栏加入已运行的时间
Hexo Next 修改超链接的样式
Hexo Next主题的TOC设置成不是逐级展开

参考视频

参考网站

为什么不尝试赏点子鼓励我呢~