在 Butterfly 主题的页脚养鱼

准备工作

首先必须引入需要的 jquery 文件，网址为 https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js

再引入必要的鱼儿游动的 js 文件，网址为: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js

将以上两个文件下载并保存到 Hexo 博客项目的 themes/butterfly/source/js/ 文件夹中。

打开 themes/butterfly/source/js/fishes.js 文件，找到以下代码:

$("body").append(
  '<script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>'
),

将 https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js 文件下载并保存到 themes/butterfly/source/js/ 文件夹中。

将上述代码注释, 改成在配置文件中引入相应的 js 文件。修改后的代码如下：

fish();
function fish() {
    return (
      $("#footer-wrap").css({
        position: "absolute",
        "text-align": "center",
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
      }),
      $("footer").append(
        '<div class="container" id="jsi-flying-fish-container"></div>'
      ),
      // $("body").append(
      //   '<script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>'
      // ),
      this
    );
  }

编辑主题配置文件

打开 _config.butterfly.yml , 找到 # Inject, 在 bottom 添加以上三个 js 文件的引用即可(cdn.jsdelivr.net目前在国内使用很不稳定, 改成本地文件夹使用更好).

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script src="/js/jquery.min.js"></script>
    # - <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>
    - <script src="/js/fishes.js"></script>
    - <script src="/js/fish.js"></script>

参考：https://weilining.github.io/204.html

===END===

---