Hexo页脚养鱼效果

发表于 更新于 分类于 阅读次数：
本文字数： 2.6k 阅读时长 ≈ 2 分钟
本文将介绍如何在页脚添加养鱼效果

前言

页脚养鱼效果我也是折腾了蛮久的，奈何自己太菜，出现了一些问题也不知道怎么解决，查询一些博客，相关的描述也很简单。这里参考了Ln大佬的博客，总算是搞定了。

Ln’s Blog ——《如何在页脚养鱼》：https://weilining.github.io/204.html

最终效果在本站页脚，向下滑动即可看到。

操作方法

参考文章一共介绍了两种方法，第一种是有针对于Butterfly主题的修改。第二种方法是通用方法（其他也主题可参考）

方法一

打开站点的主题配置文件_config.butterfly.yml，找到inject，在bottom处直接引入以下链接：

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

方法二

  1. 找到footer.pug文件：\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. 打开站点的主题配置文件_config.butterfly.yml，找到inject，在bottom处直接引入https://gcore.jsdelivr.net/gh/xiabo2/CDN@latest/fish.js

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

    注意：引入的js文件需要依赖jquery，所以在之前如果没有引用过的就需要在bottom处的最开始引入：

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

  3. 这样效果就出现了。但是引入之后页脚会过高，需要修改footer.styl文件：\themes\butterfly\source\css\_layout\footer.styl:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    #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

  4. 参考文章的技术流程写到这里就结束了，如果还有页脚文字被遮挡的情况，可以修改页脚的透明度，在\themes\butterfly\source\css路径下创建一个xxx.css文件，在文件中添加如下代码：

    • 页脚半透明

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      /* 页脚半透明 */
      #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 #footer-wrap {
          color: var(--font-color);
      }

      #footer #footer-wrap a {
          color: var(--font-color);
      }

    • 页脚全透明

      1
      2
      3
      4
      /* 页脚透明 */
      #footer {
          background: transparent !important;
      }

    然后将该文件引入到inject的head处：

    1
    - <link rel="stylesheet" href="/css/xxx.css">

  5. 至此操作结束，去看看你的页脚有没有发生变化吧。

补充

还有一个更为简单的方法，引入带有颜色的页脚养鱼，效果如下：

只需要在_config.butterfly.yml文件中，找到inject，在bottom处直接引入：https://uuuuu.cf/js/fishes.js

1
- <script defer src="https://uuuuu.cf/js/fishes.js"></script> # 页脚养鱼(彩色)

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

结尾

在魔改的道路上乐此不疲，虽然有时真的很“崩溃”。

相关文章