帮助:搜索器与检索工具

SerGawen 于1年前修改了此页面。
帮助
版权信息(CC BY-SA)编辑摘要版权信息(CC BY-NC)FAQHuiji缓存建站评估快速指南吐槽与讨论维基化页面图片邀请新用户站点等级站点评分保护页面表格编辑冲突编辑页面创建新页面恶意编辑Bot重定向页面短域名选择封禁公告模板灰机workshop快速插入项历史与回退链接命名常规视频教程上传媒体文件/1添加引用Wiki标记语言消歧义图片教程修改站点页脚修改站点导航学习地图页面分类移动页面用户权限站长指南章节变量AWB机器人BOOTSTRAPCSS样式库ExcelHTML灰机Wiki数据更新器简繁处理建站心得解析器扩展标签解析器函数命名空间魔术字模板模板参数使用CSS变量Tab切换SMongo素材库灰机停机坪文本处理工具图像处理工具XnView用户组限定的CSS/JS预设模板站点CSS编辑站点JS编辑主题编辑器折叠自动翻译字体搜索器与检索工具使用cockpit组件数学公式在灰机使用Less灰机Json编辑器可配置的站点功能API复杂模板狗头人APP灰机Wiki数据更新器\使用VS Code维护代码机器人开发者101零件MongoDB支持模块PythonMustache模板Semantic FormsSemantic Result Formats/echartsSemantic MediaWiki使用SPA提升访问速度推土机架构用Git管理MediaWiki在灰机使用Vue.js
简单
入门
进阶
复杂
开发
灰机帮助中心

搜索器、检索器、筛选器，是一种通过JS操作交互控件（表单、输入框、下拉框等）来改变页面内容的工具，对于游戏类WIKI来说很常见且必要。本文档介绍如何在灰机实现相应功能。

基本原理与必备技能

在不重新加载页面的情况下改变网页内容，需要通过JavaScript实现，因此开发和修改相关工具需要一定的JS知识，包括但不限于——

  • 基本的HTML/CSS原理
  • 原生JS
  • JQuery（MediaWiki控件）、VUE等第三方库
  • 灰机使用的Gadget扩展。
  • 一定的数据存储和查询机制，例如SMW和MongoDB数据。
  • Lua


方案一：简单易用的快速检索器

注意，需要配合MongoDB数据使用

安装地址：快速检索器（by Summerset）推荐
还在羡慕FF14 WIKI功能强大的物品搜索器吗？
还在为写不出来酷炫的数据检索工具而烦恼吗？
还在因为不会抄作业而被狗头人鄙视吗？
你可能需要了解一下“快速检索器”——

年轻人的第一款数据搜索工具，零JS/LUA代码需求，认识字就能搞定，开盒即食，即插即用！

示例

{{gsearch
|class=itemlist dark
|pagesize=8|searchonload=true
|selection = Funko Franchise::Game of Thrones
|type:text;
//model:Has Name;
//title:物品名称;
//placeholder:输入名称;
//bindSubmit:true;
//flag:i;
|type:dropbox;
//model:Year;
//flag:number;
//title:年份;
//options:-全部@default,2012-2012,2013-2013,2014-2014,2015-2015,2016-2016,2017-2017,2018-2018,2019-2019;
|type:checkbox;
//model:In Bundle;
//flag:boolean;
//text:属于捆绑包;
}}
实际效果如下，采用默认模板，可以指定自定义的模板进行结果封装（见下文）
正在加载GlobalSearch...
如果长时间没有完成加载，请联系管理员

准备工作

你的站点需要有以mongoDB存储的数据才能使用本零件进行数据查询。
详情参考：灰机的MongoDB支持

基本参数

  • selection：查询的数据条件，即约束本站mongoDB数据的范围，使用 <key>::<value>的形式查询
|selection = data_type::item

即查询所有key为“data_type”，value为“item”的数据。

  • pagesize: 单页显示的内容数量。默认值为20。
  • searchonload: 取值为true时，表单将在加载完成后自动提交一次搜索。
  • class：为整个表单区域添加一个或多个class，用于样式定义。如果你的站点是暗色风格，可考虑添加dark类。
  • template：结果的输出模板。
    • 如果希望使用mustache模板输出数据，可以将参数_id传递给解析器函数。该参数在json类型数据下为json页面名称，在tabx数据下为tabx名称后加行号。
    • 注意，只有结果的第一级数据会交给模板渲染，而结果中的object和array均不会传递给模板。
  • 所有未命名参数：每个参数均为一个表单控件的定义。详见下文。
  • sort：排序key，支持多个参数，用逗号隔开
  • order：排序方法，支持升序、降序，用逗号隔开，与sort参数一一对应，不足的会被默认升序补齐，超出的无效

表单控件

控件和控件之间以pipe符号（|）分隔。

参数值为key:value对。表单控件的配置参数书写规则——

  • 每行一个
  • 参数以//开头
  • 参数以;结尾

例如： 

...
|type:radio;
//title:品质;
//model:rarity;
//options:-全部@default,0-白色,1-绿色,2-蓝色,3-橙色;
...

上述代码定义了一个radio表单控件（单选框）

完整的key及其定义如下：

type 对应控件 html元素
text 文本框 <input type="text">
dropbox 下拉框 <select>与<option>
checkbox 单个复选框 <input type="checkbox">
radio 一组单选框 <input type="radio">
hidden 无 无
  • hidden - 隐藏域，用于约定搜索器查询的数据范围。
    • 使用model、value两个子参数定义初始查询条件，例如
|type:hidden;
//model:item_type_name;
//value:护甲;
//flag:i;

多个hidden域并列生效，可作为补充筛选条件，默认不填

参数说明

//model

该组控件对应的数据字段（仅支持一级节点）。单个搜索表单中，model不应当重复。

//title

显示在表单组上方的文本。

//options

用于type为dropbox和radio的选项。格式为取值-显示文本，每组数据之间使用逗号分隔（不建议使用回车）。

  • 在显示文本后增加@default可使该选项默认选中。
  • 如果取值为空，例如-全部，则该字段不会被筛选。
//flag

用于二次处理表单数据的标识。可填写值如下：

  • boolean：该选项的最终值将转化为布尔型。
  • number：该选项的最终值将转化为整数。
  • i：该选项将变为大小写不敏感的字符串（用于text），并且支持模糊搜索。
//bindSubmit

适用于文本框。该值为"true"时，在文本框上点击回车将进行提交。

用模板封装结果

默认模板模板:ItemListEntry。

会将所有内容以luaTable的形式dump出来

自定义模板

通过template参数进行自定义封装

注意，该模板读取的参数名为mongoDB实际返回结果的第一层结果。例如以下结果在返回列表中时：
{
    "data_id":"some entry name",
    "rarity":0,
    "visible":false,
    "effects":["splash","bleeding"],
    "meta":{
        "showInMarket":false,
        "unique":true
    }
}

则最终data_id，rarity，visible会传递给单个条目的模板，对应的参数就是{{{data_id}}}，{{{rarity}}}，{{{visible}}}。

案例

方案二：复杂搜索器

注意，需要JavaScript和Lua进行二次开发适配，不支持即插即用

复杂筛选+搜索效果图
安装地址：自定义搜索器（by Yuee）