最近在很多博客左下角或者右下角有看到小人(看板娘)诗宣,折騰了一番搜到的都沒有達到預(yù)期的效果掷豺,并且大多數(shù)教程都是基于Next來做的,本人使用的主題是Icarus赎瑰,跟Next有細微的區(qū)別王悍。后面找到了大神的作品,本次教程基于Hexo+Icarus添加的看板娘(Live2D) 參考博客: 張書樵 梆子井歡喜坨 潘高PG
效果展示
教程
? 1餐曼、把大神已修改好的代碼托管在Github 源碼 下載到hexo目錄下的/themes/next/source
下下載好的文件名live2d-widget
? 2配名、進入live2d-widget
修改autoload.js
// 把這個替換掉
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
// 替換為
const live2d_path = "/live2d-widget/";
這個live2d_path
是指剛才下載的源碼存放的目錄,在icarus
中就會以hexo/theme/next/source
為根目錄 晋辆,剛才下載的源碼放在這個位置所以這里的live2d_path
就是源碼存放的位置
? 3渠脉、重點 不加會沒有效果
在
/themes/icarus/layout
中編輯layout.ejs
加入以下依賴到<head></head>>
內(nèi) 再次申明博主鎖使用的是icarus
主題 如果是Next
主題則對應(yīng)的文件是/themes/next/layout/_layout.swig
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" />
<script src="/live2d-widget/autoload.js"></script>
? 4、編輯主題的配置文件_config.yml
live2d:
enable: true
? 保存之后執(zhí)行 hexo clean && hexo g && hexo s
查看效果
大功告成
想修改看板娘大小瓶佳、位置芋膘、格式、文本內(nèi)容等霸饲,可查看并修改live2d-widget
下的 > waifu-tips.js
为朋、 waifu-tips.json
、 waifu.css
live2D模型地址:
https://github.com/summerscar/live2dDemo
live2D部分模型預(yù)覽:
https://huaji8.top/post/live2d-plugin-2.0/