侧边导航栏

侧边导航栏

小工具稳定

通过MediaWiki API异步读取并解析原生MediaWiki:Sidebar页面的配置，在前端动态构建出层级分明、支持折叠、且包含全站搜索功能的侧边导航栏喵。

作者Gemini，GPT，Deepseek

本森级7号舰拉菲

+关注

一个为 WIKI 定制的动态响应式侧边栏导航小工具喵。它通过 MediaWiki API 异步读取并解析原生 MediaWiki:Sidebar 页面的配置，在前端动态构建出层级分明、支持折叠、且包含全站搜索功能的侧边导航栏喵。

特点

安全性

• 完全使用 DOM API 创建元素，杜绝 XSS。
• 链接生成经过严格过滤：拦截 javascript:/data:/vbscript:，拒绝协议相对链接，对绝对 URL 进行字符白名单检查。
• localStorage 操作均有 try-catch 保护，不会因隐私模式或存储满抛出异常。

健壮性

• mw.Title 和 mw.util.getUrl 均有防御性检查与降级方案。
• 解析空白行已过滤，不会产生空链接。
• resize 事件有防抖，且宽度无变化时直接跳过，性能良好。
• 手风琴折叠逻辑通过闭包安全捕获元素，无全局干扰。

无障碍性

• 可折叠子标题正确使用 <button> 元素（type="button"），原生支持键盘交互，且配有 aria-expanded 状态更新。
• 切换按钮有完整的 role、tabindex、aria-label、aria-expanded 支持。
• 搜索输入框有 aria-label。

功能

• 三级菜单支持，子标题与普通二级项智能区分。
• PC 端记忆侧边栏展开/折叠状态（localStorage），移动端始终默认隐藏且不保存状态。
• 自动滚动到当前激活项，深度优先选择最具体的激活元素，并处理了侧边栏初始隐藏的情况。
• 响应式自动折叠：宽度 < 992px 时强制隐藏，且不会污染记忆。
• 支持与BWIKI原导航栏共存，且互不干扰。

需要的页面

MediaWiki:Gadget-Sidebar.js

二选一即可

• 卡拉彼丘WIKI
• 剑星WIKI

MediaWiki:Gadget-Sidebar.css

二选一即可

• 卡拉彼丘WIKI
• 剑星WIKI

MediaWiki:Gadget-Sidebar

Sidebar：侧边导航栏。

MediaWiki:Gadgets-definition

此页面添加： * Sidebar[ResourceLoader|default]|Sidebar.js|Sidebar.css

示例

• 卡拉彼丘WIKI
• 剑星WIKI

作者

思路：

本森级7号舰拉菲

+关注

代码实现：

Gemini & GPT & Deepseek

MediaWiki:WikiparserHighlight.Test.js

MediaWiki:WikiparserHighlight.css