開啟字?jǐn)?shù)統(tǒng)計(jì)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文件(重點(diǎn)在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 %}
文章末尾統(tǒng)一添加“本文結(jié)束”標(biāo)記
新建article-end-tag.swig文件
在路徑yoursite/themes/next/layout/_macro中添加article-end-tag.swig文件，其內(nèi)容為：
<div>
{% if not is_index %}
<blockquote class="blockquote-center">本文完，如果您覺得本博客對您有幫助而线，請持續(xù)關(guān)注拣宰，謝謝吟宦！</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
完成以上設(shè)置之后片任，在每篇文章之后都會添加“本文結(jié)束”標(biāo)記逗概。
設(shè)置點(diǎn)擊出現(xiàn)心心效果
把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,已經(jīng)棄用)
在yoursite/themes/next/source/js/src下新建backgroundmusic.js文件嚎朽，內(nèi)容如下：
$(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>(部分其他內(nèi)容省略)
menu:
backgroundmusic: javascript:;
menu_icons:
backgroundmusic: play-circle
最后在<span class="inline-span purple">主題配置文件</span>任意位置添加如下代碼即可：
special_effects:
backgroundmusic:
- mp3地址1(本地和互聯(lián)網(wǎng)資源都行)
- mp3地址2(本地和互聯(lián)網(wǎng)資源都行)
添加背景音樂(方法2,有點(diǎn)復(fù)雜)
首先先給出依賴吧柬帕，這里主要用到了兩個(gè)模塊:
artDialog 用來進(jìn)行彈出窗口
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是音樂海報(bào)地址，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/麥振鴻,羅堅(jiān) - 天下第一.mp3
- title: 雪見—仙凡之旅
image: /js/src/player/music/雪見—仙凡之旅.png
src: /js/src/player/music/麥振鴻 - 雪見—仙凡之旅.mp3
大家可以研究下initplayer.js文件陷寝，詳細(xì)的實(shí)現(xiàn)過程就不敘述了锅很。
播放器通過上面的音樂圖標(biāo)可以喚出。
開啟代碼隱藏功能
在yoursite/themes/next/source/js/src下新建collapse-code.js文件凤跑，內(nèi)容如下：
$(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>，在任意位置下添加下列代碼仔引，數(shù)字表示超過多少行開啟折疊功能扔仓。
special_effects:
collapse_code: 10
