MediaWiki HTML 插入外鏈圖片

我的MediaWiki搭建在萬網(wǎng)虛擬主機(jī)之上，受到很多限制，不能通過經(jīng)典的GeSHi+Pygmentize實(shí)現(xiàn)語法高亮，最后曲線救國，找到了基于Alex Gorbatchev SyntaxHighlighter 的插件，不再依賴Python，終于像個Programming Wiki的樣子。

語法高亮解決了，另一個隱痛就是圖片問題同事的啟發(fā)下，申請了七牛云的免費(fèi)存儲空間，只要保持10元余額，即可享用自定義域名的10G空間，用戶體驗(yàn)還不錯，主要用于WordPress圖床服務(wù)。但回過頭來又想攻克MediaWiki的圖片，終于在昨天深夜，找到HTMLTags，安裝成功之后，簡單配置如下：

require_once( "$IP/extensions/HTMLTags/HTMLTags.php" );

$wgHTMLTagsAttributes['a'] = array( 'href', 'class' );

$wgHTMLTagsAttributes['img'] = array( 'src', 'style', 'class');

通過htmltag即可插入外鏈圖片：

class="mw-pic"

style="background:#fff; border:1px solid #ccc; padding:2px; max-width: calc(100% - 4px); box-shadow:5px 2px 6px #ccc;">

這夜熬的值，雖然早晨起來頭很痛，心里是快樂的。

進(jìn)一步優(yōu)化，將樣式表寫入模版，以減少HTML代碼對正文的干擾。進(jìn)入FTP，才知道MediaWiki的樣式都是Less，有些緊張，之前沒有接觸過。搜索到這個文章，還沒開始閱讀，發(fā)現(xiàn)那些冠名less的文件，也是可以直接寫傳統(tǒng)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手機(jī)視圖無效果，桌面視圖測試結(jié)果如下：

$ document.body.clientWidth

964 # 無效

$ document.body.clientWidth

965 # 生效

$ screen.availWidth

1920

和窗口的高度無關(guān)，只取決于寬度。

這樣不行，進(jìn)一步尋找全局控制文件，發(fā)現(xiàn)這個更像：

skins/Vector/components/common.less

桌面視圖不再受窗口大小的限制，Chrome、Firefox 兼容。

接下來修正手機(jī)視圖，決定不再猜測，而是通過理性分析找尋目標(biāo)文件。

Chome模擬手機(jī)，發(fā)現(xiàn)主樣式表是這個請求：

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 轉(zhuǎn)義，增強(qiáng)可讀性：

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是通過插件實(shí)現(xiàn)手機(jī)視圖的，在插件目錄，很快找到了這個文件：

extensions/MobileFrontend/minerva.less/minerva.mixins.less

添加代碼，iPhone6S，Chrome手機(jī)模擬器，Firefox響應(yīng)式設(shè)計模式都通過測試。簡化后的代碼：

最終效果：

可能存在的Bug：

skins/Vector/responsive.less，從文件名判斷，可能在某些極端情況下會加載，彼時插圖有無設(shè)定效果，無法預(yù)知，但本著少即是多的原則，暫時不做修改。

MediaWiki在正文中直接插入圖片地址，不加任何標(biāo)記，即能顯示圖片，但無樣式，不能自適應(yīng)屏幕，體驗(yàn)不好。

總結(jié)

以上是生活随笔為你收集整理的html如何添加外链图片代码,MediaWiki HTML 插入外链图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。