Matery主题自定义(三)页面特效

虽然 Matey 主题原生已经非常不错了，但总感觉少了些什么，就准备将我原来再 Fluid 主题上使用的特效配置过来

创建 buble.js

在 themes>hexo-theme-matery>source>libs>others 下创建一个新的文件 buble.js，将下面的代码 CV 到 buble.js 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// 上升的气泡
function buble () {
  $('.carousel-item, .pd-header').circleMagic({
    radius: 10,
    density: .2,
    color: 'rgba(255,255,255,.4)',
    clearOffset: 0.99
  });
} ! function (p) {
  p.fn.circleMagic = function (t) {
    var o, a, n, r, e = !0,
      i = [],
      d = p.extend({
        color: "rgba(255,0,0,.5)",
        radius: 10,
        density: .3,
        clearOffset: .2
      }, t),
      l = this[0];
    function c () {
      e = !(document.body.scrollTop > a)
    }
    function s () {
      o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a
    }
    function h () {
      if (e)
        for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
      requestAnimationFrame(h)
    }
    function f () {
      var t = this;
      function e () {
        t.pos.x = Math.random() * o, t.pos.y = a + 100 * Math.random(), t.alpha = .1 + Math.random() * d.clearOffset,
          t.scale = .1 + .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color =
            "rgba(" + Math.floor(255 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.floor(
              0 * Math.random()) + ", " + Math.random().toPrecision(2) + ")" : t.color = d.color
      }
      t.pos = {}, e(), this.draw = function () {
        t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y,
          t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath()
      }
    } ! function () {
      o = l.offsetWidth, a = l.offsetHeight,
        function () {
          var t = document.createElement("canvas");
          t.id = "canvas";
          t.style.top = 0;
          t.style.left = 0
          t.style.right = 0
          t.style.zIndex = 0;
          t.style.position = "absolute";

          l.appendChild(t);
          t.parentElement.style.overflow = "hidden"
        }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
      for (var t = 0; t < o * d.density; t++) {
        var e = new f;
        i.push(e)
      }
      h()
    }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
  }
}(jQuery);
buble()

_config.yml 配置

接着将这个文件在主题的配置文件（**_config.yml**）中 lib:js: 下引入，大约在 458 行

1
buble: /libs/others/buble.js

在主题的配置文件（**_config.yml**）中添加下面的代码

1
2
3
# banner 冒泡
buble:
  enable: true

引用

在 themes>hexo-theme-matery>layout>layout.ejs 这的 body 标签中添加下面的代码

1
2
3
4
5
6
7
8
9
10
<!-- 冒泡 -->
<% if (theme.buble.enable) { %>
    <script type="text/javascript">
        // 只在桌面版网页启用特效
        var windowWidth = $(window).width();
        document.write(
            '<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.buble) %>"><\/script>'
        );
    </script>
<% } %>

banner 冒泡的效果就完成了

点击鼠标弹出文字

点击鼠标弹出文字的步骤与实现冒泡的步骤相似，下面就开始如法炮制

创建 buble.js

在 themes>hexo-theme-matery>source>libs>others 下创建一个新的文件 popupText.js，将下面的代码 CV 到 popupText.js 中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 点击出字
var a_idx = 0;
jQuery(document).ready(function ($) {
  $("body").click(function (e) {
    // 点击弹出文字数组
    var a = new Array
      ("JavaScript", "Java", "C", "Python", "PHP", "Ruby", "Go", "C++", "Typescript", "C#");
    var $i = $("<span/>").text(a[a_idx]);
    a_idx = (a_idx + 1) % a.length;
    var x = e.pageX,
      y = e.pageY;
    $i.css({
      "z-index": 5,
      "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
    },
      3000,
      function () {
        $i.remove();
      });
  });
  setTimeout('delay()', 2000);
});

function delay () {
  $(".buryit").removeAttr("onclick");
}

_config.yml 配置

接着将这个文件在主题的配置文件（**_config.yml**）中 lib:js: 下引入，大约在 458 行

1
popupText: /libs/others/popupText.js

在主题的配置文件（**_config.yml**）中添加下面的代码

1
2
3
# 是否激活页面点击弹出文字, 只在桌面版网页启用特效
popupText:
  enable: true

引用

在 themes>hexo-theme-matery>layout>layout.ejs 这的 body 标签中添加下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 弹出文字 -->
<% if (theme.popupText.enable) { %>
    <script type="text/javascript">
        // 只在桌面版网页启用特效
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write(
                '<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.popupText) %>"><\/script>'
            );
        }
    </script>
<% } %>

点击鼠标弹出文字的效果就完成了

Matery 主题添加 js 特效的步骤都差不多，你按照我上面的步骤走，修改一些数据，就差不多可以效果展示了

Matery 主题自定义持续更新中…

参考

Hexo-Fluid主题美化