Hexo博客NexT主題美化之新增看板娘(能說話凡涩、能換裝)
效果圖：
教程：
- 小白水平：
hexo的官方是支持看板娘的棒搜，已經(jīng)封裝好了插件，但只是模型突照，不能說話帮非、不能換裝、功能較少讹蘑。
- 安裝模塊末盔，如下：
npm install --save hexo-helper-live2d
復制代碼
- 在
站點配置文件或主題配置文件中新增如下內(nèi)容：
# 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 # 調(diào)試, 是否在控制臺輸出日志
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:
position: right
width: 150
height: 300
mobile:
show: true # 手機中是否展示
-
小白水平，效果如下：image
- 大神水平：
大神作品座慰，功能齊全陨舱。能說話、能換裝版仔、能玩游戲游盲、能拍照、還能自定義蛮粮。
- 下載 張書樵大神的項目益缎，解壓到本地博客目錄的
themes/next/source下，修改文件夾名為live2d-widget然想，修改項目中的autoload.js文件莺奔，如下：
將
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
復制代碼
改為
const live2d_path = "/live2d-widget/";
- 在
/themes/next/layout/_layout.swing中,新增如下內(nèi)容：
<script src="/live2d-widget/autoload.js"></script>
- 在
主題配置文件中,新增如下內(nèi)容：
live2d:
enable: true
- 想修改看板娘大小、位置变泄、格式令哟、文本內(nèi)容等恼琼，可查看并修改
waifu-tips.js、waifu-tips.json和waifu.css屏富。 -
大神水平晴竞，效果如下：
后記
注意：大神的項目需要 jQuery 和 font-awesome 支持。我的項目因為其他插件需要狠半，所以在很早之前就下載這兩個文件到本地關(guān)聯(lián)了噩死，因此不需要再重復添加。若是沒有添加依賴的小伙伴神年，可以在頁面中加載甜滨。例如在 <head> 中加入：
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" >
或是像我一樣，將這兩個文件下載到本地瘤袖，再關(guān)聯(lián)。
