在博客園主頁添加一個Live2D moc3

起初是因為在b站刷視頻看到了一個非常好看的live2d模型，想添加博客園主頁上，結果發現自身前端能力很差，對live2d也不是很了解，所以在添加過程中遇到了許多問題，如果在這篇文章中有什么錯誤的地方，希望了解的朋友能為我指正。

在添加的過程中，我發現一個問題就是：大多數人所寫的教程千篇一律，而且基本上所使用的模型也就那么幾個，利用的是unpkg現成的json文件；而配置自定義模型的幾個教程，經過我的測試，發現對我並沒有用，這可能是和live2d的版本有關，這個我不太了解不同版本有什么區別，總之我目前使用的是moc3版的，如果像添加這個版本的，可以繼續往下看。

-------------------------------------------------------------------

接下來寫我是如何配置的：

首先，需要把資源上傳到倉庫，我使用的是GitHub（關於GitHub我也是第一次使用，如果有說錯的地方希望能為我指正）

新建倉庫教程：https://docs.github.com/cn/github/getting-started-with-github/create-a-repo

將下載好的live2d文件上傳到倉庫中（如果文件過大可以試試用命令行遠程推送，有類似教程）

(注：之前的教程有說將json文件Raw之后的鏈接作為資源鏈接填入，我發現這是不行的，個人猜測和live2d版本或者是raw被牆有關，這位大佬和我遇到的情況相同並提出了解決方法https://www.cnblogs.com/rujianming/p/11798240.html)

之后我們將項目release，教程https://blog.csdn.net/weixin_41287260/article/details/97617620

因為github的release功能會在jsdelivr上生成類似於unpkg所提供的src（也就是大多數人所用的那種），路徑名為"https://cdn.jsdelivr.net/gh/用戶/庫@版本號/資源路徑"，這個路徑之后會用到

這時我們資源的准備工作就已經完成了

-------------------------------------------------------------------

下一步准備兩個js文件

這個是我做好的也可以直接用

（名稱當時起反了，不過不影響）

https://blog-static.cnblogs.com/files/Arisf/live2dcubismcore.js
https://blog-static.cnblogs.com/files/Arisf/bundle.js

新建txt文件，打開鏈接，復制代碼到txt文件，改后綴為js，將做好的js文件上傳到博客園中

 

最后在博客園后台設置中，編輯側邊欄公告（需要先申請js支持）

寫在側邊欄，因為側邊欄中js已經很多了，加載會稍微慢一點

寫在頁腳，加載比較快

live2d和鼠標移動特效只會同時觸發一種

 

先調用js文件

<script src="https://blog-static.cnblogs.com/files/Arisf/live2dcubismcore.js"></script>
<script src="https://blog-static.cnblogs.com/files/Arisf/bundle.js"></script>

加載live2d文件

<canvas id="live2d" width="400" height="400" class="live2d" style="position: fixed; opacity: 1; left: -110px; bottom: -135px; z-index: 99999; pointer-events: none;"></canvas>
<script type="text/javascript">  
var resourcesPath = 'https://cdn.jsdelivr.net/gh/Arisf0617/ATRI@v1.0/'; // 指定資源文件（模型）保存的路徑，使用github的release版本，路徑如下https://cdn.jsdelivr.net/gh/用戶/庫@版本號/資源路徑
var backImageName = ''; // 指定背景圖片 ,默認為空
var modelDir = ['ATRI']; // 指定需要加載的模型
initDefine(resourcesPath, backImageName, modelDir); // 初始化模型</script>

大功告成

-------------------------------------------------------------------

重要參考：

https://www.cnblogs.com/rujianming/p/11798240.html

https://www.cnblogs.com/wstong/p/12874732.html

https://www.bilibili.com/read/cv6839709

Live2D模型來源於B站up主 @叢雨-ムラサメ，uid12351533