MediaWiki HTML 插入外链图片
我的MediaWiki搭建在万网虚拟主机之上，受到很多限制，不能通过经典的GeSHi+Pygmentize实现语法高亮，最后曲线救国，找到了基于Alex Gorbatchev SyntaxHighlighter 的插件，不再依赖Python，终于像个Programming Wiki的样子。
语法高亮解决了，另一个隐痛就是图片问题1，一则MediaWiki配置上传很不容易，建站伊始，即尝试过，告败；二则，虚拟主机的空间有限，本身也存不了多少图片。一度使用Confluence的公开空间保存图片，但也不太方便。后来在同事的启发下，申请了七牛云的免费存储空间，只要保持10元余额，即可享用自定义域名的10G空间，用户体验还不错，主要用于WordPress图床服务。但回过头来又想攻克MediaWiki的图片，终于在昨天深夜，找到HTMLTags，安装成功之后，简单配置如下：
require_once( "$IP/extensions/HTMLTags/HTMLTags.php" ); $wgHTMLTagsAttributes['a'] = array( 'href', 'class' ); $wgHTMLTagsAttributes['img'] = array( 'src', 'style', 'class');
通过htmltag即可插入外链图片：
<htmltag tagname="img" src="http://assets.chenzixin.com/2017/01/qiu-dao-zhang-thumb.png" class="mw-pic" style="background:#fff; border:1px solid #ccc; padding:2px; max-width: calc(100% - 4px); box-shadow:5px 2px 6px #ccc;"> </htmltag>
这夜熬的值，虽然早晨起来头很痛，心里是快乐的。
进一步优化，将样式表写入模版，以减少HTML代码对正文的干扰。进入FTP，才知道MediaWiki的样式都是Less，有些紧张，之前没有接触过。搜索到这个文章，还没开始阅读，发现那些冠名less的文件，也是可以直接写传统CSS代码的。凭感觉，先修改了这个文件：
skins/Vector/screen-hd.less
.mw-pic {
background: #fff;
border: 1px solid #ccc;
padding: 2px;
max-width: calc(100% - 4px);
box-shadow: 5px 2px 6px #ccc;
}
iPhone6S手机视图无效果，桌面视图测试结果如下：
$ document.body.clientWidth 964 # 无效 $ document.body.clientWidth 965 # 生效 $ screen.availWidth 1920
和窗口的高度无关，只取决于宽度。
这样不行，进一步寻找全局控制文件，发现这个更像：
skins/Vector/components/common.less
桌面视图不再受窗口大小的限制，Chrome、Firefox 兼容。
接下来修正手机视图，决定不再猜测，而是通过理性分析找寻目标文件。
Chome模拟手机，发现主样式表是这个请求：
http://scalac.com/load.php?debug=false&lang=es&modules=mediawiki.ui.button%2Cicon%7Cskins.minerva.base.reset%2Cstyles%7Cskins.minerva.content.styles%7Cskins.minerva.icons.images%7Cskins.minerva.tablet.styles&only=styles&skin=minerva&target=mobile
unescape 转义，增强可读性：
http://scalac.com/load.php?debug=false&lang=es&modules=mediawiki.ui.button,icon|skins.minerva.base.reset,styles|skins.minerva.content.styles|skins.minerva.icons.images|skins.minerva.tablet.styles&only=styles&skin=minerva&target=mobile
MediaWiki是通过插件实现手机视图的，在插件目录，很快找到了这个文件：
extensions/MobileFrontend/minerva.less/minerva.mixins.less
添加代码，iPhone6S，Chrome手机模拟器，Firefox响应式设计模式都通过测试。简化后的代码：
<htmltag tagname="img" src="http://assets.chenzixin.com/2017/01/qiu-dao-zhang-thumb.png" class="mw-pic"></htmltag>
最终效果：
可能存在的Bug：
skins/Vector/responsive.less，从文件名判断，可能在某些极端情况下会加载，彼时插图有无设定效果，无法预知，但本着少即是多的原则，暂时不做修改。