Web04 Customize Live2d

加入live2d

本文介绍了如何在博客网站中添加Live2d看板娘，并粗略介绍了Web开发相关知识。

live2d_api创作者信息

B站空间：FGHRSH的个人空间-FGHRSH个人主页-哔哩哔哩视频 (bilibili.com)

广州市聚德中学，2015届(2015年初中毕业)，比我大两岁，后考入广州城市职业学院

添加live2d

• 可以用别人的库

  <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

• 为了应用到全局，我在themes/hexo-theme-material/layout/layout.ejs文件中，添加如下代码：

  <script src="https://fastly.jsdelivr.net/gh/OliveTIen/live2d-widget-web@latest/autoload.js"></script>

  而且将路径修改为自己的仓库路径

第一个库

参考资料： https://github.com/stevenjoezhang/live2d-widget

该库利用rollup.js打包，将./src中的文件打包成根目录下的waifu-tips.js，阅读时，可以直接阅读./src中的相应文件。

之前谈到，只需要在模板文件添加一行代码就可以实现live2d。该代码加载了autoload.js 。

autoload.js做了两件事:

1. 加载同目录下的waifu.css``live2d.min.js``waifu-tips.js。
2. 加载完成后，调用waifu-tips.js中的initWidget函数(由于受rollup.js打包的影响，函数名可能发生改变/不便阅读，原函数名可以在./src/index.js中找到)
3. initWidget函数将参数config, apiPath传递给loadWidget函数，loadWidget函数新建一个Model(详见index.js第6行)
   • Model的定义参见/model.js/，里面定义了加载模型的方法
   • loadModelList()函数加载了apiPath(即live2D_API仓库根目录)中的model_list.json。model_list.json定义了要加载的模型列表

Model

Genshin live2d model: [Free 2 Use Live2D Vtuber] Bennett From Genshin Impact 原神 | HoYoLAB

• waifu-tips.json
  • 定义事件响应(回复词)
    • 鼠标hover click
    • 日期时间
    • 其他
• src/model.js
  • 在该文件中找到了代码${this.cdnPath}model_list.json，从而知道了api来源。其中cdnPath为api路径，例如https://github.com/fghrsh/live2d_api/
  • 我将api clone到本地，并修改api路径为自己的仓库路径
  • 该文件的loadModel函数调用了loadlive2d函数，该函数读取cdnPath的目标模型文件夹的index.json
  • 试图搜索loadlive2d函数，
    • live2d_widget_web有：
      • login.html
      • model.js(3处)
    • live2d_api未发现其来源。
    • 但是在github上找到其他项目Live2dOnWeb
      • src\SDKv2\mainV2.js中发现定义

添加自定义模型

第2个库：

Hexo添加自定义文件：Hexo博客添加自定义css和js文件 | Leonus

我想加载自定义模型，可是上面的方式无法加载moc格式(旧版本)模型。因此我又找到一个仓库Live2dOnWeb，它的优点有

• 可加载moc或moc3格式模型
• 将模型包和api统一，不必像上一个项目一样，反复调用

我尝试将文件直接放进hexo的source目录，可是没有显示。

看来只能调用其他库了。

我先在Live2dOnWeb加一个autoload.js，然后用类似的调用js代码的方式

未完待续

先分析

Web知识总结

rollup.js打包

第一个库之所以难读，是因为它将./src中的文件打包成根目录下的waifu-tips.js

同源与跨域

参考资料：

• 跨域：https://blog.csdn.net/my_web012/article/details/104834284

同源：协议、域名、端口都相同。

浏览器的同源策略：只有同源的文件才能互相访问，以保证安全性。这就是为什么有时候本地调试时，直接打开index.html显示空白。

跨域，就是用一个域下的文档请求另一个域下的资源文档。

Promise异步加载资源，appendChild(tag)动态加载元素

加载js资源，通过并行加快速度，同时保证在完全加载js脚本后才能执行下一步，这就是Promise的作用。

JavaScript异步编程

参考资料：JavaScript 异步编程 | 菜鸟教程 (runoob.com)

回调函数：

setTimeout是异步的。

Promise

参考资料：JavaScript Promise | 菜鸟教程 (runoob.com)

Javascript是单线程语言，若资源过大，加载过慢，会让人感觉阻塞。

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

当 Promise 被构造时，起始函数会被同步执行

Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）

CDN - 降低加载延迟

参考资料：https://zhuanlan.zhihu.com/p/28940451

加载live2d时用到了CDN。感谢CDN网站 https://www.jsdelivr.com/ 对我项目的加速支持。

CDN(Content Delivery Network)，内容分发网络，用来解决因分布、带宽、服务器性能带来的网络延迟问题。

• 架构(以最简单的CDN网络为例)
  • 由一个DNS服务器和几台缓存服务器组成
  • 用户点击URL，经过本地DNS系统解析，将域名的解析权交给CDN专用DNS服务器
  • CDN将全局负载均衡设备IP地址返回用户
• 服务模式
  分布式存储、负载均衡、网络请求的重定向、内容管理
  核心要件：内容管理、全局流量管理
• 特点
  • 本地Cache加速，提高大量图片和静态页面的访问速度
  • 镜像服务
  • 远程加速
  • 带宽优化
  • 集群抗攻击
• 应用
  网站、直播、视频平台
• 示例
  https://www.jsdelivr.com/ 对开源免费

Cookie, Session, Token

参考资料：https://zhuanlan.zhihu.com/p/625995458?utm_id=0

HTTP协议是无状态的，下一次请求与上一次请求无关系。

如何判断两次请求是同一个人？因此需要在客户端做标识。

方式	Cookie	Session	Token
存储位置	客户端	服务端	自由操作
存储大小
优点	兼容性好
缺点	跨域不便
安全性	低		高
响应速度		快	慢

Cookie存储在客户端，不够安全。

Session耗费服务器资源。通常与Cookie结合使用。

Token每次只存了用户id，然后查询数据库。由于只存id，内容存在服务端，因此安全性高，且不耗费服务器内存。由于需要查询服务端的数据库，因此响应慢。

Session以空间换时间，Token以时间换空间