HEXO+icarus主题 给博客添加看板娘(Live2D)

最近在很多博客左下角或者右下角有看到小人(看板娘),折腾了一番搜到的都没有达到预期的效果,并且大多数教程都是基于Next来做的,本人使用的主题是Icarus,跟Next有细微的区别。后面找到了大神的作品,本次教程基于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>>内 再次申明博主锁使用的是icarus 主题 如果是Next 主题则对应的文件是 /themes/next/layout/_layout.swig

 <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"/>
 <script src="/live2d-widget/autoload.js"></script>

​ 4、编辑主题的配置文件_config.yml

live2d:
  enable: true

​ 保存之后执行 hexo clean && hexo g && hexo s 查看效果

大功告成

想修改看板娘大小、位置、格式、文本内容等,可查看并修改live2d-widget 下的 > waifu-tips.jswaifu-tips.jsonwaifu.css

live2D模型地址:
https://github.com/summerscar/live2dDemo
live2D部分模型预览:
https://huaji8.top/post/live2d-plugin-2.0/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容