Widget:Search

MediaWiki 移动端搜索框优化方案

功能介绍

这是一个为 MediaWiki 站点优化移动端搜索体验的解决方案。主要特点包括：

1. 移动端搜索按钮优化

  - 在移动端视图中添加一个独立的搜索按钮
  - 点击按钮时弹出全屏搜索界面

2. 全屏搜索体验

  - 搜索框自动获得焦点
  - 搜索建议列表显示在搜索框下方
  - 半透明遮罩背景
  - 优雅的过渡动画效果

3. 搜索建议优化

  - 保留原有的搜索建议功能
  - 优化了建议列表的显示位置和样式
  - 添加了输入节流处理，提升性能

1. 界面布局

  - 原版：搜索框固定在导航栏，空间受限
  - 优化版：点击后全屏显示，更多操作空间

2. 用户体验

  - 原版：在小屏幕设备上操作不便
  - 优化版：全屏布局，输入更方便，建议列表显示更清晰

3. 视觉效果

  - 原版：简单的下拉建议
  - 优化版：添加了过渡动画和遮罩效果，更现代的视觉体验

1、复制本页代码块
2、在 `https://wiki.biligame.com/你管理的BWIKI/Widget:Search` 页面粘贴代码块
3、在 `https://wiki.biligame.com/你管理的BWIKI/MediaWiki:Sitenotice` 页面添加调用
{{#widget:Search}}
确保你的站点页面中有以下元素： - ID 为 navSearch 的搜索按钮容器 - ID 为 searchform 的搜索表单 - ID 为 searchInput 的搜索输入框'

  1. 代码依赖 jQuery，确保你的 MediaWiki 站点已启用 jQuery
  2. 如果你的站点使用了自定义的搜索框样式，可能需要调整 CSS 中的样式值
  3. 代码中的 visible-xs 类用于控制移动端显示，请确保你的站点支持这个类名，或根据需要修改

  - 支持主流移动端浏览器
  - 兼容 MediaWiki 1.31 及以上版本
  - 响应式设计，同时支持移动端和桌面端

如果需要修改样式，可以调整 <style> 标签中的 CSS：

  - 修改 #navSearch-button 的位置和大小
  - 调整 .search-overlay 的背景色和透明度
  - 更改 .overlay-header 的样式和布局