给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

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

posted @ 2019-10-24 17:18  亚楠老猎人  阅读(3104)  评论(5)  编辑  收藏  举报