博客添加動態動漫妹子

一、效果圖

相信從事技術開發的朋友們，都有自己的博客。

今天我們來講講如何讓自己的博客增加一點色彩。

我們來看一張效果圖：

 

 

 右下角有個很乖巧的動漫妹子，鼠標移動，妹子會搖頭晃腦～

集成其實很簡單，這是一種2D技術，實現方式有挺多中的，業界有比較多的方案，今天我們講講L2Dwidget。

博客園、hexo加入這個集成的效果其實很簡單的。

下面我們講講如何在博客里面引入這動漫妹子模型：

二、博客園添加Live 2D模型

我們在設置找到“博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）”這項，然后加入以下代碼：

<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>

<script type="text/javascript">
L2Dwidget.init({
      "display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
             "position": "right",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>

這樣我們就看到這個漫畫妹子模型來。

除了這個妹子以外，還有其他的模型，22款隨君采。

那么如何使用其他模型呢？具體操作如下：

在 使用L2Dwidget.init初始化的時候，里面增加一個key為model，model對象傳入key為jsonPath、scale，然后加上對應的值就可以啦，具體代碼如下：

"model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
            "scale": 1
        },

jsonPath的值對應的是這個模型json的地址，

相應鏈接： https://unpkg.com/2D模型全名稱@1.0.5/assets/模型.model.json

例如想用：2D模型全名稱： live2d-widget-model-koharu 模型：koharu

鏈接如下：https://unpkg.com/browse/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json

 

【Tip: 選自己喜歡的模型就可以啦～】

22款模型名稱：

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)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

22款模型效果圖地址如下：

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

 

三、Hexo博客添加Live 2D模型

這里的安裝步驟稍微多了幾步，具體操作如下： 

1、安裝模塊

    在hexo根目錄執行命令

# npm install --save hexo-helper-live2d

2、下載模型

# npm install live2d-widget-model-hibiki

解析：npm install 模型名字

 

3、增加配置

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/ # 插件在站點上的根目錄(相對路徑)
  pluginJsPath: lib/ # 腳本文件相對與插件根目錄路徑
  pluginModelPath: assets/ # 模型文件相對與插件根目錄路徑
  tagMode: false # 標簽模式, 是否僅替換 live2dtag標簽而非插入到所有頁面中
  log: false 
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 是否在移動設備上顯示
  react:
    opacity: 0.7

這里的model，use模型名字選中自己喜歡的即可。

詳細配置地址：https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init

github鏈接地址：https://github.com/EYHN/hexo-helper-live2d

 

 

四、結語

    本篇分享到這里就結束啦，給朋友們推薦一個前端公眾號，里面都是前端技術干貨。