我曾经写过一篇《关于MediaWiki的小工具（Gadget）》并对它做了简单的介绍，也尝试用它完成一些简单的功能，比如插入脑图或者是藏书。应该说它确实能帮助网站实现很多不错的功能。当然除了这些可能还有重要的一点，就是方便我们组织代码。
下文是我在网上找到的一篇博文，我进行了简单翻译（机翻）和修改。全篇主旨就是表明使用小工具可以有效地组织维基站点中的CSS和JavaScript代码，而无需将所有代码都保存在一两处进而使得维护工作量变复杂。
Gadgets扩展提供了一种方法，可以通过它选择加入或解除CSS和JavaScript，以便用户根据喜好进行切换。但是它的用途远远不止于此，它还可以作为一种包含大量CSS/JS的wiki代码组织方法。
通常情况下，所有的CSS和JS都被放入common.css和common.js中，也许还有mobile.css和mobile.js，最后也许也可能还有一个或两个特定于皮肤的文件 - 比如vector.css或timeless.css。除此之外，用户还可以选择在Special:MyPage/common.css和相应的附加页面上管理自己的代码文件，但仅此而已。如果你有数千行代码，那么，祝你组织起来好运——你可能会有一堆漂亮的注释作为标题，并依靠 ctrl+F 来编辑你打开的庞大文档。
进入小工具扩展。小工具可以有效地允许你在MediaWiki上拥有任何数量的CSS和JS文件：比如MediaWiki:Gadget-gadgetName.css和MediaWiki:Gadget-GadgetName.js等。通过使用hidden参数和default参数，你可以覆盖用户可以选择加入或解除的功能，这样用户就不会意外地进入他们的偏好并禁用站点的核心显示属性。
它是如何工作的？
小工具的定义都在MediaWiki:Gadget-definition页面上展示。小工具被分成以h2标题开头的不同段落。每个h2标题应该是系统消息的关键词，该消息显示该小部件的i18n字符串。例如，你可能有一个段落以如下所示开始：
== edit-gadgets ==
然后MediaWiki:Gadget-section-Edit-Gadgets（即MediaWiki:Gadget-section-后跟标题字符串）包含文本Edit Gadgets。你可以在任何主要的MediaWiki安装（包括维基百科）上查找小工具示例，以了解它是如何工作的。
一个典型的小工具定义可能看起来像这样：
* wikEd[ResourceLoader]|wikEd.js|wikEd.css
小工具的名称是wikEd，并且有一个JS文件和一个CSS文件。[ResourceLoader]标记小工具与ResourceLoader兼容。要实现这个小工具定义，需要创建一个名为MediaWiki:gadget-wiked的页面，其中包含一个i18n字符串，用于在用户首选项中简要说明小工具是什么。JS代码都在MediaWiki:wikEd.js中, CSS在MediaWiki:wikEd.css中。现在，CSS和JS将同时启用或同时禁用，根据用户的偏好，他们是否希望wikEd作为一个包被启用。
从理论上讲，如果我们想让wikEd始终可用，没有办法选择解除，我们可以将代码移动到MediaWiki:Common.css和MediaWiki:Common.js中。但是wikEd有大量的第三方代码，我们肯定不想每次加载Common.js时都要加载它，所以让我们看看如何在把它作为一个小工具的情况下完成这一点：
* wikEd[ResourceLoader|default|hidden]|wikEd.js|wikEd.css
对于最终用户来说，这是一种等效的情况，因为这些代码位于我们的公共文件中。
但是，我们可以做得更好——现在假设你创建了15个不同的CSS文件，并以一种深思熟虑和明智的方式将属性组合在一起。你希望利用gadget组织代码的能力，因此为每个gadget创建一行，其中包含gadget的名称和css文件，对吧？
事实上，大可不必。在单行中可以包含的代码文件数量没有限制。所以我们可以这样做：
* modularStyles[ResourceLoader|default|hidden]|gcdNotificationSignup.css|predictions.css|topSchedule.css|championFlashcards.css|flairs.css|gameinfo.css|rosterswapPortal.css|scoreboards.css
如果您将小工具视为用户可以启用或禁用的文件集合，则似乎在这里似乎相当多的文件。但是，如果我们将其视为要创建和加载的所有模块化CSS文件的全部列表，那么这使我们能够拥有一种更紧凑的方法来包括它们。
还有两样我们应该补充的：
* modularStyles[ResourceLoader|default|hidden|targets=desktop,mobile|type=styles]|gcdNotificationSignup.css|predictions.css|topSchedule.css|championFlashcards.css|flairs.css|gameinfo.css|rosterswapPortal.css|scoreboards.css
我们添加的两个参数是：
- `|targets=desktop,
mobile——这将在桌面和移动皮肤上加载小工具——不再像MobileFrontend那样复制粘贴从common.css到mobile.css`的所有内容。 |type=styles——但凡小工具只包含css，这将导致文件被提前加载——引用文档，使用样式模块只修改页面上已经存在的元素的样式（例如，当自定义皮肤，布局或文章内容时）。它将导致模块的CSS文件从页面HTML中包含，而不是通过JavaScript加载。
以小工具的方式维护代码
设置好一些小工具后，可以使用Special:gadgets中的界面查看所有小工具以及包含的所有文件和替换的i18n字符串（如果看到用尖括号括起来的页面名称，则意味着需要在MediaWiki:名称空间中创建该i18n字符串）。
但是，就我个人而言，我根本不喜欢使用这个界面；我更愿意在MediaWiki:gadgets-definition的紧凑视图中看到我所建内容的直接来源。
但默认情况下，那些让你直接单击并进入编辑代码页面的超链接并不存在。当然，我做了在这种情况下经常会做的事情，就是编写一些JavaScript来修复它：
$(function() {
if (mw.config.get('wgPageName') != 'MediaWiki:Gadgets-definition') return;
if (window.location.href.indexOf("history") > 0) return;
var urlPrefix = mw.config.get('wgServer') + '/MediaWiki:Gadget-';
function replaceWithLink(str) {
var link = document.createElement('a');
$(link).attr('href', urlPrefix + str);
$(link).html(str);
return link.outerHTML;
}
$('#mw-content-text li').each(function() {
var html = $(this).html();
var htmlParts = html.split('|');
for (i in htmlParts) {
if (htmlParts[i].endsWith('css') || htmlParts[i].endsWith('js')) {
htmlParts[i] = replaceWithLink(htmlParts[i]);
}
}
var text = htmlParts.join('|');
var firstPart = text.match(/^([^\|\[]*)/)[0];
if (firstPart) text = text.replace(firstPart, replaceWithLink(firstPart));
$(this).html(text);
});
$('#mw-content-text h2 .mw-headline').each(function() {
$(this).html(replaceWithLink('section-' + $(this).html()));
});
});
在MediaWiki:Gadgets-definition页面上（但不是在查看历史记录时），该代码将每个小工具名称替换为指向该小工具的链接，结果是你可以使用给定的接口视图导航到各个小工具页面。
最后，搜索呢？尽管把所有东西都放在一个文件里很糟糕，但不可否认的是，有时你会忘记你把CSS属性的定义放在哪里，或者你在哪里使用了expandtemplates以便你可以复制api参数名。你需要一些方法来搜索你所有的代码——幸运的是，有一个非常简单的方法！只需在MediaWiki名称空间中搜索你要查找的代码。你可以进行常规搜索，然后在高级选项卡中调整你想要看到的命名空间，也可以创建关键字搜索书签来为你进行限制。
