CDN加速typecho插件版看板娘live2d伊斯特瓦尔

ps：不要问我为什么不拿伊斯特瓦尔的图片当头图，我找不到…………如果谁有在P站上有适合的头图，欢迎在底下评论分享给我，我马上就换！

前言

一个博客如果有一只萌萌的看板娘帮你看着，那感觉多棒，随时随地都想犯罪有没有……

安装

咳咳，关于看板娘的安装，在这里贴一下原作者广树大大的链接，Typecho插件版之给博客加上能陪聊的Live2d伊斯特瓦尔&蕾姆【ver1.1.3】,或者去我的友链里找也有，安装方法就如同正常的typecho插件的安装就行了，装好后，插件目录应该有这8个文件，(我推荐插件文件夹目录名都为Live2dHistoire)

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

对于正常使用，就已经足够了，但是不少小伙伴好奇能否用cdn加速模型的读取，因为在chrome后台上检查network的时候，模型的读取和构建是要花一定时间的，所以可否用cdn加速的确是一个比较重要的问题(其实我感觉不会快多少)，在此分享我使用腾讯云对象储存＋cdn加速cos的过程。

本地魔改message.js

首先将插件的压缩包解压到本地，然后进入插件文件夹中的js目录，会有这两个文件

用编辑器(不推荐记事本)打开message.js,大致在483行左右，可以找到如下代码

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);

将"/model/histoire/model.json"和"/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

ps：如果你是想直接改好的文件那么请点击这里下载我改好的live2d.js替换掉js目录下的live2d.js即可。

因为在cdn加速的时候一直遇到Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at /path/to/texure.png may not be loaded.的蛇皮报错，在google百度stackoverflow都找了一遍的情况下，大部分的回答是webGL没有开启跨域访问，加入"crossOrigin = "Anonymous""就行了，可是在live2d.js中明明有这个代码段(请预先格式化一下，否则你看到的只是一整行神奇的代码)

    r.prototype.loadTexture = function(t, e, i, r) {
        var n = new Image;
        n.src = i,
        n.crossOrigin = "Anonymous",
        n.onload = function() {
            var i = (0, o.getContext)(),
            s = i.createTexture();
            if (!s) return console.error("Failed to generate gl texture name."),
            -1;
            0 == t.isPremultipliedAlpha() && i.pixelStorei(i.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1),
            i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL, 1),
            i.activeTexture(i.TEXTURE0),
            i.bindTexture(i.TEXTURE_2D, s),
            i.texImage2D(i.TEXTURE_2D, 0, i.RGBA, i.RGBA, i.UNSIGNED_BYTE, n),
            i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MAG_FILTER, i.LINEAR),
            i.texParameteri(i.TEXTURE_2D, i.TEXTURE_MIN_FILTER, i.LINEAR_MIPMAP_NEAREST),
            i.generateMipmap(i.TEXTURE_2D),
            t.setTexture(e, s),
            s = null,
            "function" == typeof r && r()
        },

就在我百思不得其解的时候，html5gamedevs上的回答让我哭笑不得，原来是逻辑问题，交换一下如下两行代码即可

    n.src = i,
    n.crossOrigin = "Anonymous",

图像都接收回来了再开跨源意义在哪……
所有都做完后保存，退出，把整个插件解压出来的文件夹(修改后的)直接扔进腾讯云储存桶里面，差不多这样

对象储存的准备工作就完成了。

魔改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://asunaimg-12316.file.myqcloud.com/Live2dHistoire/';
保存，刷新页面，现在看板娘就从云储存桶上加载了，速度应该能快个100多ms(1秒等于1000ms，如果我没记错的话)
这就完了？NONONO，我们的目的是cdn加速(储存桶)，所以还要再搞搞事情

利用cdn加速储存桶读取

在次修改$path =，值修改为你cdn加速服务器上的插件目录地址，保存，刷新，你会发现你的看板娘出不来了哈哈……(逃……)，在chrome调试界面的console可以看到，是跨源访问出了问题，对于个人博客之类的，只需要去你的cdn服务控制台，找到CORS跨源访问规则，添加一个通配符*，表示全部网站都可以支持跨源访问就行了.

上图中的来源origin添加一个"*"(不包含引号)，操作建议前三个都勾起来，保存就可以了，接下来再刷新博客页面，看板娘就能比较快的出来了。

后话及一言接口使用方法

有些小伙伴可能运气不好，设置完后还不能正常显示，这时候需要按F12转到console选项卡，看看发生了什么，如果显示NO 'Access-Control-Allow-Origin' header is prisent on the requeseted resource,则你还需要去cdn服务器控制台页面的header设置里增加Access-Control-Allow-Origin字段，值填写你主站的名字或者是console中被拒绝访问的网址就可以了。

关于一言接口的使用，不难发现，语言主要是在plugin.php中处理的，主要是showHitokoto的这个函数，参照我的更改后的函数和原作者写的原函数自定义修改就可以了。

如果有什么问题的话可以在下方留言，我会不定时回复，poi。

版权声明：本文为原创文章，版权归星夜的蓝天所有。

本文链接：http://poi.ac/archives/33/

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

转载时须注明出处及本声明