Hexo NexT主題看板娘live2d安裝(可換裝)

效果圖

簡易版本或者進階版本擇一使用。

簡易版本

STEP 1

安裝 npm install --save hexo-helper-live2d

STEP 2

在站點配置文件新增：

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默認
  pluginRootPath: live2dw/ # 插件在站點上的根目錄(相對路徑)
  pluginJsPath: lib/ # 腳本文件相對與插件根目錄路徑
  pluginModelPath: assets/ # 模型文件相隊與插件根目錄路徑
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定義 url
  tagMode: false # 標籤模式, 是否僅替换 live2d tag標籤而非插入到所有頁面中
  debug: false # 調試, 是否在控制台輸出日誌
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目錄/live2d_models/ 下的目錄名
    # use: ./wives/wanko # 相對於博客根目錄的路徑
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定義 url
  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

詳細請見live2d的使用手冊

更換模組

若是想更換不同的模組，可以使用live2d-widget-models提供的模組。

STEP 1

使用npm install {packagename} 安裝

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01（使用npm install --save - live2d-widget-model-haru）
live2d-widget-model-haru/02（使用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

模組預覽

原本模組的預覽已經失效了，要嘛就上網搜索看看，要嘛就自己嘗試看看。
或者樣本集

左Tororo 右Hijiki

Nito
Nito
左Koharu 右Haruto

miku
miku
chitose
chitose
epsilon
epsilon
haru
haru
wanko
wanko
unitychan

izumi
izumi
shizuku
shizuku
hibiki
hibiki

其他的請自行測試。

STEP 2

之後到站點配置文件修改你剛剛的設置，找到model裡頭的use:將後面live2d-widget-model-wanko改成你要換成的模組名稱。

model:
      use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目錄/live2d_models/ 下的目錄名
    # use: ./wives/wanko # 相對於博客根目錄的路徑
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定義 url

卸載

若是需要刪除，直接npm uninstall hexo-helper-live2d，並將站點配置文件裡頭的設定刪除即可。

進階版本

STEP 1

到stevenjoezhang/live2d-widget下載壓縮包。

STEP 2

將壓縮包解壓到themes/next/source，並修改檔名為live2d-widget

STEP 3

修改 live2d-widget\autoload.js

將

1	const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";

修改成

1	const live2d_path = "/live2d-widget/";

STEP 4

打開 .\themes\next\layout\_layout.swig，在body上方加上

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

並在上方<head>與</head>之間加上

1 2	<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">

(因為進階版需要 jQuery 和 font-awesome 支援)

STEP 5

在站點配置文件加上

1 2	live2d: enable: true

themes\next\source\live2d-widget裡的waifu.css waifu-tips.js 和waifu-tips.json 用來修改看板娘大小、位置、格式、說的話。

簡易版本

更換模組

模組預覽

卸載

進階版本

參考資料