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

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

前言


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

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

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

食用指南

1.修改插件

打开插件目录下的 js文件夹,找到 message.jslive2d.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对象存储上。

2.使用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修改生效,打开博客看看,看板娘是不是已经可以正常加载了呢?

jsDelivr

当然你也可以使用 Github+jsDelivr的方法来白嫖加速。白嫖真棒o( ̄▽ ̄)d

首先新建一个Github仓库,然后上传文件到仓库。
Create a New Repository.png
接着点击 release自定义版本号发布。
New release.png
就可以通过 jsDelivr来引用资源了。

使用方法:https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径


版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源,除此之外还可以使用某个范围内的版本,查看所有资源等。

好了,赶紧打开自己的博客看看效果吧~

如果觉得我的文章对你有用,请随意赞赏