Hexo添加鼠标点击效果

发表于 分类于 ， 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

鼠标点击特效

从各个站点里搜罗了以下四个比较常用的鼠标点击特效：

效果图

img

具体步骤

  1. 点击下方按钮下载相应的脚本，并置于 themes 目录下：

    礼花特效 爆炸特效 浮出爱心 浮出文字

    如果没有 cursor 这个目录，手动创建一下。

  2. 然后在主题自定义布局文件 themes_custom.swig 中添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    themes\next\layout\_custom\custom.swig{# 鼠标点击特效 #}
    {% if theme.cursor_effect == "fireworks" %}
      <script async src="/js/cursor/fireworks.js"></script>
    {% elseif theme.cursor_effect == "explosion" %}
      <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
      <script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
      <script async src="/js/cursor/explosion.min.js"></script>
    {% elseif theme.cursor_effect == "love" %}
      <script async src="/js/cursor/love.min.js"></script>
    {% elseif theme.cursor_effect == "text" %}
      <script async src="/js/cursor/text.js"></script>
    {% endif %}

    如果没有 _custom 文件夹或 custom.swig 文件，手动创建一下。

  3. 并且在主题布局文件 themes_layout.swig 中添加这一行（在 body 尾部）：

    1
    2
    3
    4
    5
    6
    7
    8
    themes\next\layout\_layout.swig      ...
          {% include '_third-party/exturl.swig' %}
          {% include '_third-party/bookmark.swig' %}
          {% include '_third-party/copy-code.swig' %}

    +     {% include '_custom/custom.swig' %}
        </body>
      </html>

  4. 在主题配置文件中添加以下代码：

    1
    2
    themes\next\_config.yml# mouse click effect: fireworks | explosion | love | text
    cursor_effect: fireworks

    这样即可在配置文件中一键快速切换鼠标点击特效。

完成啦！重新生成部署一下博客吧。