Hexo-NexT live 2d 配置

前言

這次要做的就是網頁右下角那隻可愛的狗狗,可以幫你看家招攬客人,還可以跟他一起玩,可說是一舉數得 可愛的狗狗

  1. 安裝 live 2d
  2. 安裝 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
18
live2d:
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
22
live2d-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 後

修改 model 中的 use
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
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 角色出現在你的網頁上面了

結語

多了個守護神在你的網站上了,真的超酷的,如果有發現問題或者我有哪裡講錯,歡迎大家到底下留言區跟我討論喔~

其他功能

  1. 側邊欄

    基礎配置 (關於、標籤、分類、歸檔、搜尋、頭像、個人相關連結)
    切換語言

  2. 頁底

  3. utterances 留言板

  4. Google Analytics 統計網站資訊

  5. 日 / 夜模式

  6. live2d 角色(就是網頁右下角那隻可愛的狗狗)✅

  7. SEO:搜尋引擎最佳化 (Search Engine Optimization)

  8. 剩下的一些小工具

  9. 自訂網域