1. 在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js
    这里以butterfly主题为例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 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="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        - <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>

  2. 调整页脚阴影透明度 themes\butterfly\source\css\_layout\footer.styl

    1
    background-color: alpha($dark-black, .1)

    文章页页脚宽度多余导致出现横向滚动条，新建 xxx.css，添加以下 css 引入 inject 即可（若设置了全局背景去掉固定高度 height: 160px 引入即可）

    1
    2
    3
    4
    5
    6
    7
    /* 鱼塘固定宽度 */
    canvas:not(#ribbon-canvas), #web_bg {
        margin-bottom: -0.5rem;
        display: block;
        width: 100%;
        height: 160px
    }

  3. themes\butterfly\source\css\_layout\footer.styl 调整下 css (补充：调整页脚阴影透明度为 0.1)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    #footer-wrap
       position: absolute
       padding: 1.2rem 1rem 1.4rem
       color: $light-grey
       text-align: center
       left: 0
       right: 0
       top:0
       bottom: 0

       #footer
         if hexo-config('footer_bg') != false
           &:before
           position: absolute
           width: 100%
           height: 100%
           background-color: alpha($dark-black, .1)
           content: ''

  4. 引用 JS 报错 Uncaught ReferenceError: $ is not defined

  • 原因一：未引用 jquery 库 jquery.min.js 文件，或者说路径错误；
    解决办法：
    很简单，引用 jquery-X.X.X.min.js 这个 js 路径文件到当前页面即可。

    1
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    建议将 js 保存到本地引用

    1
    <script src="你的路径/jquery.min.js"></script>

  • 原因二：忽略了 HTML 中引入 jQuery 文件的顺序，要把 JQuery 库的引用放到第一个 <script> 引用前面，这样顺序执行后面的 js 文件才能识别 $。

  1. 补充
    还有一个更为简单的方法，引入带有颜色的页脚养鱼，只需要在_config.butterfly.yml文件中，找到inject，在bottom处直接引入：https://uuuuu.cf/js/fishes.js
    1
    - <script defer src="https://uuuuu.cf/js/fishes.js"></script> # 页脚养鱼(彩色)

    注意：该操作同样需要在之前引入jquery。