Hexo页脚养鱼效果
前言
页脚养鱼效果我也是折腾了蛮久的，奈何自己太菜，出现了一些问题也不知道怎么解决，查询一些博客，相关的描述也很简单。这里参考了Ln大佬的博客，总算是搞定了。
Ln’s Blog ——《如何在页脚养鱼》：https://weilining.github.io/204.html
最终效果在本站页脚，向下滑动即可看到。
操作方法
参考文章一共介绍了两种方法，第一种是有针对于Butterfly主题的修改。第二种方法是通用方法（其他也主题可参考）
方法一
打开站点的主题配置文件_config.butterfly.yml，找到inject，在bottom处直接引入以下链接：
- <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fishes.js"></script>方法二
找到footer.pug文件：\themes\butterfly\layout\includes\footer.pug，写入以下内容：
#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)}
}打开站点的主题配置文件_config.butterfly.yml，找到inject，在bottom处直接引入https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js
- <script src="https://cdn.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js"></script>注意：引入的js文件需要依赖jquery，所以在之前如果没有引用过的就需要在bottom处的最开始引入：
- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>这样效果就出现了。但是引入之后页脚会过高，需要修改footer.styl文件：\themes\butterfly\source\css\_layout\footer.styl:
#footer
position: relative
background: $light-blue
background-attachment: local
background-position: bottom
background-size: cover
if hexo-config('footer_bg') != false
&:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .1)
content: ''
#footer-wrap
position: absolute
padding: 1.2rem 1rem 1.4rem
color: var(--light-grey)
text-align: center
left: 0
right: 0
top: 0
bottom: 0
a
color: var(--light-grey)
&:hover
text-decoration: underline
.footer-separator
margin: 0 .2rem
.icp-icon
padding: 0 4px
vertical-align: text-bottom
max-height: 1.4em
width auto参考文章的技术流程写到这里就结束了，如果还有页脚文字被遮挡的情况，可以修改页脚的透明度，在\themes\butterfly\source\css路径下创建一个xxx.css文件，在文件中添加如下代码：
页脚半透明
/* 页脚半透明 */
#footer {
background: rgba(255, 255, 255, 0);
color: #000;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
backdrop-filter: saturate(100%) blur(5px)
}
#footer::before {
background: rgba(255,255,255,0)
}页脚全透明
/* 页脚透明 */
#footer {
background: transparent !important;
}然后将该文件引入到inject的head处：
- <link rel="stylesheet" href="/css/xxx.css">至此操作结束，去看看你的页脚有没有发生变化吧。
补充
还有一个更为简单的方法，引入带有颜色的页脚养鱼，效果如下：
只需要在_config.butterfly.yml文件中，找到inject，在bottom处直接引入：https://uuuuu.cf/js/fishes.js
- <script defer src="https://uuuuu.cf/js/fishes.js"></script> # 页脚养鱼(彩色)注意：该操作同样需要在之前引入jquery。
结尾
在魔改的道路上乐此不疲，虽然有时真的很“崩溃”。