首页 > 标签 > JavaScript

Hexo 主题简单实现搜索功能

最近一直在折腾Hxeo的站点,发现自带的主题吗,没有搜索功能。决定自己改一个。

感谢 @bay1 大佬的文章,原文链接:https://segmentfault.com/a/1190000011917419

下面就是在hexo主题添加本地搜索功能的过程。

生成搜索索引文件

hexo-generator-searchdb插件可以生成一个xml格式的索引文件。之后再利用jQuery的ajax函数查询并处理生成的索引文件。

获取 hexo-generator-searchdb 插件

npm install hexo-generator-searchdb --save

修改 hexo 全局配置文件

在 hexo 全局配置文件_config.yml最后添加下面的配置。

实现hitokoto打字效果

使用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 + "&#12288;By "

    var options = {
      strings: [
        //str + "退格效果^1000",
        str + data.from,
      ],
      typeSpeed: 80,
      startDelay:300,
      // loop: true,
    }
    var typed = new Typed(".hitokoto .typed", options);
  })
});</script>

JS判断是否为手机浏览器

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>

部分参数说明:

  • data-autoplay : 是否自动播放
  • data-id : 歌单id
  • data-server : 提供音乐的服务器
  • data-fixed : 是否在左下角浮动
  • data-listfolded : 播放列表是否折叠
  • data-order : 播放模式(随机、顺序、单曲)
  • data-theme : 主题颜色