前言与简介

经过对Xiuno BBS 4核心机制的深度研究，我成功实现了HTMX的深度集成。以清爽蓝色主题为基底，在不破坏原生逻辑的前提下，为纯原装Xiuno BBS带来现代化近乎SPA的体验。  

这意味着什么？

意味着更流畅、更现代的用户体验，同时保持 Xiuno 一贯的简洁和高效。

技术实现亮点

非侵入式改造

• 零核心代码修改，完全通过Hook机制实现
• 原生功能100%覆盖（目前仅限于此，插件兼容性保留）
• 渐进式增强：未改动验证码/附件上传等复杂交互

核心交互升级

无刷新全局导航

• 所有GET请求保持原URL结构，但实现内容动态替换
• 增加 `updatePagination` 事件解决分页器兼容问题
• 新增 `setActive` 函数替代jQuery依赖

纯HTMX表单处理

• 主题帖回帖：彻底脱离jQuery，通过 updatePostCount 事件同步计数，与HTMX本身的功能配合提供流畅体验
• 密码交互：属性自动生成加密字段，告别jQuery-MD5  
• 管理功能：基于Pico CSS重构模态框（这部分不依赖Bootstrap功能，但暂时依赖Bootstrap样式），删除回帖时触发 removePost 等事件实现原子化更新（普通管理操作则全页刷新确保没有奇怪的副作用）

改造后的 message.htm 成为事件中枢

大多数操作的（文字）反馈都会通过模态框和吐司框呈现。

新增事件：

• showModalSimple：显示模态框
• closeModal：关闭模态框
• showToast：右上角轻量吐司框通知

智能路由识别

通过全局变量精准控制渲染逻辑

/**
 * @var bool 是HTMX发起的请求吗？
 */
$IS_HTMX = isset($_SERVER['HTTP_HX_REQUEST']) || (isset($_SERVER['HTTP_HX_REQUEST']) && $_SERVER['HTTP_HX_REQUEST'] == 'true');
/**
 * @var bool 是通过翻页器访问的吗？
 */
$IS_IN_PAGINATION = isset($_REQUEST['IS_IN_PAGINATION']) && boolval($_REQUEST['IS_IN_PAGINATION']);

.

技术选型思考

HTMX的声明式特性与Xiuno的AOP架构完美契合：  

• 后端仅需微调输出HTML片段（通过现有Hook点）  
• 前端交互复杂度降低60%+（移除大量jQuery回调）  
• 传输体积减少约40%（局部更新优势）  

已知注意事项

插件页面（例如通知、排行榜、积分等页面）可能出现双重嵌套（HTMX正常工作的副作用）  

你看到的，是未来

这不是一个简单的“去 jQuery”项目，而是一次对传统论坛架构的重新思考：

我们不需要抛弃成熟的后端系统，也能拥有现代交互体验。 

HTMX 让服务端渲染应用焕发新生，而 Xiuno BBS 凭借其清晰的 Hook 机制和插件生态，完美适配这一理念。

更新记录

1.1.0（2025年7月27日）

• 新增：主页、论坛版块页面、个人中心、用户页面 里的“帖子列表”的无限滚动加载
• 新增：帖子页面、个人中心、用户页面 里的“回帖列表”的无限滚动加载
• 修改：process_pagination_to_htmx_trigger函数增肌了第二个参数，用来指示给前台的翻页器添加什么参数，为后续精细化控制打下基础。目前是写死的thread（代表threadlist，在前台会增加IS_IN_THREADLIST）和post（代表postlist，在前台会增加IS_IN_POSTLIST）
• 新增：兼容了xiuno第一方插件“我的回帖”

外观没有变化。有人说“ui不好看”，那确实。这个的外观和原装xiuno相差无几。但从一个熟悉的起点出发可以更容易理解。

1.0.0（2025年7月24日）

初次发布。实现核心 HTMX 集成： 无刷新导航、HTMX 表单提交、事件中枢、新版Pico CSS 弹窗、替代JQuery的自动 MD5 等。

截图

源码获取

见附件。

这只是一个开始。

当 HTMX 遇见 Xiuno BBS，

老树开新花，原味生未来。