Hexo 优化汇总





前言

这大概是最用心写的一篇文章 …

1. CNPM


本节参考自 淘宝 NPM 镜像

这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

npm 无法同步时提供帮助。

安装 $ npm install -g cnpm --registry=https://registry.npm.taobao.org

指令

# 安装模块
registry.npm.taobao.org 安装所有模块。 当安装的时候发现安装的模块还没有同步过来,淘宝 NPM 会自动在后台进行同步,并且会让你从官方 NPM registry.npmjs.org 进行安装。下次你再安装这个模块的时候,就会直接从 淘宝 NPM 安装了。

$ cnpm install [name]

# 同步模块
直接通过 sync 命令马上同步一个模块, 只有 cnpm 命令行才有此功能:

$ cnpm sync connect

当然, 你可以直接通过 web 方式来同步: /sync/connect

$ open https://npm.taobao.org/sync/connect

# 其它命令

支持 npm 除了 publish 之外的所有命令, 如:

$ cnpm info connect


2. Hexo 页面自动刷新


本节参考自 MOxFIVE

经常本地调试 Hexo 主题, 如果有工具能监视文件更改幷自动刷新页面,那一定能提高不少效率,Browsersync 就是这样一款浏览器同步测试工具。

安装 

在Hexo根目录下运行

1
2
$ npm install -g browser-sync
$ npm install hexo-browsersync --save

安装后像往常一样执行 hexo s 开启本地服务器,当相关文件被修改或者保存时,关联的浏览器页面会自带刷新

不足 
变动后将重新加载整个页面,不能局部刷新
使用 Hexo 自带服务器时,无法在移动端调试
md 文件过大时界面无法加载


3. InstantClick


本节参考自 刘兴刚博客

通常,我们为了减少DNS的查询时间,使用dns prefetch为该页面中的链接做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟。

但是InstantClick并不能滥用,许多js无法与它兼容,如谷歌分析百度统计以及fancybox

初始化并解决部分js无法加载的问题:

打开 \themes\next\layout\_partials\head.swig

添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="\js\src\custom\instantclick.min.js" data-no-instant></script>
<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
if (isInitialLoad === false) {
if (typeof MathJax !== 'undefined') // support MathJax
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
if (typeof prettyPrint !== 'undefined') // support google code prettify
prettyPrint();
if (typeof _hmt !== 'undefined') // support 百度统计
_hmt.push(['_trackPageview', location.pathname + location.search]);
if (typeof ga !== 'undefined') // support google analytics
ga('send', 'pageview', location.pathname + location.search);
}
});
InstantClick.init();
</script>

下载  instantclick.min.js

打开 \themes\next\source\js\src\custom\

放置 instantclick.min.js

这时候对于所有链接都开启预加载模式,但可以把部分链接加入黑名单:<a href="\blog\" data-no-instant>Blog</a>


4. 畅言加载优化


本节参考自 刘兴刚博客

畅言依赖的embed.js放至底部

打开 \themes\next\layout\_third-party\comments\changyan.swig

查找 document.getElementsByTagName("head")[0]

改为 document.getElementsByTagName("footer")[0]


5. 修改分类层级显示

5.1. 修改 post.swig


本节参考自 跬步




打开 \themes\next\layout\_macro\post.swig

查找

1
{{ __('symbol.comma') }}

改为

1
{{ __('>') }}


5.2. 修改 custom.styl


本节参考自 孔晨皓




打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
4
.category-list ul
list-style none
li:before
content '>> '


6. 修改TOC元素


本节参考自 跬步

打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
4
5
6
h2 {
border-bottom: 2px solid #8c8c8c;
padding: 0 5% 2px 0;
display: inline-block;
border-image: -moz-linear-gradient(left, #8c8c8c, rgba(140,140,140,0)) 30 30;
}

1
2
3
4
5
6
7
8
9
10
span#inline-toc {
display: inline-block;
border-radius: 80% 100% 90% 20%;
word-wrap: break-word !important;
background-color: #8c8c8c;
color: #fff;
min-width: 0.8em;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
}


7. 修改页脚文字颜色


本节参考自 RockZhou’s Blog

打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
footer{
color:#eee;
}


8. 设置背景图片


本节参考自 RockZhou’s Blog

打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
4
5
6
body{
background-image:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}


9. 去除#more标签


本节指导自 Moorez

打开 \themes\next\layout\_macro\post.swig

删除

1
#{{ __('post.more') }}


10. Lean Analytics 修改


本节参考自 Moorez

10.1. 修改 zh-Hans.yml

打开 \themes\next\languages\zh-Hans.yml

修改 visitors: 已浏览

10.2. 修改 lean-analytics.swig

打开 \themes\next\layout\_third-party\analytics\lean-analytics.swig

修改

  • $visitors.find(COUNT_CONTAINER_REF).text(0+" 次");
  • $(element).find(COUNT_CONTAINER_REF).text( time+" 次");
  • countSpan.text(0+" 次");
  • counter.get('time')+" 次");
  • newcounter.get('time')+" 次");


11. 修改页宽


本节参考自 Issue #759

打开 \themes\next\source\css\_variables\custom.styl

添加

1
2
$main-desktop                   = 1200px
$content-desktop = 900px


12. 分类和标签界面显示年份


本节参考自 reuixiv

12.1. 修改 category.swig

打开 \themes\next\layout\category.swig

查找

1
2
3
{% for post in page.posts %}
{{ post_template.render(post) }}
{% endfor %}

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
{% for post in page.posts %}
{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
</div>
{% endif %}
{# endshow #}
{{ post_template.render(post) }}
{% endfor %}

添加

1
2
3
4
5
6
7
{% block script_extra %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}

12.2. 修改 tag.swig

打开 \themes\next\layout\tag.swig

查找

1
2
3
{% for post in page.posts %}
{{ post_template.render(post) }}
{% endfor %}

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
{% for post in page.posts %}
{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}
{% if post.year !== year %}
{% set year = post.year %}
<div class="collection-title">
<h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
</div>
{% endif %}
{# endshow #}
{{ post_template.render(post) }}
{% endfor %}

添加

1
2
3
4
5
6
7
{% block script_extra %}
{% if theme.use_motion %}
<script type="text/javascript" id="motion.page.archive">
$('.archive-year').velocity('transition.slideLeftIn');
</script>
{% endif %}
{% endblock %}


13. 滚动条美化


本节参考自 I sudo X

打开 \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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
display: none;
}
::-webkit-scrollbar-corner {
display: block;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
width: 10px;
height: 10px;
background: url(../images/scrollbar_arrow.png) no-repeat 0 0;
}
::-webkit-scrollbar-button:start:hover {
background: url(../images/scrollbar_arrow.png) no-repeat -15px 0;
}
::-webkit-scrollbar-button:start:active {
background: url(../images/scrollbar_arrow.png) no-repeat -30px 0;
}
::-webkit-scrollbar-button:end {
width: 10px;
height: 10px;
background: url(../images/scrollbar_arrow.png) no-repeat 0 -18px;
}
::-webkit-scrollbar-button:end:hover {
background: url(../images/scrollbar_arrow.png) no-repeat -15px -18px;
}
::-webkit-scrollbar-button:end:active {
background: url(../images/scrollbar_arrow.png) no-repeat -30px -18px;
}

下载  scrollbar_arrow.png


14. 阅读进度条


本节参考自 I sudo X

打开 \themes\next\layout\_partials\header.swig

添加

1
<div class="top-scroll-bar"></div>

打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
4
5
6
7
8
9
10
11
12
//顶部阅读进度条
.top-scroll-bar {
position: fixed;
height: 3px;
top: 0;
left: 0;
transition-duration: 0.7s,0.7s;
transiton-property: width,background;
z-index: 99999;
display: none;
background: #37C6C0;
}

打开 \themes\next\source\js\src\custom\

新建 custom.js

写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//阅读进度条
$(document).ready(function () {
$(window).scroll(function(){
$(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
var s=$(window).scrollTop();
var a=$(document).height();
var b=$(window).height();
var result=parseInt(s/(a-b)*100);
$(".top-scroll-bar").css("width",result+"%");
if(result>=0&&result<=19)
$(".top-scroll-bar").css("background","#cccccc");
if(result>=20&&result<=39)
$(".top-scroll-bar").css("background","#50bcb6");
if(result>=40&&result<=59)
$(".top-scroll-bar").css("background","#85c440");
if(result>=60&&result<=79)
$(".top-scroll-bar").css("background","#f2b63c");
if(result>=80&&result<=99)
$(".top-scroll-bar").css("background","#FF0000");
if(result==100)
$(".top-scroll-bar").css("background","#f58ca1");
});
});

打开 \themes\next\layout\_scripts\commons.swig

set js_commons = [ 下添加

1
'src/custom/custom.js'


15. 分割线样式修改


本节参考自 Issue #942

打开 \themes\next\source\css\_common\scaffolding\base.styl

注释

1
2
3
4
5
6
7
background-image: repeating-linear-gradient(
-45deg,
white,
white 4px,
transparent 4px,
transparent 8px
);

添加

1
2
3
4
5
hr {
margin: 20px 20px;
height: 3px;
background-color: #002661;
}


16. 畅言去版权


本节参考自 好基地

打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#SOHUCS #SOHU_MAIN .module-cmt-notice{display:none !important;}
.section-service-w{display:none !important;}
#SOHUCS #SOHU_MAIN .module-cmt-box .post-wrap-w .post-wrap-main{background:none;background-image:url(https://i.loli.net/2017/08/05/5985668d58744.png) !important;}
#SOHUCS{position:relative;z-index:0 !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .split-hr{display:none !important;}
.phone-login{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper.changyan-login-dialog-wrapper-main{height:250px !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-group .login-item .login-logo-phone{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-instruction{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .platform-login .login-group .login-item .login-logo-wechat{display:none !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper.changyan-login-dialog-wrapper-main{background:none;background-image:url(https://i.loli.net/2017/08/05/59856762568bb.png) !important;}
#SOHUCS #SOHU_MAIN .changyan-login-dialog-wrapper .cy-logo{background:none !important;}
#SOHUCS #SOHU_MAIN .module-cmt-box .post-wrap-w .wrap-action-w .action-issue-w .issue-btn-w a .btn-fw{background:none;background-image:url(https://i.loli.net/2017/08/05/5985612ad66f5.png) !important;}
#SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w, #SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w .service-wrap-w, #SOHUCS #SOHU_MAIN .module-cmt-footer .section-service-w .service-wrap-w a{height:0px !important;overflow:hidden !important;}


17. 代码块复制功能


本节参考自 猪猪娱乐

更新主题至 5.1.3 后失效

17.1. 下载 clipboard.js

任选其一 

clipboard.js
clipboard.min.js 推荐)

打开 \themes\next\source\lib\

新建文件夹 zclip

放置 clipboard.js/clipboard.min.js


17.2. 插入 JavaScript

打开 \themes\next\source\js\src\

新建 custom.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//此函数用于创建复制按钮
function createCopyBtns() {
var $codeArea = $("figure table");
//查看页面是否具有代码区域,没有代码块则不创建 复制按钮
if ($codeArea.length > 0) {
//复制成功后将要干的事情
function changeToSuccess(item) {
$imgOK = $("#copyBtn").find("#imgSuccess");
if ($imgOK.css("display") == "none") {
$imgOK.css({
opacity: 0,
display: "block"
});
$imgOK.animate({
opacity: 1
}, 1000);
setTimeout(function() {
$imgOK.animate({
opacity: 0
}, 2000);
}, 2000);
setTimeout(function() {
$imgOK.css("display", "none");
}, 4000);
};
};
//创建 全局复制按钮,仅有一组。包含:复制按钮,复制成功响应按钮
//值得注意的是:1.按钮默认隐藏,2.位置使用绝对位置 position: absolute; (position: fixed 也可以,需要修改代码)
$(".post-body").before('<div id="copyBtn" style="opacity: 0; position: absolute;top:0px;display: none;line-height: 1; font-size:1.5em"><span id="imgCopy" ><i class="fa fa-paste fa-fw"></i></span><span id="imgSuccess" style="display: none;"><i class="fa fa-check-circle fa-fw" aria-hidden="true"></i></span>');
//创建 复制 插件,绑定单机时间到 指定元素,支持JQuery
var clipboard = new Clipboard('#copyBtn', {
target: function() {
//返回需要复制的元素内容
return document.querySelector("[copyFlag]");
},
isSupported: function() {
//支持复制内容
return document.querySelector("[copyFlag]");
}
});
//复制成功事件绑定
clipboard.on('success',
function(e) {
//清除内容被选择状态
e.clearSelection();
changeToSuccess(e);
});
//复制失败绑定事件
clipboard.on('error',
function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
//鼠标 在复制按钮上滑动和离开后渐变显示/隐藏效果
$("#copyBtn").hover(
function() {
$(this).stop();
$(this).css("opacity", 1);
},
function() {
$(this).animate({
opacity: 0
}, 2000);
}
);
}
}

//感应鼠标是否在代码区
$("figure").hover(
function() {
//-------鼠标活动在代码块内
//移除之前含有复制标志代码块的 copyFlag
$("[copyFlag]").removeAttr("copyFlag");
//在新的(当前鼠标所在代码区)代码块插入标志:copyFlag
$(this).find(".code").attr("copyFlag", 1);
//获取复制按钮
$copyBtn = $("#copyBtn");
if ($copyBtn.lenght != 0) {
//获取到按钮的前提下进行一下操作
//停止按钮动画效果
//设置为 显示状态
//修改 复制按钮 位置到 当前代码块开始部位
//设置代码块 左侧位置
$copyBtn.stop();
$copyBtn.css("opacity", 0.8);
$copyBtn.css("display", "block");
$copyBtn.css("top", parseInt($copyBtn.css("top")) + $(this).offset().top - $copyBtn.offset().top + 3);
$copyBtn.css("left", -$copyBtn.width() - 3);
}
},
function() {
//-------鼠标离开代码块
//设置复制按钮可见度 2秒内到 0
$("#copyBtn").animate({
opacity: 0
}, 2000);
}
);
//页面载入完成后,创建复制按钮
$(document).ready(function() {
createCopyBtns();
});


17.3. 引入自定义文件

此步骤同 19.1. 引入自定义文件2  21.1. 引入自定义文件3

打开 \themes\next\layout\_custom\

新建 custom.swig

打开 \themes\next\layout\_layout.swig

</body> 前添加 

1
{% include '_custom/custom.swig' %}


17.4. 写入主题

打开 \themes\next\layout\_custom\custom.swig

添加 

1
2
<script type="text/javascript" src="/lib/zclip/clipboard.min.js"></script>
<script type="text/javascript" src="/js/src/custom.js"></script>


18. 文末结束标记


本节参考自 务虚笔记

打开 \themes\next\layout\_macro\

新建 passage-end-tag.swig

写入

1
2
3
4
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:15px;"><br/><br/><br/>
-------------文章结束啦 ~\(≧▽≦)/~ 感谢您的阅读-------------</div>
<br/>

打开 \themes\next\layout\_macro\post.swig

查找 wechat




于图中位置添加

1
2
3
4
5
  <div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

打开 \themes\next\_config.yml

添加

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true


19. 鼠标点击特效


本节参考自 蝉時雨

19.1. 引入自定义文件

此步骤同 17.3. 引入自定义文件1  21.1. 引入自定义文件3

打开 \themes\next\layout\_custom\

新建 custom.swig

打开 \themes\next\layout\_layout.swig

</body> 前添加 

1
{% include '_custom/custom.swig' %}


19.2. 添加鼠标点击特效

打开 \themes\next\layout\_custom\custom.swig

写入

1
2
3
4
<!-- 点击特效 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>

下载

anime.min.js
fireworks.js

放置 anime.min.js 至 CDN

打开 \themes\next\source\js\src\custom\

放置 fireworks.js


20. 侧边栏添加APlayer


本节参考自 蝉時雨




下载  APlayer.min.js

打开 \themes\next\source\js\src\custom\

放置 APlayer.min.js

打开 \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
<div id="aplayer" class="aplayer"></div>
<script src="/js/src/custom/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
element: document.getElementById('aplayer'), // Optional, player element
narrow: false, // Optional, narrow style
autoplay: false, // Optional, autoplay song(s), not supported by mobile browsers
showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
mutex: true, // Optional, pause other players when this player playing
theme: '#e6d0b2', // Optional, theme color, default: #b7daff
mode: 'random', // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
preload: 'metadata', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
listmaxheight: '513px', // Optional, max height of play list
music: [{
title: '双笙 囧菌 - 世末歌者',
author: '双笙 囧菌',
url: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%8F%8C%E7%AC%99%20%E5%9B%A7%E8%8F%8C%20-%20%E4%B8%96%E6%9C%AB%E6%AD%8C%E8%80%85.mp3',
pic: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%8F%8C%E7%AC%99%20%E5%9B%A7%E8%8F%8C%20-%20%E4%B8%96%E6%9C%AB%E6%AD%8C%E8%80%85.webp',
}, {
title: '幹物女(WeiWei)',
author: '封茗囧菌',
url: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%B0%81%E8%8C%97%E5%9B%A7%E8%8F%8C%20-%20%E5%B9%B9%E7%89%A9%E5%A5%B3(WeiWei).mp3',
pic: 'https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/music/%E5%B0%81%E8%8C%97%E5%9B%A7%E8%8F%8C%20-%20%E5%B9%B9%E7%89%A9%E5%A5%B3(WeiWei).webp',
}]
});
</script>


21. 页面添加live2d


本节参考自 幻想帖

21.1. 引入自定义文件

此步骤同 17.3. 引入自定义文件1  19.1. 引入自定义文件2

打开 \themes\next\layout\_custom\

新建 custom.swig

打开 \themes\next\layout\_layout.swig

</body> 前添加 

1
{% include '_custom/custom.swig' %}


21.2. 添加 live2d

安装 $ npm install -save hexo-helper-live2d

打开 \themes\next\layout\_custom\custom.swig

添加

1
2
<!-- live2d -->
{{ live2d() }}

打开 \blog\_config.yml

添加

1
2
3
4
5
6
7
8
9
10
11
12
13
live2d:
model: koharu
width: 150
height: 300
scaling: 2
mobileShow: true
mobileScaling: 0.5
opacityDefault: 1
position: left
horizontalOffset: 10
verticalOffset: -40
className: live2d
id: live2dcanvas


22. 添加Mob分享


本节参考自 Issue #911

登录 MOB(如无帐号请注册) http://mob.com/login/

添加新的应用,然后在添加产品处添加 ShareSDK 




打开设置,复制AppKey

打开 \blog\_config.yml

添加

1
2
3
#Share
mob_share:
appkey: ******

打开 \themes\next\layout\_partials\share\

新建 mob_share.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
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分 享</div>
<div class="-mob-share-ui" -mob-share-ui-theme -mob-share-ui-theme-slide-bottom style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weixin"><p>微信</p></li>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-pocket"><p>Pocket</p></li>
<li class="-mob-share-tumblr"><p>Tumblr</p></li>
<li class="-mob-share-google"><p>Google+</p></li>
<li class="-mob-share-linkedin"><p>Linkedin</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
<li class="-mob-share-renren"><p>人人网</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-instapaper"><p>Instapaper</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="https://f1.webshare.mob.com/code/mob-share.js?appkey={{config.mob_share.appkey}}"></script>
<!--MOB SHARE END-->

打开 \themes\next\layout\_macro\post.swig

查找 <i class="fa fa-chevron-right">




于图中位置添加

1
{% include '../_partials/share/mob_share.swig' %}


23. 文章置顶


本节参考自 Moorez

打开 \blog\node_modules\hexo-generator-index\lib\generator.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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.sticky && b.sticky) { // 两篇文章sticky都有定义
if(a.sticky == b.sticky) return b.date - a.date; // 若sticky值一样则按照文章日期降序排
else return b.sticky - a.sticky; // 否则按照sticky值降序排
}
else if(a.sticky && !b.sticky) { // 以下是只有一篇文章sticky有定义,那么将有sticky的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.sticky && b.sticky) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

使用方法
在文章中添加 sticky 值,数值越大文章越靠前,如

1
2
3
4
5
6
---
title: Hexo 优化汇总
categories: Hexo
tags: [前端,Hexo,汇总]
sticky: 1
---


24. LocalSearch 加载动画修改

打开 \themes\next\layout\_third-party\search\localsearch.swig

查找 fa fa-spinner fa-pulse fa-5x fa-fw

改为 fa fa-circle-o-notch fa-spin fa-5x fa-fw margin-bottom


25. Star rating修改


本节参考自 reuixiy

打开 \themes\next\layout\_macro\post.swig

查找 <div class="wp_rating">

在下一行添加
<div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;来评分吧&lt;)</div>

打开 \themes\next\source\css\_custom\custom.styl

添加

1
2
3
4
5
6
7
// 评分留白更改
.post-widgets {
padding-top: 0px;
}
.post-nav {
margin-top: 30px;
}


26. 点击侧栏以外区域时关闭侧栏


本节参考自 Issue #947

打开 \themes\next\source\js\src\motion.js

添加

1
2
3
4
5
6
7
8
9
// 点击侧栏以外区域时关闭侧栏
$('body').on('click',function(e){
var bSidebarShow = $('#sidebar').css('display')==='block' && $('#sidebar').width() > 0;
var bFlag = $(e.target).parents('#sidebar,.sidebar-toggle').length > 0;
if(bSidebarShow && !bFlag){
$('.sidebar-toggle-line-wrap').trigger('click');
e.preventDefault();
}
});


27. 根据邮箱自定义评论头像


本节参考自 糖果味’s-blog

打开 https://cn.gravatar.com/

注册并上传图片

之后即可在支持填写邮箱的评论插件中使用自己的头像啦

如果头像没有生效的话清除下网站缓存就行啦


28. 使用dos命令一键创建新文章

打开 \blog

新建 新建文章.bat

添加

1
2
3
4
set "a=%date:~,4%"
set "b=%date:~5,2%"
set "c=%date:~8,2%"
hexo new "%a%-%b%-%c%"

命名格式为 年-月-日.md

同样的,同步也可写为 hexo clean & hexo g && gulp & hexo deploy


29. 评论输入打字礼花及震动特效


本节参考自 龙笑天下

下载  activate-power-mode.js

放置 activate-power-mode.js 至 CDN

打开 \themes\next\layout\_custom\custom.swig

添加

1
2
3
4
5
6
7
<!-- 打字礼花及震动特效 -->
<script type="text/javascript" src="https://qianling-1254036047.cos.ap-chengdu.myqcloud.com/js/activate-power-mode.js"></script>
<script>
POWERMODE.colorful = true; // ture 为启用礼花特效
POWERMODE.shake = false; // false 为禁用震动特效
document.body.addEventListener('input', POWERMODE);
</script>


30. Service Worker


部署教程 千灵


Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器,为了适应越来越多的网页应用而产生。

它可以通过拦截并修改访问和资源请求,缓存特定的网页资源,并可以将网页做到离线可用;

同时 Service Workers 也能做到定期后台同步与信息推送。

部署成功后,您可以节省用户流量、提升页面二次加载速度等。



---文章结束啦 ฅ●ω●ฅ 感谢您的阅读---

打赏一下作者吧