虹彩标题 — XIUNOX 插件详细介绍

插件名称：虹彩标题（oulin_rainbow_title）
版本：v1.0.1
适用系统：XIUNOX BBS v1.1+
作者：Oulin
许可证：MIT

一、插件概述

虹彩标题是一款为 XIUNOX 论坛帖子列表页标题添加绚丽彩色视觉效果的前端美化插件。通过纯 CSS background-clip: text 技术，让帖子标题文字呈现出彩虹渐变、七彩循环、随机配色等多种醒目效果，瞬间提升论坛页面的视觉吸引力。

插件采用零侵入式设计——不修改任何模板原文件，不新增数据库表，所有效果通过标准 Hook 注入实现，安全可靠。

二、核心特性

🎨 五种配色模式

✨ 动态流光动画

• 可选开启 CSS Animation 驱动的流光效果

• 三档速度可调：慢速（6s）、中速（4s）、快速（2s）

• 悬停时自动增强亮度与饱和度

• 纯 CSS 实现，无 JS 定时器，GPU 加速渲染

📱 移动端适配

• 独立移动端开关，可单独控制移动端效果

• 支持「静态彩色」和「完全关闭」两种降级方案

• 智能识别移动设备，自动应用降级策略

🎯 精准作用范围

• 仅在帖子列表页生效：首页、版块页、搜索页、用户帖子页、热门页、精华页

• 详情页完全不受影响：帖子内容页标题保持原色

• 全局统一配色：所有版块、所有帖子类型使用相同效果

🔧 模板无关设计

• 使用 a[href*="thread-"] 属性选择器自动识别帖子标题

• 不依赖任何模板 CSS 类名，适配所有已安装模板

• 支持自定义 CSS 类名扩展（高级用户）

三、后台设置说明

插件设置页面分为三个 Tab：

基础设置

高级设置

移动端设置

效果预览

后台内置实时预览面板，切换设置可即时查看效果，包含置顶帖、精华帖、普通帖三种预览样式。

四、技术实现

4.1 架构设计

┌─────────────────────────────────────────────────┐
│                    后台设置页                      │
│  setting.htm → setting.php → Service::saveSettings │
└──────────────────────┬──────────────────────────┘
                       │ 配置存储 (kv 表)
                       ▼
┌─────────────────────────────────────────────────┐
│                   前端注入层                       │
│                                                   │
│  header_link_after.htm                            │
│    └→ Service::generateCss() → 输出 <style>       │
│                                                   │
│  footer_js_after.htm                              │
│    └→ JS 扫描 a[href*="thread-"] → 添加 class     │
└─────────────────────────────────────────────────┘

4.2 CSS 生成逻辑

插件通过 OulinRainbowTitleService::generateCss() 动态生成 CSS，核心原理：

/* 基础规则 */
.ort-rainbow-title {
    background-image: var(--ort-bg) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline !important;
}

/* 彩虹模式 + 动画 */
.ort-rainbow-title {
    --ort-bg: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
}
.ort-rainbow-title {
    background-size: 200% auto !important;
    animation: ort-rainbow-flow 4s linear infinite !important;
}
@keyframes ort-rainbow-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

4.3 JS 类名注入

// 仅列表页执行，使用属性选择器匹配帖子标题链接
var links = document.querySelectorAll('a[href*="thread-"]');
links.forEach(function(el) {
    if (el.textContent.trim().length > 2) {
        el.classList.add('ort-rainbow-title');
    }
});

4.4 路由判断

$list_routes = ['forum', 'index', 'search', 'user_thread', 'my_thread', 'hot_thread', 'digest_thread'];
$is_list_page = in_array($route, $list_routes);

4.5 Hook 注册

五、安装与配置

5.1 安装步骤

1. 将 oulin_rainbow_title 目录上传至论坛 plugin/ 下

2. 进入后台 → 插件管理 → 找到「虹彩标题」→ 点击「安装」

3. 安装完成后点击「启用」

4. 点击「设置」进入配置页面

5.2 推荐配置

方案 A：低调优雅

• 配色模式：主题色适配

• 动画效果：关闭

• 移动端：静态彩色

方案 B：绚丽夺目

• 配色模式：彩虹渐变

• 动画效果：开启，中速

• 移动端：静态彩色

方案 C：活力随机

• 配色模式：随机配色

• 动画效果：开启，快速

• 移动端：关闭

5.3 卸载

后台 → 插件管理 → 虹彩标题 → 卸载。卸载后自动清除所有配置数据，无任何残留。

六、常见问题

Q1：安装了没效果？

排查步骤：

1. 确认插件已启用（后台 → 插件管理）

2. 确认「启用虹彩标题」开关已打开

3. 清除 tmp/ 目录缓存文件

4. 强制刷新浏览器（Ctrl+Shift+R）

Q2：动画卡顿怎么办？

• 关闭动画效果，使用静态彩色模式

• 降低动画速度（选择「慢速」）

• 移动端建议直接关闭动画

Q3：详情页标题也变色了？

正常情况不应发生。如果出现问题：

• 检查是否手动在其他地方添加了 .ort-rainbow-title 类名

• 检查「自定义 CSS 类名」设置是否误填了详情页选择器

Q4：可以只对某些版块生效？

v1.0.1 版本起已移除版块控制功能，插件全局统一生效。这是为了简化配置并避免跨版块样式不一致的问题。

Q5：置顶帖/精华帖会使用金色吗？

不会。v1.0.1 版本起所有帖子（包括置顶、精华、普通帖）统一使用相同的配色效果，不再有特殊帖独立配色。

Q6：支持自定义颜色？

支持。选择「自定义配色」模式，在输入框中填写 CSS 颜色值，用逗号分隔：

#ff0000, #ff7f00, #ffff00, #00ff00, #0000ff

七、性能说明

八、更新日志

v1.0.1

• 🐛 修复动画不生效：CSS 改用 background-image 替代 background 简写

• 🐛 修复 JS 选择器不匹配：改用 a[href*="thread-"] 属性选择器

• ⚡ 精简 JS：移除 MutationObserver/fetch 拦截器

• 🧹 移除版块控制功能，插件全局统一生效

• 🧹 移除置顶/精华帖独立配色

v1.0.0

• 🎉 初始版本发布

• 支持五种配色模式

• 支持动态流光动画

• 支持移动端降级

九、文件结构

plugin/oulin_rainbow_title/
├── conf.json                           # 插件配置清单
├── install.php                         # 安装脚本（设置默认配置）
├── uninstall.php                       # 卸载脚本（清除配置）
├── upgrade.php                         # 升级脚本（清除缓存）
├── setting.php                         # 后台设置入口
├── readme.md                           # 说明文档
├── model/
│   └── OulinRainbowTitleService.php    # 核心服务类（CSS 生成、配置管理）
├── view/
│   └── htm/
│       └── setting.htm                 # 后台设置页面
└── hook/
    ├── header_link_after.htm           # CSS 注入 Hook
    ├── footer_js_after.htm             # JS 注入 Hook
    ├── model_inc_file.php              # Service 注册 Hook
    └── lang_zh_cn_bbs.php              # 语言扩展 Hook

十、兼容性

已有 4 位用户解锁