博客園添加看板娘

前言

看了網上大多教程，添加看板娘大致分為兩種
這里提供的是比較簡單開袋即食的那種

先來一段吐槽

開始我以為有手就行
按照網上當前有兩種實現，一是使用https://unpkg.com/下的json文件，二是自己上傳waifu相關的js去實現。
此處后者我沒有去實踐，前者說說總結：
結果隨便找了一篇博文復制粘貼，刷新沒有效果
然后過了一會兒發現突然刷出來了，第一次可能要等久點吧
看板娘截圖預覽，然后在截圖預覽里一眼看上了haru這款
瞧上了haru這個妹子，接下來便是加入她的json
看了很多帖子，我腦海里只有只剩下*****
帖子幾乎都一樣，有的人還不說明是轉載的
幾乎每一個大可愛博文下面都有寫這個

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
(剩下略)

這個操作把我整神了，按照他們說的，替換以下的XXX即可

https://unpkg.com/live2d-widget-model-XXX@latest/assets/XXX.model.json

可是我們先瀏覽器訪問：
https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json 是存在的

我想改haru怎么改呢，照葫蘆畫樣子應該是以下鏈接：
https://unpkg.com/live2d-widget-model-haru0/1@1.0.5/assets/haru0/1.model.json
但是訪問不存在，那就肯定是不行的，換成haru_01，haru01都不行

回過頭發現這不就是放在一個網址下面的json嗎，先訪問一下https://unpkg.com這個網址
的確
那么我們一步步來找我們想要的json，如epsilon2_1的
如果按那些博文所說應該是：
https://unpkg.com/live2d-widget-model-epsilon2_1@1.0.5/assets/epsilon2_1.model.json
但是沒用的

但是我們一步步來，先訪問https://unpkg.com/live2d-widget-model-epsilon2_1@1.0.5/（此處末尾斜杠不可省略，否則無法訪問到）

點擊assets，再點擊Epsilon2.1.model.json得到如下：

最后點擊viewraw（其實就是把上面鏈接的browse去掉了）：

由此得出來的epsilon的json鏈接應該是如下：

https://unpkg.com/live2d-widget-model-epsilon2_1@1.0.5/assets/Epsilon2.1.model.json

同理我們訪問：https://unpkg.com/live2d-widget-model-haru@1.0.5/
依次點擊就能得到其json鏈接
有兩個分別為：

https://unpkg.com/browse/live2d-widget-model-haru@1.0.5/01/assets/haru01.model.json

https://unpkg.com/browse/live2d-widget-model-haru@1.0.5/02/assets/haru02.model.json

最后我想說，沒有身體力行的事，咱就別亂盲目的轉載或者抄襲好嗎。
當然也有可能是隨着歲月的變遷，以前可以的教程，老了，不行了，這個可以予以理解。

添加看板娘

博客側邊欄公告添加以下代碼即可(以下模型是haru)，至於如何選擇其他模型，請看上面吐槽

<!-- 引用的別人提供的js -->
<script src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script> 
<script>
    L2Dwidget.init({
        "model": {
　　　　　　　jsonPath: "https://unpkg.com/live2d-widget-model-haru@1.0.5/01/assets/haru01.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 150,
            "height": 400,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>