开启字数统计hexo-wordcount
安装hexo-wordcount插件
npm install hexo-wordcount --save
修改<span class="inline-span purple">主题配置文件</span>
post_wordcount:
item_text: true
wordcount: true
min2read: true
修改yoursite/themes/next/layout/_macro/post.swig文件(重点在13行和30行)
{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
<div class="post-wordcount">
{% if theme.post_wordcount.wordcount %}
<span class="post-meta-item-icon">
<i class="fa fa-file-word-o"></i>
</span>
{% if theme.post_wordcount.item_text %}
<span class="post-meta-item-text">{{ __('post.wordcount') }}</span>
{% endif %}
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }}
</span>
<span class="post-meta-item-text">字</span>
{% endif %}
{% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.post_wordcount.min2read %}
<span class="post-meta-item-icon">
<i class="fa fa-clock-o"></i>
</span>
{% if theme.post_wordcount.item_text %}
<span class="post-meta-item-text">{{ __('post.min2read') }}</span>
{% endif %}
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }}
</span>
<span class="post-meta-item-text">分钟</span>
{% endif %}
</div>
{% endif %}
文章末尾统一添加“本文结束”标记
新建article-end-tag.swig文件
在路径yoursite/themes/next/layout/_macro中添加article-end-tag.swig文件，其内容为：
<div>
{% if not is_index %}
<blockquote class="blockquote-center">本文完，如果您觉得本博客对您有帮助，请持续关注，谢谢！</blockquote>
{% endif %}
</div>
修改post.swig文件
在yoursite/themes/next/layout/_macro/post.swig中，在post-body之后添加如下代码：
<div>
{% if not is_index %}
{% include 'article-end-tag.swig' %}
{% endif %}
</div>
在<span class="inline-span purple">主题配置文件</span>中添加字段
在<span class="inline-span purple">主题配置文件</span>中添加以下字段开启此功能：
article_end_tag:
enable: true
完成以上设置之后，在每篇文章之后都会添加“本文结束”标记。
设置点击出现心心效果
把js文件love.js放在yoursite/themes/next/source/js/src下，更新yoursite/themes/next/layout/_layout.swig文件，在末尾添加以下代码(如果存在就不必添加了)：
{% include '_custom/special_effects.swig' %}
在yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码：
{% if theme.special_effects.love %}
<script type="text/javascript" src="/js/src/love.min.js"></script>
{% endif %}
最后在<span class="inline-span purple">主题配置文件</span>任意位置添加如下代码即可：
special_effects:
love: true
添加背景音乐(方法1,已经弃用)
在yoursite/themes/next/source/js/src下新建backgroundmusic.js文件，内容如下：
$(function() {
var player = $('#background-audio')[0];
$('.site-nav .menu .menu-item.menu-item-backgroundmusic a').click(function() {
if (player.paused) {
player.play();
$(this).html('<i class="menu-item-icon fa fa-fw fa-pause"></i><br>暂停');
} else {
player.pause();
$(this).html('<i class="menu-item-icon fa fa-fw fa-play-circle"></i><br>播放');
}
});
})
更新yoursite/themes/next/layout/_layout.swig文件，在末尾添加以下代码(如果存在就不必添加了)：
{% include '_custom/special_effects.swig' %}
在yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码：
{% if theme.menu.backgroundmusic %}
<script type="text/javascript" src="/js/src/backgroundmusic.js"></script>
<audio id="background-audio" hidden="hidden" loop="loop">
{% for music_url in theme.special_effects.backgroundmusic %}
<source src="{{ music_url }}" type="audio/mpeg">
{% endfor %}
</audio>
{% endif %}
修改<span class="inline-span purple">主题配置文件</span>(部分其他内容省略)
menu:
backgroundmusic: javascript:;
menu_icons:
backgroundmusic: play-circle
最后在<span class="inline-span purple">主题配置文件</span>任意位置添加如下代码即可：
special_effects:
backgroundmusic:
- mp3地址1(本地和互联网资源都行)
- mp3地址2(本地和互联网资源都行)
添加背景音乐(方法2,有点复杂)
首先先给出依赖吧，这里主要用到了两个模块:
artDialog 用来进行弹出窗口
Amazing Audio Player 音乐播放器
在yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码：
{% if theme.menu.backgroundmusic %}
<script type="text/javascript">
var playerHtml = '\
<div class="demo-slider" id="player">\
<link rel="stylesheet" type="text/css" media="all" href="/js/src/player/initaudioplayer.css">\
<div id="amazingaudioplayer-8" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;">\
<ul class="amazingaudioplayer-audios" style="display:none;">\
'
{% for item in theme.special_effects.backgroundmusic %}
playerHtml += '\
<li data-title="{{ item.title }}" data-image="{{ item.image }}">\
<div class="amazingaudioplayer-source" data-src="{{ item.src }}" data-type="audio/mpeg"></div>\
</li>\
'
{% endfor %}
playerHtml += '\
</ul>\
</div>\
</div>\
'
</script>
<script type="text/javascript" src="/js/src/player/dialog-plus.js"></script>
<script type="text/javascript" src="/js/src/player/jquery.js"></script>
<script type="text/javascript" src="/js/src/player/amazingaudioplayer.js"></script>
<script type="text/javascript" src="/js/src/player/initplayer.js"></script>
{% endif %}
最后在<span class="inline-span purple">主题配置文件</span>任意位置添加如下代码即可：(其中title是音乐名称，image是音乐海报地址，src是音乐地址)
special_effects:
backgroundmusic:
- title: 华胥一梦
image: /js/src/player/music/华胥一梦.jpg
src: /js/src/player/music/阿鲲-华胥一梦.mp3
- title: 天下第一
image: /js/src/player/music/天下第一.jpg
src: /js/src/player/music/麦振鸿,罗坚 - 天下第一.mp3
- title: 雪见—仙凡之旅
image: /js/src/player/music/雪见—仙凡之旅.png
src: /js/src/player/music/麦振鸿 - 雪见—仙凡之旅.mp3
大家可以研究下initplayer.js文件，详细的实现过程就不叙述了。
播放器通过上面的音乐图标可以唤出。
开启代码隐藏功能
在yoursite/themes/next/source/js/src下新建collapse-code.js文件，内容如下：
$(function() {
var index = 0;
$('figure').each(function() {
var children = $(this).find('table tbody tr td.code div');
if (children.length > line_limit) {
index++;
var collapse_item = $('<h6><i class="fa fa-chevron-up"></i><span class="collapse-label">收起</span></h6>');
$(this).prepend(collapse_item);
var table = $(this).find('table');
var div = $('<div></div>');
table.remove();
div.append(table);
$(this).append(div);
$(this).find('h6').click(function() {
if (div.is(':hidden')) {
collapse_item.find('i').removeClass('close');
collapse_item.find('span.collapse-label').html('收起');
} else {
collapse_item.find('i').addClass('close');
collapse_item.find('span.collapse-label').html('展开');
}
var slide_time = children.length * 20;
if (slide_time < 200) slide_time = 200;
else if (slide_time > 2000) slide_time = 2000;
div.slideToggle();
});
}
});
})
更新yoursite/themes/next/layout/_layout.swig文件，在末尾添加以下代码(如果存在就不必添加了)：
{% include '_custom/special_effects.swig' %}
在yoursite/themes/next/layout/_custom/special_effects.swig里添加如下代码：
{% if theme.special_effects.collapse_code !== undefined %}
<script type="text/javascript">var line_limit = {{ theme.special_effects.collapse_code }}</script>
<script type="text/javascript" src="/js/src/collapse-code.js"></script>
{% endif %}
接下来还需要修改yoursite/themes/next/source/css/_custom/custom.styl文件
figure>h6 {
margin: 0;
padding: 8px!important;
cursor: pointer;
}
figure>h6>i {
margin-left: 30px;
margin-right: 10px;
transition: all 0.4s ease;
}
figure>h6>i.close {
transform: rotate(180deg);
color: #b63b4d;
}
修改<span class="inline-span purple">主题配置文件</span>，在任意位置下添加下列代码，数字表示超过多少行开启折叠功能。
special_effects:
collapse_code: 10
