Tools是非官方社区Wiki。社区文档正在编写中，欢迎参与。 Wiki编辑答疑群：717421103
版本260324.1

全站通知：

Widgets

刷 历
编

阅读

    

2026-02-05更新

    

最新编辑:Lu_23333

阅读：

  

更新日期：2026-02-05

  

最新编辑：Lu_23333

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
迦洛翎
Lu_23333

介绍

Widget是MediaWiki的一个强大扩展，允许在Wiki页面中嵌入自定义的HTML、CSS和JavaScript代码。

由于安全考虑，MediaWiki默认不允许在普通页面中直接使用HTML和JavaScript，而Widget扩展通过创建独立的Widget页面，并限制编辑权限的方式解决了这个问题。

Widget的核心优势：

  • 安全隔离：Widget代码存储在专用的Widget命名空间中，只有特定权限用户可以编辑
  • 可复用性：一次创建，多处调用，类似模板的使用方式
  • 功能强大：可嵌入视频播放器、音频播放器、互动组件、第三方服务等
  • 参数化支持：通过Smarty模板引擎支持参数传递和动态内容

Widget的应用场景

  • 嵌入外部媒体（Bilibili视频、音频播放器）
  • 创建交互式组件（计算器、问卷调查、数据可视化）
  • 嵌入自定义HTML片段（复杂布局、特殊样式）
  • 实现动态功能（实时数据显示、API调用）


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

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

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

<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动画展示页面

<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 嵌入页面，并通过参数调用不同的页面内容，无论是在游戏角色信息展示还是比赛数据展示等场景中都能实现灵活的展示效果。

示例

Widget页面通常采用以下结构： 

<includeonly>
<div id="widget-root">
    <!-- HTML结构 -->
</div>
<style>
    /* CSS样式 */
</style>
<script>
    // JavaScript代码
</script>
</includeonly><noinclude>
{{#widget:Widget名称|参数1=值1|参数2=值2}}

== 使用说明 ==
=== 参数 ===
* '''参数1'''：参数说明
* '''参数2'''：参数说明

=== 示例 ===
<pre>
{{#widget:Widget名称|参数1=示例值}}
<&#47;pre>
</noinclude>

<includeonly>标签

  • 包裹实际的Widget代码（HTML、CSS、JavaScript）
  • 只有在Widget被调用时才会输出这部分内容
  • Widget页面本身不会显示这部分内容

<noinclude>标签

  • 包裹Widget的文档和使用示例
  • 只在Widget页面本身显示，调用时不输出
  • 用于说明Widget的用途、参数和使用方法

推荐结构组成：

  1. HTML容器：使用具有唯一ID的<div>作为根元素
  2. CSS样式：使用`<style>`标签定义样式，避免污染全局样式
  3. JavaScript代码：使用立即执行函数（IIFE）封装，避免变量污染
  4. 文档说明：在<noinclude>中提供清晰的使用文档

创建Widget

确保你有权限编辑Widget命名空间，这需要管理员或小部件编辑者用户组

步骤1：创建Widget页面

1. 导航至要创建的Widget页面（如https://wiki.biligame.com/tools/Widget:TestPage）

2. 点击"创建"开始编辑

步骤2：编写Widget代码

基础模板示例： 

<includeonly>
<div id="my-widget-<!--{$uniqueid|default:'default'}-->">
  <h3><!--{$title|escape:'html'}--></h3>
  <p><!--{$content|escape:'html'}--></p>
</div>

<style>
#my-widget-<!--{$uniqueid|default:'default'}--> {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

#my-widget-<!--{$uniqueid|default:'default'}--> h3 {
  margin-top: 0;
  color: #333;
}
</style>

<script>
(function() {
  const widget = document.getElementById('my-widget-<!--{$uniqueid|default:'default'}-->');
  if (widget) {
    console.log('Widget initialized');
    // 添加交互功能
  }
})();
</script>
</includeonly>

<noinclude>
== My Widget ==
这是一个示例Widget，展示如何创建基本的HTML组件。

=== 参数 ===
* '''title'''：标题文本（必需）
* '''content'''：内容文本（可选）
* '''uniqueid'''：唯一标识符（可选，用于同一页面多次调用）

=== 使用示例 ===
<pre>
{{#widget:MyWidget|title=欢迎使用|content=这是Widget内容}}
</pre>

=== 效果演示 ===
{{#widget:MyWidget|title=示例标题|content=这是一段示例内容}}
</noinclude>

步骤3 参数处理

Widget使用Smarty模板引擎处理参数，语法为<!--{$参数名}-->

参数语法： 

基本参数：<!--{$参数名}-->
默认值：<!--{$参数名|default:'默认值'}-->
转义处理：<!--{$参数名|escape:'html'}-->（防止XSS攻击）
条件判断：<!--{if $参数名}-->...<!--{/if}-->

安全注意事项：

  • 始终转义用户输入：使用`|escape:'html'`修饰符防止XSS攻击
  • 验证参数：使用`|validate`修饰符验证参数类型
  • 避免直接输出HTML：未经转义的参数可能导致安全漏洞

参数转义示例： 

<!-- 正确：转义HTML -->
<div class="title"><!--{$title|escape:'html'}--></div>

<!-- 错误：未转义（安全风险） -->
<div class="title"><!--{$title}--></div>

<!-- URL转义 -->
<a href="<!--{$url|escape:'url'}-->">链接</a>

<!-- JavaScript转义 -->
<script>
var message = "<!--{$message|escape:'javascript'}-->";
</script>

步骤4 测试Widget

1. 保存Widget页面

2. 在Widget页面的noinclude部分添加测试调用

3. 保存页面，刷新（purge）页面。

4. 在其他页面调用测试：{{#widget:Widget名称|参数=值}}


取自“https://wiki.biligame.com/tools/index.php?title=Widgets&oldid=53496”