給MediaWiki增加看板娘

我們想給我們的mediawiki增加個像我博客裏這樣的看板娘，那麼怎麼做纔好呢？

其實很簡單，只要在相應的模板文件裏增加指定代碼就好了！

修改模板文件

找到模板文件skins/Vector/VectorTemplate.php，然後查找如下內容

<div id="content" class="mw-body" role="main">

在其後面增加如下代碼

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
 
<script>
    L2Dwidget.init({
        "model": {
            "jsonPath": "https://unpkg.com/[email protected]/assets/koharu.model.json",
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

保存後，強制刷新，你會發現看板娘太大了，擋住了文字，我們可以t通過自定義樣式來將她改到合適的大小。

自定義樣式

比較簡單的方法就是修改相應皮膚的css文件，比如默認使用的是Vector，則我們進入如下路由MediaWiki:Vector.css，然後增加如下內容

#live2dcanvas {
    position: fixed;
    bottom: 20px;
    padding-top: 1em;
    width: 10em;
    opacity: 1 !important;
    left: 0;
}

這樣一來，咱們的看板娘就在正確的位置了！

其他可選的模型

我們也可以選擇其他的看板娘或者小動物！

直接覆蓋上面代碼中的jsonPath字段就好了

• 黑貓：https://unpkg.com/[email protected]/assets/hijiki.model.json
• 萌娘：https://unpkg.com/[email protected]/assets/shizuku.model.json
• 白貓：https://unpkg.com/[email protected]/assets/tororo.model.json
• 狗狗：https://unpkg.com/[email protected]/assets/wanko.model.json
• 小可愛：https://unpkg.com/[email protected]/assets/z16.model.json
• 小可愛：https://unpkg.com/[email protected]/assets/koharu.model.json

不聯網的情況下怎麼顯示看板娘

思路很簡單，就是把依賴的文件都放到本地來。

轉移L2Dwidget.min.js文件

去除skins/Vector/VectorTemplate.php中新增的內容。

修改skins/Vector/skin.json，增加文件映射，找到skins.vector.js，增加一行

"skins.vector.js": {
    "scripts": [
        "L2Dwidget.min.js", // 增加這行
        "collapsibleTabs.js",
        "vector.js"
    ],
    "position": "top",
    "dependencies": [
        "jquery.throttle-debounce",
        "jquery.tabIndex"
    ]
}

相應的，在skins/Vector下面增加文件L2Dwidget.min.js，內容和在線L2Dwidget.min.js裏面內容一樣。

這樣一來，依賴的js文件就拉取到本地了。

轉移L2Dwidget.min.js依賴的L2Dwidget.0.min.js文件

很簡答，和上面類似，將 在線L2Dwidget.0.min.js內容保存到本地，就放在wiki的根目錄下面你的wiki根目錄/L2Dwidget.0.min.js

轉移<script>中的js內容

將下面這段代碼放到skins/Vector/vector.js中:

L2Dwidget.init({
    "model": {
        "jsonPath": "https://unpkg.com/[email protected]/assets/koharu.model.json",
        "scale": 1
    },
    "display": {
        "position": "left",
        "width": 150,
        "height": 300,
        "hOffset": 0,
        "vOffset": -20
    },
    "mobile": {
        "show": true,
        "scale": 0.5
    },
    "react": {
        "opacityDefault": 0.7,
        "opacityOnHover": 0.2
    }
});

轉移json內容

上面的js代碼中依賴一個json文件，即https://unpkg.com/[email protected]/assets/koharu.model.json，我們可以將它也放到本地

上面代碼改爲

L2Dwidget.init({
    "model": {
        "jsonPath": "../koharu.model.json",
        "scale": 1
    },
    "display": {
        "position": "left",
        "width": 150,
        "height": 300,
        "hOffset": 0,
        "vOffset": -20
    },
    "mobile": {
        "show": true,
        "scale": 0.5
    },
    "react": {
        "opacityDefault": 0.7,
        "opacityOnHover": 0.2
    }
});

並不是說改爲了就完事OK了，因爲koharu.model.json同時依賴了一些文件，我們也要把他們放在本地，比如說

轉移json依賴的文件

查看shizuku.model.json文件，依賴的文件其實很好找

{"type":"Live2D Model Setting","name":"shizuku","model":"moc/shizuku.moc","textures":["moc/shizuku.1024/texture_00.png","moc/shizuku.1024/texture_01.png","moc/shizuku.1024/texture_02.png","moc/shizuku.1024/texture_03.png","moc/shizuku.1024/texture_04.png","moc/shizuku.1024/texture_05.png"],"physics":"shizuku.physics.json","pose":"shizuku.pose.json","expressions":[{"name":"f01","file":"exp/f01.exp.json"},{"name":"f02","file":"exp/f02.exp.json"},{"name":"f03","file":"exp/f03.exp.json"},{"name":"f04","file":"exp/f04.exp.json"}],"layout":{"center_x":0,"y":1.2,"width":2.4},"hit_areas":[{"name":"head","id":"D_REF.HEAD"},{"name":"body","id":"D_REF.BODY"}],"motions":{"idle":[{"file":"mtn/idle_00.mtn","fade_in":2000,"fade_out":2000},{"file":"mtn/idle_01.mtn","fade_in":2000,"fade_out":2000},{"file":"mtn/idle_02.mtn","fade_in":2000,"fade_out":2000}],"tap_body":[{"file":"mtn/tapBody_00.mtn","sound":"snd/tapBody_00.mp3"},{"file":"mtn/tapBody_01.mtn","sound":"snd/tapBody_01.mp3"},{"file":"mtn/tapBody_02.mtn","sound":"snd/tapBody_02.mp3"}],"pinch_in":[{"file":"mtn/pinchIn_00.mtn","sound":"snd/pinchIn_00.mp3"},{"file":"mtn/pinchIn_01.mtn","sound":"snd/pinchIn_01.mp3"},{"file":"mtn/pinchIn_02.mtn","sound":"snd/pinchIn_02.mp3"}],"pinch_out":[{"file":"mtn/pinchOut_00.mtn","sound":"snd/pinchOut_00.mp3"},{"file":"mtn/pinchOut_01.mtn","sound":"snd/pinchOut_01.mp3"},{"file":"mtn/pinchOut_02.mtn","sound":"snd/pinchOut_02.mp3"}],"shake":[{"file":"mtn/shake_00.mtn","sound":"snd/shake_00.mp3","fade_in":500},{"file":"mtn/shake_01.mtn","sound":"snd/shake_01.mp3","fade_in":500},{"file":"mtn/shake_02.mtn","sound":"snd/shake_02.mp3","fade_in":500}],"flick_head":[{"file":"mtn/flickHead_00.mtn","sound":"snd/flickHead_00.mp3"},{"file":"mtn/flickHead_01.mtn","sound":"snd/flickHead_01.mp3"},{"file":"mtn/flickHead_02.mtn","sound":"snd/flickHead_02.mp3"}]}}

這些文件的下載地址，以及轉移到的相應位置爲

wiki根目錄
|- mtn
|  |- idle.mtn                           https://unpkg.com/[email protected]/assets/mtn/idle.mtn
|- moc
|  |- koharu.moc                         https://unpkg.com/[email protected]/assets/moc/koharu.moc
|  |- koharu.2048
|     |- texture_00.png                  https://unpkg.com/[email protected]/assets/moc/koharu.2048/texture_00.png
|- koharu.physics.json                   https://unpkg.com/[email protected]/assets/koharu.physics.json

把這些文件，相應移動到上面所述位置，就可以斷網也看到看板娘了！