前言
更多效果展示，請通路我的 個人部落格。
效果圖：
教程：
- 小白水準：
hexo的官方是支援看闆娘的，已經封裝好了插件，但隻是模型，不能說話、不能換裝、功能較少。
- 安裝子產品，如下：
npm install --save hexo-helper-live2d
- 在
站點配置檔案
主題配置檔案
# 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-[email protected]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-[email protected]1.0.5/assets/wanko.model.json # 你的自定義 url
display:
position: right
width: 150
height: 300
mobile:
show: true # 手機中是否展示
- 小白水準，效果如下：
Hexo部落格NexT主題美化之新增看闆娘(能說話、能換裝)
- 大神水準：
大神作品，功能齊全。能說話、能換裝、能玩遊戲、能拍照、還能自定義。
- 下載下傳 張書樵大神的項目，解壓到本地部落格目錄的
themes/next/source
live2d-widget
autoload.js
檔案，如下：
将
改為
- 在
/themes/next/layout/_layout.swig
- 在
主題配置檔案
live2d:
enable: true
- 想修改看闆娘大小、位置、格式、文本内容等，可檢視并修改
waifu-tips.js
waifu-tips.json
waifu.css
- 大神水準，效果如下：
Hexo部落格NexT主題美化之新增看闆娘(能說話、能換裝)
後記
注意：大神的項目需要
jQuery
和
font-awesome
支援。我的項目因為其他插件需要，是以在很早之前就下載下傳這兩個檔案到本地關聯了，是以不需要再重複添加。若是沒有添加依賴的小夥伴，可以在頁面中加載。例如在
<head>
中加入：
<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" target="_blank" rel="external nofollow" >
或是像我一樣，将這兩個檔案下載下傳到本地，再關聯。
因為最近工作比較忙，沒有時間更新部落格。由于我的疏忽，漏掉了後記中比較關鍵的檔案依賴和大神項目檔案夾的重命名，導緻很多小夥伴無法實作大神項目的效果。我感到非常抱歉，同時，非常感謝 留言的大神們 對本部落格的批評指正，後期我會提升部落格品質和更新頻率。再次感謝！