解決博客園添加hexo看板娘無法加載問題


關於添加看板娘

因為覺得作者設置的頁面左下角的網易雲音樂並不實用所以將其改成看板娘

但是由於太菜,不能很好的理解live2d的官方文檔

數次度娘都是一些不能用的版本,不是配置少雙引號,就是路徑錯誤,看了十幾個博客竟沒有一個是對的

點進博客根本就沒有所謂的看板娘,看頁面源碼也都是error

幾經搜索,終於在一個小時后找到正確配置之法

下面是我的設置,具體代碼在html/pageFooter.html

<!-- 看板娘-->
<script src="https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/lib/L2Dwidget.0.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            "scale": 1,
            "hHeadPos": 0.5,
            "vHeadPos": 0.618,
            "jsonPath": "https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/assets/z16.model.json"
        },
        "display": {
            "superSample": 2,
            "width": 100,
            "height": 220,
            "position": "left",
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });</script>
<div id="live2d-widget">
    <canvas id="live2dcanvas" width="200" height="440"
            style="position: fixed; opacity: 1; left: 0px; bottom: 0; z-index: 99999; pointer-events: none;"></canvas>
</div>

若自定義只需要將對應的文件鏈接修改即可

live2dw內的文件是由hexo自動生成的

如果需要換模型最簡單的辦法是去別人的博客看頁面源碼,把它的對應鏈接拷過來(比如我的鏈接0.0)!
當然也可以自己生成。

注意:由於瀏覽器的跨域限制,對於自行引入的看板娘js應當使用cdn(推薦使用jsDeliver+Github方式)

樣例可以看我的Github cnblogsThemes


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM