首页动态展示横幅

一款适用于 XIUNOX（Xiuno BBS X）1.1 系列的首页视觉横幅插件，通过双排倾斜软件图标带、动态循环动画和自定义文案，为论坛首页增加醒目的内容入口。

插件信息

插件简介

首页动态展示横幅插件会在论坛首页主内容顶部展示一张响应式横幅。横幅左侧显示主标题、副标题和角标文字，右侧使用双排倾斜的软件图标卡片组成视觉背景。

管理员可以在后台控制横幅启用状态、文案、跳转链接、图标显示、循环动画及滚动速度。插件自动适配电脑端、手机端、亮色模式和暗色模式，并尊重操作系统的“减少动态效果”设置。

主要功能

1. 首页横幅展示

• 通过 index_main_start.htm 注入首页主内容顶部。

• 使用 XIUNOX 的 x-card card 组件样式。

• 不修改论坛核心文件。

• 关闭插件横幅后，不再输出对应前台结构。

2. 自定义横幅文案

后台可配置以下内容：

• 主标题

• 副标题

• 角标文字

• 跳转链接

默认文案：

主标题：生活明朗
副标题：万物可爱。
角标文字：ANHEYU.COM

3. 自定义跳转方式

• 支持设置 HTTP 或 HTTPS 跳转地址。

• 可选择在当前页面或新窗口打开。

• 链接留空时，横幅不会跳转到外部页面。

• 后端会再次验证链接格式，不依赖前端校验。

4. 双排倾斜软件图标带

插件内置多种技术与开发工具图标，包括：

• Java

• Docker

• Photoshop

• Node.js

• Webpack

• Pinia

• Python

• Vite

• Flutter

• Vue

• React

• CSS3

• JavaScript

• HTML5

• Git

• Apifox

图标以双排卡片形式排列，并整体倾斜展示，形成具有层次感的首页视觉背景。

5. 循环滚动动画

• 可独立启用或关闭横向循环动画。

• 支持设置 10–120 秒的滚动周期。

• 数值越小，滚动速度越快。

• 默认和推荐周期为 50 秒。

• 鼠标悬停横幅时暂停动画，方便查看图标。

6. 响应式设计

插件针对不同屏幕尺寸进行适配：

• 电脑端使用较大的横幅和图标卡片。

• 手机端自动缩小横幅高度、标题字号和图标尺寸。

• 窄屏下调整图标带位置和透明度，避免遮挡正文。

• 页面不会产生横向滚动条。

7. 暗色模式

• 自动跟随 XIUNOX 的 data-bs-theme="dark" 主题状态。

• 暗色模式下调整横幅背景、图标边框和阴影。

• 文案颜色使用 Bootstrap 主题变量，保持可读性。

8. 减少动态效果

当访客的操作系统启用“减少动态效果”时，插件会通过以下媒体查询自动停止滚动动画：

@media (prefers-reduced-motion: reduce)

该设计可提升无障碍体验，并减少不必要的视觉干扰。

后台设置页

版本 1.1.8 的后台设置页按照 WAJXY 插件规范重新设计。

页面组成

• Hero 插件信息区

• 运行状态与版本徽章

• 四格环境信息卡

• Pills 胶囊 Tab 导航

• 左侧说明、右侧开关的设置行

• 胶囊输入框

• 带单位的滚动周期输入组

• 粘性保存栏

• 居中渐变版权栏

设置分组

基础设置

• 启用首页横幅

• 新窗口打开链接

文案链接

• 主标题

• 副标题

• 角标文字

• 跳转链接

图标动画

• 显示软件图标

• 启用横向循环动画

• 图标滚动周期

保存交互

后台保存使用原生 JavaScript 和 Fetch：

• 保存时不刷新整个页面。

• 提交前执行浏览器表单校验。

• 提交过程中禁用保存按钮。

• 显示加载动画，防止重复提交。

• 保存成功后显示 Toast 和成功状态。

• Pills Tab 位置会存入 localStorage，刷新后自动恢复。

安装方法

1. 下载 wajxy_home_banner_v1.1.8.zip。

2. 登录 XIUNOX 后台。

3. 进入插件管理页面。

4. 上传并安装 ZIP 文件。

5. 启用“首页动态展示横幅”插件。

6. 打开插件设置页面，配置文案、链接和动画参数。

7. 保存后访问论坛首页查看效果。

ZIP 内部结构如下：

wajxy_home_banner_v1.1.8.zip
└── wajxy_home_banner/
    ├── conf.json
    ├── icon.png
    ├── logo.png
    ├── install.php
    ├── uninstall.php
    ├── upgrade.php
    ├── setting.php
    ├── README.md
    ├── CHANGELOG.md
    ├── hook/
    │   ├── header_link_after.htm
    │   └── index_main_start.htm
    └── static/
        ├── css/
        │   ├── admin.css
        │   └── wajxy_home_banner.css
        ├── js/
        │   └── admin.js
        └── icons/

推荐配置

默认展示效果

更安静的展示方式

如果希望减少动态干扰，可以采用以下配置：

• 显示软件图标：开启

• 启用循环动画：关闭

• 保留静态双排图标背景

更缓慢的展示方式

如果希望动画更加柔和，可以将滚动周期设置为：

70–100 秒

安全设计

• 设置页面仅允许管理员和后台管理组访问。

• 所有 POST 保存请求均执行 XIUNOX CSRF 校验。

• 文案字段会移除 HTML 标签并限制最大长度。

• 跳转地址仅允许有效的 HTTP 或 HTTPS URL。

• 前台输出使用 esc_html() 和 esc_attr() 转义。

• 后端会对滚动周期执行 10–120 秒的范围限制。

• 不依赖 jQuery 或 Alpine.js。

• 后台交互采用 Bootstrap 5.3、Tabler Icons 和原生 JavaScript。

常见问题

保存设置后首页没有显示横幅

请检查：

1. 插件是否已经安装并启用。

2. “启用首页横幅”开关是否开启。

3. 当前访问页面是否为论坛首页。

4. XIUNOX 模板缓存是否已更新。

5. 浏览器是否仍在使用旧版 CSS 缓存。

必要时可清理 XIUNOX 模板缓存并强制刷新浏览器。

横幅图标不滚动

请检查：

1. “显示软件图标”是否开启。

2. “启用横向循环动画”是否开启。

3. 操作系统是否启用了“减少动态效果”。

4. 鼠标是否停留在横幅上；悬停状态会暂停动画。

如何调节动画速度？

修改“图标滚动周期”：

• 数值越小，动画越快。

• 数值越大，动画越慢。

• 可设置范围为 10–120 秒。

• 推荐值为 50 秒。

是否支持手机端？

支持。手机端会自动缩小横幅高度、标题字号和图标尺寸，并重新调整图标带的位置与透明度。

是否支持暗色模式？

支持。插件会自动读取 XIUNOX 的 Bootstrap 主题状态，无需单独配置。

是否会创建数据库表？

不会。插件配置保存在 XIUNOX 的 Setting KV 中。

版本记录

v1.1.8

• 插件目录、设置键、CSS、DOM 和 Hook 变量统一改为 wajxy 前缀。

• 后台设置页按统一规范重新设计。

• 新增 Hero、环境卡、Pills Tab、规范开关行和粘性保存栏。

• 后台保存改为原生 Fetch 异步提交。

• 增加表单校验、加载状态、Toast 提示和 Tab 记忆。

• 使用统一的 icon.png 和 logo.png。

• 补齐居中渐变版权栏。

版权信息

Copyright 2026 金小颖论坛 版权所有。

首页动态展示横幅 wajxy_home_banner_v1.1.8

付费资源

已售 0

首页动态展示横幅

文件大小52.3 KB

提取码***暂无权限查看***

解压密码***暂无权限查看***

下载次数1 次

金币50

检测链接立即购买

参考示例重构为双排倾斜图标带，支持横向循环动画、响应式与暗色模式。