butterfly文章页面上下篇按钮UI调整

点击查看更新记录

更新记录

2022-03-16: 基本功能逻辑实现

1. 编写了电脑端的悬停卡片样式，且左右分离

2022-03-15: 基本功能逻辑实现

1. 实现了 UI 分离
2. 编写了手机端和电脑端的按钮样式
3. 编写了手机端的悬停卡片样式

点击查看参考教程

思路分析

我试图通过将文章底部的按钮改至左右两侧，类似翻页键，同时添加悬停动作，通过css对兄弟相邻元素的hover监测来控制显隐，悬停按钮时在页面正中显示对应文章卡片。

首先要解决的是按钮显示问题，如果是常显，有可能遮盖正文内容，尤其是手机端应该不会有足够的位置。所以尝试通过设置滚动事件监听，在页面滚动至原本上下页翻页的位置，也就是正文刚好读完的时候，才显示按钮。虽然会遮盖一部分评论，不过可以把按钮调整到正中，手机端调扁一点，毕竟不是正文的话，也不用太纠结遮盖问题。

然后就是文章卡片的参数取值问题，这部分可以沿用Blogroot\themes\butterfly\layout\includes\pagination.pug里的变量逻辑，这样就可以把问题局限在对UI的调整上。毕竟butterfly目前的上下篇很贴心的提供了封面，标题这两个元素。

至于卡片样式，虽然我一开始是想做成手机端侧栏卡片fixed样式那种风格，但是考虑到可用的可见参数其实也就封面和标题，还要顾及到手机端的显示情况，所以目前的打算是做成书签风格。一个圆角头像放封面，和一个矩形拼接放标题。布局上是打算电脑端做成横向排列，手机端做成纵向排列的。

魔改步骤

预览效果

1. 修改 [Blogroot]\themes\butterfly\layout\includes\pagination.pug, 调整布局。

DIFF

1. 新建 [Blogroot]\themes\butterfly\source\css\_custom\fixed-pagination.styl, 为了区分左右和 PC 端，手机端，我可是头一次这么卖力的写了三份 UI 哦。

STYLUS

1. 新建 [Blogroot]\themes\butterfly\source\js\fixed-pagination.js, 这个 js 的作用就是提供滚动监测了，这里因为翻页按钮是常态隐藏的，所以没有使用它来作为监测元素，我这里是使用评论区部分作为监测元素，即出现评论区了才显示换页按钮。

JS

1. 在 [Blogroot]\_config.butterfly.yml 的 inject 配置项引入 js 就大功告成啦。

YML