MediaWiki Metrolook皮肤如何给西里尔文侧边栏菜单添加自定义图标

解决方案 #

方案1（最优，无兼容问题）：用MediaWiki原生Sidebar语法绑定英文标识 #

你之前直接往Sidebar里插入<div>的用法不符合MediaWiki的侧边栏语法规范，MediaWiki本身支持给自定义菜单设置独立的英文key来生成可识别的ID，语法如下：

* 自定义英文key|要显示的西里尔文菜单名
** 子菜单英文key|子菜单西里尔文名称

比如你要显示Пример作为主菜单，就直接在MediaWiki:Sidebar中写* cv|Пример即可，系统会自动给这个主菜单生成ID为p-cv的元素，之后你写#p-cv h3:before { content: url(/img/white_tulip.png); }就能正常生效，不会出现乱码ID。

方案2（不用修改Sidebar，适合菜单顺序固定的场景）：用CSS顺序选择器定位 #

如果你不想修改现有侧边栏配置，可以直接按主菜单的排列顺序用nth-child选择器定位，不用关心菜单文本的语言：

/* 给第1个主菜单加图标 */
#mw-panel .portal:nth-child(1) h3:before {
    content: url(/img/white_tulip.png);
}
/* 给第2个主菜单加图标，修改nth-child的参数即可 */
#mw-panel .portal:nth-child(2) h3:before {
    content: url(/img/你的第二个图标地址.png);
}

如果选择器不生效，可按F12检查侧边栏主菜单的共同父容器类，替换代码中的.portal即可。

方案3（不用修改Sidebar，适合临时调试）：用CSS属性模糊匹配乱码ID #

你获取到的类似p-.D0.A6.D0.B2.D0.B5.D1.82.D1.8B:-list的ID是系统对西里尔文做的URL编码转写，CSS支持属性模糊匹配来定位这类元素，只要提取ID中唯一的特征串即可：

/* 把引号里的内容替换成你对应菜单ID里独有的特征编码串 */
[class*="D0.A6.D0.B2.D0.B5"]:before {
    content: url(/img/white_tulip.png);
}

内容的提问来源于stack exchange，提问作者TatR