Hexo-NexT live 2d 配置

發表於 更新於 分類於 閱讀次數： 文章字數： 801 所需閱讀時間 ≈ 1 分鐘

前言

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

  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. 自訂網域