给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/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;

    width: 10em;

    opacity: 1 !important;

    left: 0;

}

这样一来，咱们的看板娘就在正确的位置了！

其他可选的模型

我们也可以选择其他的看板娘或者小动物！

直接覆盖上面代码中的jsonPath字段就好了

不联网的情况下怎么显示看板娘

思路很简单，就是把依赖的文件都放到本地来。

转移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

把这些文件，相应移动到上面所述位置，就可以断网也看到看板娘了！