Hexo-NexT live 2d 配置
前言
這次要做的就是網頁右下角那隻可愛的狗狗,可以幫你看家招攬客人,還可以跟他一起玩,可說是一舉數得
安裝 live 2d
這次用的是這個模組,執行下方指令就可以安裝了1
npm install --save hexo-helper-live2d
接著在最外層的_config.yml 中加入以下程式碼(這個模組的作者是說放在 theme 裡面的_config.yml 也可以,不過我試過之後是沒辦法)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7
安裝 live 2d 人物模型
到了這裡應該已經有狗狗出現在你的網頁上面了,不過還有很多模型可以選擇,像是貓咪或是可愛的小女孩,可以從這裡看到所有模型的預覽,不過我試過好以個之後還是覺得狗狗好可愛,或是也可以像我一樣中文的版面放狗,英文的版面放貓。
那選好了想要的模型就可以來下載了,下面是所有模型的名稱,只要輸入 npm install 模型名稱
就可以下載了,例如我上面的貓咪就是 npm install live2d-widget-model-tororo
,如果是 live2d-widget-model-haru/01 或 live2d-widget-model-haru/02 的話就統一用 npm install live2d-widget-model-haru
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01
live2d-widget-model-haru/02
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
安裝好後,到最外層的_config.yml 修改剛剛加入的程式碼,將下載好的模型名稱打在 model 的 use 後1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: 下載的模型名稱
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7
修改後應該就可以看到選的 live 2d 角色出現在你的網頁上面了
結語
多了個守護神在你的網站上了,真的超酷的,如果有發現問題或者我有哪裡講錯,歡迎大家到底下留言區跟我討論喔~
其他功能
側邊欄
live2d 角色(就是網頁右下角那隻可愛的狗狗)✅