Waxy主题:自定义Canvas背景

本篇文章为Waxy主题设置中自定义CSS/JS的高级应用。

什么是Canvas?

Canvas 是 HTML5 中一个新特性,开发者绘制一系列图形。通过和JavaScript配合,可以使静态的图形动起来~

当然更加具体的内容,还请您自己学习,这里不做展开~

后面飞扬的花瓣就是基于Canvas技术实现的后面飞扬的花瓣就是基于Canvas技术实现的

如何自定义Canvas背景?

目前Waxy主题支持3种方式自定义Canvas背景,在文章后面,我提供了几个整理好的背景。

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();
        });
    });
});