如何在页脚养鱼

发表于 分类于 阅读次数： 本文字数： 2k 阅读时长 ≈ 2 分钟
默认

butterfly 主题的引入方法

效果就在页脚，是不是很想要？这里简述 butterfly 主题的引入方法，其他主题类似，实在不行建议更换 butterfly 主题

！！！不要修改源码，若已修改请恢复原样
在主题配置的 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js 即可

1
- <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>

调整页脚阴影透明度 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
}

修改源码实现方法（其它主题可参考此处）

  1. 先将扒来的 code 转为 pug

    htmltopug

    写进\themes\butterfly\layout\includes\footer.pug末尾

    1
    2
    3
    4
    5
    6
    7
    #jsi-flying-fish-container.container
       script(src='js/fish.js')
    style.

           @media only screen and (max-width: 767px){
           #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
        }

  2. 然后在 inject 引入 js: https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js

    1
    - <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>

  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 路径文件到当前页面即可。

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

建议将 js 保存到本地引用

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

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

（主题已经引入 jquery）调整了好久，还是没能解决报错，有人催更如何页脚养鱼就直接写出来了，报错交给各位解决吧。

参考

https://xiabor.com/714f.html#%E5%A6%82%E4%BD%95%E5%9C%A8%E9%A1%B5%E8%84%9A%E5%85%BB%E9%B1%BC