无意间在某子比主题博主那看到这个样式，觉得挺有利于网站用户视觉效果体验的就搬了过来。由于小编用的是emlog系统代码函数无法适配，就拜托硬汉帮忙做成了插件。只适配了本站主题，其他主题可能样式不显示或者样式冲突等等。可自行DIY微调即可。插件在文末下载。

效果预览

202412041024017NFTym.jpg

前言简介

本文只介绍如何在子比主题上部署用户排行榜插件，提升网站用户的视觉体验。我们提供了两种实现方法，请按照教程步骤操作，以避免出错。让我们随心所欲，享受这个过程吧！

方法一：代码嵌入法

与其他技术大牛覆盖主题源文件的方法不同，我们只需在想要显示排行榜的地方嵌入代码即可。此代码会自动适配你的主题颜色，无需过多改动。

方法二：首页文件放置法

在首页文件中放置以下代码，即可实现用户排行榜的显示。

自定义CSS样式

代码优化与细节补充

实现首页全宽度放在下方代码的下面保存即可。
<main role="main" class="container">
实现首页内容顶部放在下方代码的下面保存即可。
<div class="content-layout">
然后，又看到有技术大牛修改的文件教程，展示用户的头像会旋转，再次CSS研究了一波，嗯，搞定。
.list-img{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.list-img:hover{transform: scale(1.15) rotate(720deg);}}

通过上述两种方法，你可以轻松地在子比主题上部署用户排行榜插件，提升网站的视觉效果和用户体验。希望这篇教程对你有所帮助！

Emlog系统插件

文末下载支持emlog系统的插件，并未适配全部模板，如出现样式不协调等可自行微调插件内的CSS代码。emlog后台上传插件后在需要展示的地方放入以下挂载字段。一般都是放在index.php或log_list.php文件内即可，然后到前台查看是否成功。

 <?=doAction('fsy');?>

插件下载