最近一直在折腾Hxeo的站点，发现自带的主题吗，没有搜索功能。决定自己改一个。
感谢 @bay1 大佬的文章，原文链接：https://segmentfault.com/a/1190000011917419
下面就是在hexo主题添加本地搜索功能的过程。
hexo-generator-searchdb插件可以生成一个xml格式的索引文件。之后再利用jQuery的ajax函数查询并处理生成的索引文件。
npm install hexo-generator-searchdb --save在 hexo 全局配置文件_config.yml最后添加下面的配置。
使用hitokoto和typed.js，实现hitokoto的打字效果。传送门
代码如下
<div class="hitokoto">
<span class="typed" id="hitokoto"></span>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/typed.js/2.0.11/typed.min.js"></script>
<script>
$(function () {
$.get("https://v1.hitokoto.cn/", function (data) {
var data = data;
var str = data.hitokoto + "　By "
var options = {
strings: [
//str + "退格效果^1000",
str + data.from,
],
typeSpeed: 80,
startDelay:300,
// loop: true,
}
var typed = new Typed(".hitokoto .typed", options);
})
});</script>JS判断访问网站的设备平台，跳转到对应优化的页面。
//平台、设备和操作系统
var system = {
win: false,
mac: false,
xll: false,
ipad: false
};
//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
//跳转语句，如果是手机访问就自动跳转到手机页面
if (system.win || system.mac || system.xll || system.ipad) {
//alert("PC");
} else {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//alert("微信浏览器");
} else {
//alert("手机");
}
}为网站添加鼠标点击特效。
添加下面代码到js文件中即可：
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});看到好多博客都有一个音乐播放器，有点心动。决定添加一个
在主题模板恰当的位置引入下面代码即可：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-autoplay="false" data-id="82450138" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F4645F"></div>
<script src="https://unpkg.com/meting@1.2.0/dist/Meting.min.js"></script>部分参数说明：