为你的hexo博客添加全局吸底并且收入侧边栏的Aplayer

最终效果

1.收入侧边栏

找到butterfly配置文件APlayer.min.css把他下载下来,上图第一个

复制代码进入https://tool.oschina.net/codeformat/css格式化

由于.aplayer-body已经开启了fixed定位,只要简单修改一下left并设置最高优先级即可收入侧边栏

我们只需要在css中加入以下代码即可实现收入侧边栏

在代码最后加入即可

.aplayer.aplayer-narrow .aplayer-body {
    left: -66px !important;
}
.aplayer-body:hover {
    left: 0px !important
}

2.歌词颜色修改

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    opacity:1;
    overflow:visible;
    height:auto!important;
    min-height:16px
}

找到如上代码修改如下

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    /* 大小 */
    font-size: 17px;
    /* 颜色 */
    color: #1b82f1;
    opacity: 1;
    overflow: visible;
    height: auto !important;
    min-height: 16px;
}

.aplayer .aplayer-lrc p {
    font-size:12px;
    color:#666;
    line-height:16px!important;
    height:16px!important;
    padding:0!important;
    margin:0!important;
    transition:all .5s ease-out;
    opacity:.4;
    overflow:hidden
}

再修改上面css样式为

.aplayer .aplayer-lrc p {
    font-weight: 700;
    font-size:15px;
    color:#777;
    line-height:16px!important;
    height:16px!important;
    padding:0!important;
    margin:0!important;
    transition:all .5s ease-out;
    opacity:.4;
    overflow:hidden
}