如何使用 MediaWiki 扩展的 CSS 引用的图像资源？答案

【问题标题】：How can I use an image resource referenced by a MediaWiki extension's CSS?如何使用 MediaWiki 扩展的 CSS 引用的图像资源？
【发布时间】：2021-09-13 18:03:00
【问题描述】：

问题

如何将图像添加到 MediaWiki 扩展，以使它们可以被注册为 ResourceModules 的 css 文件引用？

情况

我正在开发一个利用 third party tool 的 MediaWiki 扩展，并且我将包含该工具的副本作为扩展资源的一部分。

该工具有js和css，我是这样包括的：

...
  "ResourceModules": {
    "ext.leaflet": {
      "scripts": "ext.leaflet/leaflet.js",
      "styles": "ext.leaflet/leaflet.css"
    }
  },
...

第三方工具也包含一个图像目录，其中包含leaflet.css 引用的各种图像，但我不知道把它放在哪里以便 MediaWiki 将它与 CSS 一起提供/JS。

图片网址解析为{SERVER}/ext.leaflet/images/marker-icon.png

【问题讨论】：

标签： mediawiki mediawiki-extensions

【解决方案1】：

您可以将图像资源放在扩展文件夹中的图像文件夹中，并在 CSS 中以相对方式引用它。

以 Echo 扩展为例：

图片在css中是这样引用的

background-image: url( ../../images/pending.gif );

https://github.com/wikimedia/mediawiki-extensions-Echo/search?q=pending.gif

并存储在这里： {SERVER}/extensions/Echo/images

https://github.com/wikimedia/mediawiki-extensions-Echo/tree/master/images

CSS 在这一行注册为ResourceModule

https://github.com/wikimedia/mediawiki-extensions-Echo/blob/97771e3369b7949db242f72551ac6efe803881e5/extension.json#L460

在您的 JS 中，您可以使用 mw.config.get('wgExtensionAssetsPath') 在我的情况下这将返回 /extensions

【讨论】：