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

基本原理与必备技能

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

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


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

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

安装地址:快速检索器(by user: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 - 隐藏域,用于约定搜索器查询的数据范围。
    • 使用modelvalue两个子参数定义初始查询条件,例如
|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 user:Yuee
avatar