沉浸阅读

沉浸阅读

帖子详情页一键切换沉浸阅读模式,隐藏右侧边栏,主内容区扩展到 83

插件 v1.0.0 贰先生 阅读 付费 10 金币

功能

  • 帖子详情页一键切换沉浸阅读模式,隐藏右侧边栏(作者卡片 / 目录 / 二维码),主内容区扩展到 83.33% 宽度

  • 偏好持久化:通过 localStorage 保存用户选择,下次访问自动应用

  • 平滑过渡:布局切换带 0.3s 过渡动画

  • 图标切换:进入时 ti-book,退出时 ti-arrows-minimize

  • htmx 兼容:监听 htmx:after:swap 事件,boost 导航后自动重新初始化

  • 多语言(zh-cn / zh-tw / en-us)

文件结构

plugin/xnx_read/
├── conf.json
├── icon.png
├── readme.md                          # 历史文档(与本 README 同文件,macOS 大小写不敏感)
├── hook/
│   ├── thread_action_bar_body.htm     # 左侧操作栏注入切换按钮
│   ├── thread_end.htm                 # 帖子详情页加载 CSS / JS
│   ├── lang_zh_cn_bbs.php
│   ├── lang_zh_tw_bbs.php
│   └── lang_en_us_bbs.php
└── static/
    ├── css/read.css                   # 布局切换样式(body.read-mode)
    └── js/read.js                     # 切换逻辑 + localStorage 持久化

配置流程

  1. 后台「插件管理」安装并启用 xnx_read

  2. 访问任意帖子详情页,左侧操作栏最下方出现沉浸阅读按钮(书本图标)

  3. 测试:点击按钮切换 → 右侧边栏隐藏、主内容区扩展 → 再次点击还原;刷新页面后偏好自动保留

纯前端插件,无 PHP 后端、无数据库表、无后台配置项,开箱即用。 移动端(xl 断点以下)按钮自动隐藏。


截图 2
v1.0.0 2026-07-19
作者信息
贰先生
贰先生 贰先生
XIUNOX开发者
2
应用
13
安装
2026-06
加入
应用详情
应用分类 插件
版本 v1.0.0
适用版本 1.1
开发者 贰先生
下载量 12
浏览 96
更新时间 2026-07-19
发布时间 2026-07-19
最新回复 2
查看全部
  • Laity Lv3
    支持一下
    1天前
  • AI Lv1

    插件设计简洁实用,htmx:after:swap 监听处理得当,确保了 SPA 体验下的状态同步。

    几点优化建议:

    1. CSS 作用域:确保 .read-mode 类仅作用于当前视图容器,避免全局样式污染。
    2. 无障碍访问:建议为切换按钮添加 aria-labelrole="switch",提升屏幕阅读器兼容性。
    3. 移动端适配:虽然按钮在 xl 断点下隐藏,但需确认侧边栏在窄屏下是否已默认隐藏,避免布局冲突。
    4. 代码健壮性:JS 中 localStorage 读取建议增加 try-catch 或类型校验,防止异常数据导致脚本报错。

    整体实现符合现代前端最佳实践,期待后续更新。【以上由 AI 自动回复,仅供参考】

    1天前
查看全部评论 / 发表评论
完整评论功能在讨论帖中,点击前往