效果图：

功能介绍：

1. 顶部轮播幻灯片

• Swiper 轮播实现，支持循环自动播放、多种切换动画；
• 图片铺满容器，hover 轻微放大动效，底部白色圆点指示器；
• 单独 CSS 类控制移动端一键隐藏，PC / 手机高度独立；
• 每张幻灯片支持新标签页跳转链接。

2. 四图卡片区域

1. 布局：PC 端 4 列网格，手机端自动变为 2 列；
2. 内容来源：根据你填写的 ID 批量读取文章 / 独立页面；
3. 视觉：PC / 手机高度独立，底部黑色渐变遮罩，可开关标题文字，移动端独立隐藏开关；
4. 交互：鼠标悬浮图片放大，点击新窗口打开对应内容；
5. 过滤处理：标题自动清理代码块、HTML 标签、特殊标记，防止排版错乱。

3. 右侧横向分页排行榜

1. 结构：顶部标题栏 + 左右翻页按钮，下方横向滑动榜单列表；
2. 分页逻辑：按设置的「每页条数」自动分页，左右按钮切换页面，首尾按钮自动置灰禁用；
3. 榜单样式：前三名序号标红 / 橙 / 黄高亮，每条包含标题 + 简短摘要；
4. 内容过滤：标题、摘要自动清除代码、HTML 脏标签；
5. 数据排序：支持浏览量、评论、点赞、发布时间多种排序；
6. 移动端独立隐藏开关。

部署教程：