Hexo主题美化-鼠标点击特效

Hexo主题美化-鼠标点击特效

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

• 礼花特效

下载：礼花特效

• 爆炸特效

下载：爆炸特效

• 浮出爱心

下载：浮出爱心

• 浮出文字

下载：浮出文字

将脚本文件放置于 themes/next/source/js/cursor 目录下（如果没有相应的目录，需要自行创建，可以根据自己习惯命名）。

在主题自定义布局文件 themes/next/layout/_custom/custom.swig （如果没有 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 %}

在 themes/next/layout/_layout.swig 文件 body 标签中添加如下代码：

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

在主题配置文件 themes/next/_config.yml 中添加如下代码：

# mouse click effect: fireworks | explosion | love | text 
  cursor_effect: love