WP with Live2D

引言

blog的浮动窗体小组件挺有意思加之

步骤

GitHub地址https://github.com/xiazeyu/live2d-widget.js

由于是node项目依赖于npm先clone下来项目

git clone https://github.com/xiazeyu/live2d-widget.js

然后

npm install

发现在项目目录下node依赖的文件夹已经出现了node_modules

观察项目目录下的package.json看看怎样启动项目

"scripts": {
    "update:submodule": "git submodule foreach git pull origin master",
    "_esdoc": "./node_modules/.bin/esdoc",
    "_changelog": "conventional-changelog --outfile CHANGELOG.md --release-count 0",
    "_titlechangelog": "sed -i '1i\\# Changelog\\n\\n' CHANGELOG.md",
    "inst:dev": "npm install -g commitizen && npm install -g conventional-changelog-cli && npm install",
    "build:dev": "./node_modules/.bin/webpack --progress --colors",
    "build:prod": "./node_modules/.bin/webpack --env prod --progress --colors && npm run build:module",
    "build:module": "./node_modules/.bin/webpack --env prod --progress --colors --config webpack.config.common.js",
    "build:docs": "git pull && npm run _changelog && git add CHANGELOG.md && npm run update:submodule && git add ghpages",
    "build:esdoc": "cp lib/stats.html ghpages/stats.html -f && npm run _titlechangelog && npm run _esdoc",
    "deploy:doc": "git pull && git checkout master && cd ghpages/ && git status && git add --all && git commit -m \"Update docs\" && git push origin HEAD:master --force && cd ..",
    "deploy": "build:prod && build:docs",
    "lint": "eslint --ext .js ./src",
    "commit": "git pull && git-cz",
    "v:major": "npm version major",
    "v:pmajor": "npm version premajor",
    "v:minor": "npm version minor",
    "v:pminor": "npm version preminor",
    "v:patch": "npm version patch",
    "v:ppatch": "npm version prepatch",
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "opencollective-postinstall"
  }

执行之

npm run build:dev

启动后由webpack提供动态调试打开dev.html

默认加载的modelizumi可以在项目目录\src\config\defaultConfig.js中的jsonPath修改,目前支持的model可从live2d-widget.jsCurrent supported models:找到,替换下面地址中红色部分即可

https://unpkg.com/live2d-widget-model-izumi@latest/assets/izumi.model.json

替换完成保存后webpack会重新加载配置js

观察dev.html其初始化方式和项目目录下\src\index.js中可配置参数,根据情况进行修改,生成的所需引用的js文件都在lib文件夹下

由于站点使用的是WordPress搭建的使用的是Php先装个叫Snippets的插件然后用其在php代码中插入<script>标签来完成加载生成的js

遇到的小问题,站点在加载model时很慢,有时半天也出不来就想到把网络请求的资源全部本地化,由于加载的model是可以在初始化时动态配置的所以把他们都下载后都存在站点上静态访问.

https://unpkg.com/live2d-widget-model-izumi@latest/assets/izumi.model.json

具体可以看看这个json中都访问了哪些资源,知道原理后也可以自己制作model,但貌似需要用Unity?

发表评论

电子邮件地址不会被公开。 必填项已用*标注