live2D

《Live2D》是一種應用於電子遊戲的繪圖渲染技術，技術由日本Cybernoids公司開發。通過一系列的連續圖像和人物建模來生成一種類似三維模型的二維圖像，對於以動畫風格為主的冒險遊戲來説非常有用

live2d官網，可以考慮自己製作自己喜歡的

安裝依賴

npm install --save hexo-helper-live2d

這個時候是沒有模型文件的，所以下一步是下載模型文件

安裝模型

去下載一個自己喜歡的模型，將其放入node_modules目錄下，或者直接用npm

npm install live2d-widget-model-z16

然後在_config.yml文件裏添加：

live2d:
  enable: true
  # 推薦使用 jsdelivr 的 CDN 來加載
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    # 推薦使用 CDN 來加載模型
    use: live2d-widget-model-z16
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7
  dialog:
  #   # 是否開啓對話框
     enable: true
  #   # 是否使用一言
     hitokoto: true

也可以用CDN

### 推薦使用 jsdelivr 的 CDN 來加載
  scriptFrom: jsdelivr
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    # 推薦使用 CDN 來加載模型
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json

最後運行網站就可以了

使用stevenjoezhang大神開發的加強版live2d

原生hexo似乎只有模型，沒有其他功能，stevenjoezhang
大神開發的live2d我們可以放入hexo（上面安裝的東西都可以不要）

下載

下載 stevenjoezhang的項目，解壓到本地博客目錄的 themes/next/source 下，修改文件夾名為 live2d-widget（部署時記得把li ve2d-widget目錄的.git刪了），修改項目中的 autoload.js 文件，如下：

// const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

如果你的hexo加了URL前綴，就將前綴加入live2d_path

修改API

autoload.js下的第34行是填寫了live2d模型的API，如果你在國內可能jsdelivr.netCDN不僅不能加速，還會減速，我們把他註釋掉，然後使用fghrsh的API接口：live2d.fghrsh.net。或者你擁有自己的服務器，也可以自己搭建live2d API項目。

initWidget({
   waifuPath: live2d_path + "waifu-tips.json",
  apiPath: "https://live2d.fghrsh.net/api/",
  // cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/"
});

引入

每個主題引入不一樣，具體請查詢自己的主題文檔，這裏拿next舉例

1. 在/themes/next/layout/_layout.swig中,新增如下內容

   <script src="/live2d-widget/autoload.js"></script>

2. 引入jQuery和font-awesome。你的主題如果默認引入了，那請不要重複引入。2020年1月1日起，該項目不再依賴於 jQuery。

   <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

3. 配置文件添加一下內容

   live2d:
     enable: true

4. 想修改看板娘大小、位置、格式、文本內容等，可查看並修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。