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>

最终效果

mediawiki

可能存在的Bug:

skins/Vector/responsive.less,从文件名判断,可能在某些极端情况下会加载,彼时插图有无设定效果,无法预知,但本着少即是多的原则,暂时不做修改。

References
  1. MediaWiki在正文中直接插入图片地址,不加任何标记,即能显示图片,但无样式,不能自适应屏幕,体验不好。

Got Something To Say:

Your email address will not be published. Required fields are marked *

*

© 2006-2018. Powered by WordPress Romangie & Bootstrap. ICP No. 15008795