Widgets

Widget 介绍

Widget 是一种用于扩展页面功能的组件，在 Wiki 中它可以实现将外部内容嵌入到页面中。

在 Wiki 中调用 Widget 嵌入页面并通过参数调用不同页面教程

在 Wiki 的使用过程中，常常会有在页面中嵌入其他内容并根据不同参数展示不同信息的需求，以下将以具体实例为大家详细介绍相关操作方法。

示例一：第五人格选手页面嵌入选手生涯数据查询页面

• 假设我们有一个比赛数据展示网站（https://web.homeworkkun.top/%E8%B5%9B%E4%BA%8B%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA/playershow ）
• 该网站支持通过 “#选手ID” 的形式访问选手数据，例如 “https://web.homeworkkun.top/%E8%B5%9B%E4%BA%8B%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA/playershow#选手ID ”。
• 现在我们希望在 Wiki 页面中通过调用 Widget 的方式嵌入这些选手数据页面，并能根据不同的选手 ID 展示相应数据。
• 新建“Widget:选手生涯数据”页面

<iframe name="playershow" src="https://web.homeworkkun.top/%E8%B5%9B%E4%BA%8B%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA/playershow#<!--{$name}-->" frameborder="0" width="100%" id="framemain" style="width:100%;height:100%"></iframe>

• 修改选手模板，补充调用widget页面的代码，并且给出对应的传参

{{#widget:选手生涯数据|name={{{1|}}}}}

• 刷新选手页面，检查嵌入页面情况

示例二：NIKKE角色页面嵌入Spine动画展示页面

• 目前已经通过B站平台部署好Spine动画页面（https://wiki-dev-patch-oss.oss-cn-hangzhou.aliyuncs.com/res/nikke/spine/v_m.html ）
• 该页面支持通过 “#角色ID” 的形式展示对应角色的动画，例如 “https://wiki-dev-patch-oss.oss-cn-hangzhou.aliyuncs.com/res/nikke/spine/v_m.html#角色ID ”。
• 现在我们希望在 Wiki 页面中通过调用 Widget 的方式嵌入对应角色的动画展示功能。
• 新建“Widget:SpinePlayer”页面

<includeonly><iframe name="framemain" src="https://wiki-dev-patch-oss.oss-cn-hangzhou.aliyuncs.com/res/nikke/spine/v<!--{$m}-->.html?id=c<!--{$id}-->" frameborder="0" width="100%" id="framemain" style="width:100%;height:100%"></iframe></includeonly>

• 修改角色模板，补充调用widget页面的代码，并且给出对应的传参

{{#widget:SpinePlayer|id={{{ID}}}|m=_m}}

• 刷新角色页面，检查嵌入页面情况

通过以上步骤，我们就可以在 Wiki 页面中成功调用 Widget 嵌入页面，并通过参数调用不同的页面内容，无论是在游戏角色信息展示还是比赛数据展示等场景中都能实现灵活的展示效果。