hexo笔记三:next主题添加看板娘

有时候在逛别人的博客界面的时候,会在页面左下角或者右下角等界面看到这样的画面,还是非常好看的。
hexo笔记三:next主题添加看板娘_第1张图片
今天这篇博客总结下,怎么把萌萌哒的看板娘放到自己的博客页面中。

我采用的hexo的next主题。

1.下载live2D文件。

2.将其解压后,放置在下面目录:

博客主目录\themes\next\source\

[root@D-Centos7 live2d-widget]# pwd
/www/wwwroot/my_blog_2_hexo/themes/next/source/live2d-widget

3 更改live2d-widget下的autoload.js文件。里面的内容已经写好了,注释第二行,取消第三行的注释就行了。

// 注意:live2d_path 参数应使用绝对路径
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
const live2d_path = "/live2d-widget/";

4 修改/themes/next/layout/下的_layout.swing或者_layout.swig文件,在head标签中添加一行代码。

<script src="/live2d-widget/autoload.js"></script>

5 在theme/next/_config.yml中,新增如下内容:

live2d:
  enable: true

6 然后在博客根目录重新生成即可。

cd 博客目录
hexo g

然后就可以看到效果了。

hexo笔记三:next主题添加看板娘_第2张图片

想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css

本文参考博文:
Hexo博客NexT主题美化之新增看板娘(能说话、能换装)
Hexo(sakura)添加live2d看板动画(可对话,换装互动)

你可能感兴趣的:(hexo)