給你的hexo新增live2D看板娘

zmxyzmxy1234發表於2022-08-04
Hexo

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，修改專案中的 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。
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章