Loolob

welcome to Loolob

0%

Hexo添加Live2D(本地部署)

发表于 更新于

Live2D 官方资料

Live2D Cubism 4 Editor

Cubism Web Framework

Cubism SDK Manual

Live2D + Hexo 本地化配置流程

Hexo切换为Next样式

使用live2d-widget需要将Hexo切换为Next样式，具体切换方式可参考Next官网

添加live2d-widget模块

live2d-widget 基本配置

直接下载其release版的源码，解压后丢到Hexo里的source目录中即可

修改部分配置

  1. 修改source/live2d-widget/autoload.js

    1
    2
    // live2d-widget解压后放在source目录中，配置autoload.js使其指向本地的live2d-widget目录
    const live2d_path = "/live2d-widget/";

  2. 修改themes/next/layout/_layout.swig

    1
    2
    3
    4
    <head>
      <!-- 在head添加如下内容 -->
      <script src="/live2d-widget/autoload.js"></script>
    </head>

  3. 修改_config.yml，在末尾添加

    1
    2
    live2d:
      enable: true

  4. 发布

    1
    hexo g d

完成以上步骤后打开本地Blog地址，可以看到live2d-widget模块已经嵌入界面，但仅有live2d-widget对话框，并无model加载，model的加载请查看后续步骤。

live2d-widget 进阶配置

翻看autoload.js以及README.md文件，可以知道live2d-widget只提供了在hexo上显示live2d的功能，并不提供live2d的模型。

autoload.js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			// apiPath: "https://live2d.fghrsh.net/api/",
			cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
		});
	});
}

可以看到live2d-widget指定了一个获取资源的url，当live2d-widget加载时，会通过这个url去加载model文件。该url可能已经废弃

继续查看README.md，作者提到了提供API的网址，以及API的github地址

于是考虑建立本地后台提供api给本地live2d-widget调用

搭建live2d_api

查看live2d_api项目的内容，发现该项目内提供了live2d的模型文件以及php代码，于是需要在本地搭建一个php server。这里决定采用nginx + php的简单搭配，先跑起api再说。

nginx安装以及配置

下载LTS版本解压后放在本地目录即可，注意路径不要中文

配置nginx/conf/nginx.conf文件，一下仅展示几项比较重要的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
server {
    # 这里配置nginx监听的端口号
    listen       7777;

    # ！！！注意 由于是在本地跑api提供文件给hexo用，需要开启跨域，Access-Control-Allow-Origin为本地hexo的url
    # #设置跨域配置 Start
    set $cors_origin "";
    if ($http_origin ~* "^http://localhost$"){
            set $cors_origin $http_origin;
    }

    # add_header Access-Control-Allow-Origin $cors_origin always;
    add_header Access-Control-Allow-Origin http://localhost:4000;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
    add_header Access-Control-Allow-Credentials true always;
    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
    add_header Access-Control-Max-Age 1728000 always;

    # 预检请求处理
    if ($request_method = OPTIONS) {
        return 204;
    }
    # #设置跨域配置 End

    # 这里指定live2d_api项目的根目录，让nginx的请求都指向该目录
    location / {
        root   D:\Code\NodeJsProject\loolob_blog\live2d_api;
    }

    # 这里配置对php的支持，注意fastcgi_pass的端口号，后面启动php服务器时要用到此端口号
    location ~ \.php$ {
        root           D:\Code\NodeJsProject\loolob_blog\live2d_api;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

PHP安装以及配置

由于是在windows上跑后端，所以下载windows支持版的php，下载源码后解压即可

复制php根目录中的php.ini-development文件并改名为php.ini后修改

1
2
3
4
5
; 将extension_dir指向本地php目录中的ext文件夹
extension_dir = "D:\Code\NodeJsProject\php\ext"

; fix_pathinfo的值改为1
cgi.fix_pathinfo=1

live2d-widget 调用本地接口所需的修改

  1. 修改autoload.js文件，使其的url指向本地

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    if (screen.width >= 768) {
    	Promise.all([
    		loadExternalResource(live2d_path + "waifu.css", "css"),
    		loadExternalResource(live2d_path + "live2d.min.js", "js"),
    		loadExternalResource(live2d_path + "waifu-tips.js", "js")
    	]).then(() => {
    		initWidget({
    			waifuPath: live2d_path + "waifu-tips.json",
    			apiPath: "http://localhost:7777/",
    		});
    	});
    }

  2. 修改waifu-tips.js文件，使其默认加载的第一个live2d model文件是1-1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    (function initModel() {
    	let modelId = localStorage.getItem("modelId"),
    		modelTexturesId = localStorage.getItem("modelTexturesId");
    	if (modelId === null) {
    		// 首次访问加载 指定模型 的 指定材质
    		modelId = 1; // 模型 ID
    		modelTexturesId = 1; // 材质 ID
    	}
           ......
       )

启动hexo以及live2d api

  1. 启动php服务，注意端口号就是给本地nginx使用端口号

    1
    .\php-cgi.exe -b 127.0.0.1:9000 -c .\php.ini

  2. 启动nginx服务

    1
    start nginx

  3. 启动hexo server

    1
    hexo s --debug

启动完以上服务后，通过localhost访问本地hexo主页应该就能看到live2d模型了