唠嗑一下：（今日摸🐟与反思）

今天的一天应该也是待电脑面前了，虽然并没有做许多很突出的事，但是我想用武师叔博客主页的一句话对你说：”我知道我无法惊艳谁的一生，但是我想温柔你的岁月…”因此，这一天下来，其实收获还是有的，无论大不大，还是随着Hexo+butterfly主题随时间的推移的改变，今天也算修改了一天主题，也即是所谓的”美化“了。虽然网络上有很多教程和方式方法，但是路子不对，或者代码出现Bug或者已经久远的方法，还是会有许多地方需要自己探索和求解。我相信未来我会想起今天或者这几天搭建博客的日子，本来按计划，今天需要完成vercel+wordpess和hexo-them-webstack吧，（就差不多这样叫）的搭建研究，因为，一直以来，我都有想搭建一个真正属于自己的导航网站，相信未来不久，这将会很块实现！

今日美化实现了：

1.添加页脚♥动代码，网站标题跳转说话动态。

2.添加了Aplayer播放器和音乐，解决跳转页面不连续播放的等问题。

3.添加主页轮番播放的文章以及尝试实现动画特效：樱花🌸漫天飞扬（像极了长歌行里的”月花夕晨“，但是有些卡界面加载速度。）

3.添加看板娘，动画动漫版，并取得真经，以后有时间出一期详细配置教程，待研究

4.发现了其实还是有很多不会，需要逐渐成长！！

特别说明：

​ 这则美化教程主要还是推荐与总结吧，其实有很多大佬写的都很不错，另外加一篇CSDN大佬的看板娘详细教程吧，感谢以上博客大佬的教程和美化方案！后面会加到友情链接里，可自行拜访访问即可！

一、先推荐一下这几位美化大佬的教程：

1.Butterfly 安装文档(二) 主题页面教程 （butterfly官方——台湾作者）

网站：https://butterfly.js.org/posts/dc584b87/

3.竹山一叶——Hexo博客上手入门指南、性能优化、界面美化、扩展功能、各种疑难杂症等解决方案全系列合辑！

网站：https://zsyyblog.com/dd40c9f4.html

3.Butterfly 主题美化（二）___By海拥———各种主题修改、美化等操作。

网站： https://haiyong.site/post/22e1d5da.html

二、以上博主大佬的教程基本可以满足所有的主题美化要求了，接下来就是我花了一下午+一晚上弄出的”看板娘“，俗称：“网站二次元小公主”或者“二次元小玩偶”等，不过应该会有很多人需要，因此就详细讲一讲，看板娘搭建！

特别说明：以下文本教程来源于CSDN中的一位大佬的教程———kali_._ 码龄3年等

原文教程地址：https://blog.csdn.net/csdn__cpp/article/details/110007453

（郑重说明一下： 本文只作引用，并未侵犯任何权利和隐私，如若不许，请联系我，及时删除处理等…..）

1.先首推一下Github项目地址： https://github.com/stevenjoezhang/live2d-widget

或者点击以下链接访问即可：（获取详细配置）

stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform (github.com)

2.CSDN大佬的教程：（直接复制的，如若出现代码错位等，推荐直接访问原文，本文只做保留即可！）

在butterfly主题下如何配置加强版看板娘？

订阅专栏

Hexo 在butterfly主题下如何配置加强版看板娘？

前期准备

如果已经安装过官方提供的live2d，需要先卸载！

1
2
npm uninstall hexo-helper-live2d
1

然后，

1.下载

经过张书樵大神魔改后的项目下载地址：https://github.com/stevenjoezhang/live2d-widget

下载解压到：themes\butterfly\source\文件夹下

例如我的：

1
2
C:\Users\cds\Desktop\gitCode\blog\themes\butterfly\source\live2d-widget
1

2.设置绝对路径

打开项目目录进入修改autoload.js文件，将live2d_path设为自己的路径，一般没什么太大变化都为：/live2d-widget/

3.引入

打开butterfly下的layout下的includes目录，点击修改head.pug文件，在文件末尾粘贴：

1
script(src='/live2d-widget/autoload.js')

即完成引入！

最后在主题配置文件下即butterfly下的_config.yml中开启看板娘：

1
2
3
# 看板娘
live2d:
  enable: true

运行项目就可以在左下角看到一个可换装、可聊天的动态加强版看板娘啦。

当然你也可以自己做一些简单修改：

4.自定义配置

  • 修改看板娘的位置
    在live2d-widget目录下的waifu.css中可以修改画布位置使得看板娘显示在你指定的位置
    具体在#waifu选择器下修改：

我这里设置的是看板娘固定在页面右下角！

- 修改聊天内容
可以在live2d-widget文件夹下的waifu-tips.js文件中修改，进去就可以看到大量的文本内容，原作者为此也是花了不少心思组织了这么多语言。我是懒得改了，hahaha~😄

  • 修改首次加载的模型

    如果你不喜欢默认的第一个模型，可以指定首次加载的模型，具体配置在live2d-widget文件夹下的waifu-tips.js中的大约160行，原作者也在这里注释了模型的ID，默认为1，后面的模型依次递增，我比较喜欢第二个和第三个2233娘，那就把这里改成2就行了。

效果预览

ps

附上我的个人bolg地址：MingHui-明辉大大，希望和大家一起交流学习！

三、总结：

最后，总结一下，美化千万条，适合自己最重要，最后希望大家一起努力加油，把主题美化的更加绚丽多彩，风度翩翩，还有也不忘那些曾经帮助过你的大佬，IT埋名十几记载，只为他日不做无用人。共勉！！

其实简洁才是最初的本真，永远不要忘本！————致Hexo