Live2dHistoire丨使用CDN加速live2d看板娘伊斯特瓦尔

Rintarou°

December 20, 2018

2201 views

No comments

3024 words

建站相关

近期有不少的小伙伴都在自己的博客挂上了萌萌的看板娘，但是看板娘模型的读取和构建会让博客的速度受到影响。

那么有没有什么方法既可以挂上萌萌的看板娘又不影响自己博客的加载速度呢？答案是肯定的，那就是使用我们的CDN来加速模型的读取。
我全都要.gif

前言

参考自星夜的蓝天博客

关于看板娘的安装和使用，我这里就不展开说明了。大家可以根据自己所使用的博客程序来找找看有没有相关的插件。这里我使用的是广树dalao的Live2d插件Live2dHistoire。

首先下载解压好插件后，插件的目录结构如下：

css
images
js
model
action.php
message.json
message_rem.json
Plugin.php

食用指南

修改插件

打开插件目录下的 js文件夹，找到 message.js和 live2d.js这两个文件。

修改message.js

打开 message.js文件，在 482行左右找到以下代码。

setTimeout(function(){
if(live2d_type == 0){
        loadlive2d("live2d",  message_Path+"/model/histoire/model.json");
    }else if(live2d_type == 1){
        loadlive2d("live2d",  message_Path+"/model/rem/rem.json");
    }
},1000);

将 message_Path+"/model/histoire/model.json"和 message_Path+"/model/rem/rem.json"的 /去掉，修改完成后如下：

setTimeout(function(){
if(live2d_type == 0){
        loadlive2d("live2d",  message_Path+"model/histoire/model.json");
    }else if(live2d_type == 1){
        loadlive2d("live2d",  message_Path+"model/rem/rem.json");
    }
},1000);

修改live2d.js

下载并替换live2d.js文件。

修改Plugin.php

打开 Plugin.php文件，在107行左右找到以下代码：

$Options = Helper::options()->plugin('Live2dHistoire');
    $Path = Helper::options()->pluginUrl . '/Live2dHistoire/';
    $siteUrl = Helper::options()->siteUrl;
    $live2d_type = $Options->live2d_type;

将 $path =后的值改为你在对象存储上的插件目录地址即可，修改后类似：$Path = 'https://cdn.anikore.xin/plugins/Live2dHistoire/';

修改完成后将插件目录上传到服务器以及相应的CDN对象存储上。

使用cdn加速

七牛云

这里我以七牛云CDN为例子，其他CDN类似。

在七牛云对象存储中找到 空间设置下的 跨域设置，然后新增规则。
七牛云 - 对象存储 - 跨域设置.png

来源填写你自己的博客域名地址
允许 Methods勾选Get（至少要勾选Get，其他随意）
允许 Headers填写 *

注意来源中的域名地址末尾不能带 /，否则将会报错。

设置完成后打开自己的博客，如果发现看板娘没有正确加载，而且 F12控制台显示 NO 'Access-Control-Allow-Origin' header is prisent on the requeseted resource。

那么还需要去cdn服务器控制台页面的header设置里增加 Access-Control-Allow-Origin字段，值填写你主站的名字或者是console中被拒绝访问的网址就可以了。
七牛云 - HTTP响应头配置.png
设置完成后等待CDN修改生效，打开博客看看，看板娘是不是已经可以正常加载了呢？