本功能的实现学习自Akilarの糖果屋中的魔改教程。

教程原文

侧栏按钮缩进
含 Aplayer 全局吸底音乐标签伸缩实例

在魔改过程中应该会遇到想要让一个按钮变成侧栏伸缩的形式，不需要它时就所在侧栏里，需要时才弹出。这点可以通过 fixed 定位属性和 hover 选择器做到。

  • fixed 定位会使得该元素的位置相对于浏览器窗口而固定，即使窗口滚动，它也不会移动。例如我希望 id 为 fixedElement 的按钮牢牢固定在右下角，可以定义它的定位属性：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #fixedElement{
      position: fixed;
      width: 60px
      /* 假定宽度是60px */
      bottom: 60px;
      /* 定义元素下边框与浏览器下边框的距离 */
      left: -30px;
      /* 定义元素左边框与浏览器左边框的距离 */
      /* 此时效果上此按钮应当缩进侧栏一半 */
    }

  • hover 选择器定义鼠标悬停到该元素上时的样式，例如，我希望鼠标悬停在上述这个 id 为 fixedElement 的按钮时，这个按钮能够完全显示。

    1
    2
    3
    #fixedElement:hover{
      left: 0px;
    }

  • 应用实例
    我们可以尝试隐藏 Aplayer 的全局吸底音乐标签，在 [Blogroot]\themes\butterfly\source\css\custom.css 中添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
      left: -66px !important;
      /* 默认情况下缩进左侧66px，只留一点箭头部分 */
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
      left: 0 !important;
      /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
    }

魔改具体步骤

在 Butterfly 主题配置文件 _config.yml 中的inject部分加入下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
inject:
  head:
    # Aplayer 的全局吸底音乐标签收起隐藏
    - '<style type="text/css">
        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
          left: -66px !important;
          /* 默认情况下缩进左侧66px，只留一点箭头部分 */
        }

        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
          left: 0 !important;
          /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
        }
      </style>'

然后就没了，就是这么简单！