博客園—2D小人物

博客園—2D小人物

人物樣式大全

https://huaji8.top/post/live2d-plugin-2.0/

作者github

https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

怎么使用?

首先我們的目的是想要把這個動態的小人添加到我們的博客園，那首先得注冊一個博客園，並把js樣式功能解鎖

接下來就是簡單的步驟,進入博客園的設置功能

一.頁面訂制css代碼

canvas#live2dcanvas {
border: 0 !important;
right: 0;
}

二.頁腳Html代碼

<script type="text/javascript">
L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width":75,
            "height": 150,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 1
        }
    }
);
</script>

怎么更換想要的角色？

在人物樣式大全可以看到，人物的名字。然后在修改js代碼中的jsonpathhttps://unpkg.com/live2d-widget-model-人物名/assets/人物名.model.json，可以直接在瀏覽器發送這個請求，看有沒有相關數據返回，有的話，這個樣式是存在的，有些可能找不到了，要自己去找

相關屬性設置

live2d:

  model:

    scale: 1	#模型與canvas的縮放

    hHeadPos: 0.5	#模型頭部橫坐標

    vHeadPos: 0.618	#模型頭部縱坐標

  display:

    superSample: 2	#超采樣等級

    width: 150	#畫布的寬度，顯示模型畫布的長度

    height: 300	#畫布高度顯示模型畫布的高度

    position: right	#顯示位置：左或右

    hOffset: 0	#水平偏移

    vOffset: -20	#垂直偏移

  mobile:

    show: true	#是否在移動設備上顯示

    scale: 0.5	#移動設備上的縮放

  react:

    opacityDefault: 0.7	#默認透明度

    opacityOnHover: 0.2	#鼠標移上透明度

這是這樣，兩步就搞定