开启字数统计hexo-wordcount
hexo-wordcount
安装hexo-wordcount插件
npm install hexo-wordcount --save
修改主题配置文件
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 %}
{% if theme.post_wordcount.wordcount %}
{{ wordcount(post.content) }}
{% endif %}
{% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
{% endif %}
{% if theme.post_wordcount.min2read %}
{% if theme.post_wordcount.item_text %}
{% endif %}
{{ min2read(post.content) }}
{% endif %}
{% endif %}
{% if theme.post_wordcount.item_text %}
{% endif %}
文章末尾统一添加“本文结束”标记
新建article-end-tag.swig
文件
在路径yoursite/themes/next/layout/_macro
中添加article-end-tag.swig
文件,其内容为:
{% if not is_index %}
本文完,如果您觉得本博客对您有帮助,请持续关注,谢谢!
{% endif %}
修改post.swig
文件
在yoursite/themes/next/layout/_macro/post.swig
中,在post-body
之后添加如下代码:
{% if not is_index %}
{% include 'article-end-tag.swig' %}
{% endif %}
在主题配置文件中添加字段
在主题配置文件中添加以下字段开启此功能:
article_end_tag:
enable: true
完成以上设置之后,在每篇文章之后都会添加“本文结束”标记。
设置点击出现心心效果
love.js
把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 %}
{% endif %}
最后在主题配置文件任意位置添加如下代码即可:
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('
暂停');
} else {
player.pause();
$(this).html('
播放');
}
});
})
更新yoursite/themes/next/layout/_layout.swig
文件,在末尾添加以下代码(如果存在就不必添加了):
{% include '_custom/special_effects.swig' %}
在yoursite/themes/next/layout/_custom/special_effects.swig
里添加如下代码:
{% if theme.menu.backgroundmusic %}
{% endif %}
修改主题配置文件(部分其他内容省略)
menu:
backgroundmusic: javascript:;
menu_icons:
backgroundmusic: play-circle
最后在主题配置文件任意位置添加如下代码即可:
special_effects:
backgroundmusic:
- mp3地址1(本地和互联网资源都行)
- mp3地址2(本地和互联网资源都行)
添加背景音乐(方法2,有点复杂)
首先先给出依赖吧,这里主要用到了两个模块:
artDialog 用来进行弹出窗口
Amazing Audio Player 音乐播放器
在yoursite/themes/next/layout/_custom/special_effects.swig
里添加如下代码:
{% if theme.menu.backgroundmusic %}
{% endif %}
最后在主题配置文件任意位置添加如下代码即可:(其中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 = $('收起
');
$(this).prepend(collapse_item);
var table = $(this).find('table');
var 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 %}
{% 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;
}
修改主题配置文件,在任意位置下添加下列代码,数字表示超过多少行开启折叠功能。
special_effects:
collapse_code: 10