我们想给我们的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/live2d-widget-model-koharu@1.0.5/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;
10em;
opacity: 1 !important;
left: 0;
}
这样一来，咱们的看板娘就在正确的位置了！
其他可选的模型
我们也可以选择其他的看板娘或者小动物！
直接覆盖上面代码中的jsonPath字段就好了
- 黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
- 萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
- 白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
- 狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
- 小可爱：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
- 小可爱：https://unpkg.com/live2d-widget-model-koharu@1.0.5/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/live2d-widget-model-koharu@1.0.5/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/live2d-widget-model-koharu@1.0.5/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/live2d-widget-model-koharu@1.0.5/assets/mtn/idle.mtn
|- moc
| |- koharu.moc https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/moc/koharu.moc
| |- koharu.2048
| |- texture_00.png https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/moc/koharu.2048/texture_00.png
|- koharu.physics.json https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.physics.json
把这些文件，相应移动到上面所述位置，就可以断网也看到看板娘了！