SAO UI Plan -- Ranklist

点击查看更新记录

更新记录

2021-02-02:内测版v0.27

1. 实现SAO UI 风格的排行榜
2. 血条自动计算。
3. 血条颜色根据血量进行调整。
4. 支持自定义用户名和血量，等级等属性。
5. 可以用作打赏榜单或者友链排行。
6. 读者可以通过更改ID来实现排行榜复用，实现多个榜单。
7. 建议配合SAO-Utils-Web 2.0一起使用。

2021-02-03:内测版v0.39

1. 更改配置项，配合等级设定，使用基本血量和升级梯度计算最大血量
2. 新增方案，初版方案，血量百分比自定义，悬停提示语自定义
3. 新增方案，打赏方案，填写等级和打赏金额，自动计算血量。悬停提示语默认使用感谢**打赏￥**字样。
4. 更改打赏二维码分辨率。修复扫一扫无效的bug。

点击查看参考教程

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

下载初版方案 下载打赏榜方案

预览效果

写在最前

店长的碎碎念

2021年2月2日 星期二 晴转多云

今天是我的生日哒！

把SAO Utils Web也归入了 SAO UI PLAN ，复现SAO 风格界面算是告一段落啦。

这个榜单一开始是准备拿来当做打赏榜单的。可是临到头却发现没人打赏。（疯狂暗示）所以就只能拿来充当友链排行啦。

教程正文

• 初版方案:SAO_ranklist_base
• 打赏榜方案：SAO_ranklist_reward

初版方案需要自定义各种内容，例如等级和血量百分比，悬停提示语。相对的你可以把它当成任何榜单，例如友链排行、打赏榜单、龙王榜单。

新建:

新建,

修改,引入排行榜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为:

新建,控制显隐逻辑：

修改,添加CDN配置项和菜单选项：

调用榜单：榜单使用方法调用，可以加装在任何元素上，使用触发点击调用。此处提供加装到侧栏按钮的方案。修改,

虽然初版榜单也可以通过信息调整充当打赏榜单的功能，但是相对的信息表达上不是特别明晰。打赏榜方案做了一些细节上的优化，必要信息为打赏金额和打赏人名称以及等级。通过公式计算最大血量和血量百分比。最终效果是等级乘以血量百分比为打赏金额。悬停提示默认为感谢***打赏的￥**。相对初版方案,只需要修改SAO-ranklist.pug和配置文件中的配置项即可。

新建:

新建,

修改,引入排行榜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为:

新建,控制显隐逻辑：

修改,添加CDN配置项和菜单选项：

调用榜单：榜单使用方法调用，可以加装在任何元素上，使用触发点击调用。此处提供加装到侧栏按钮的方案。修改,

TO DO

实现SAO UI风格的血量排行榜

血量自动计算

血条颜色自动匹配

显隐功能提取，支持加装到任意按钮

曲面3D化