• 两行代码搞定看板娘
• 支持自定义设置

由于vuepress搭建的博客还不断太多，所以查找各种美化教程的时候难免会踩坑，一个小功能可能就需要不停尝试，看到别人好看有趣的看板娘功能，是心动的感觉啊！！！所以我也来试试！！

调查了一下，网上使用比较多的是vuepress-plugin-helper-live2d插件，但是这个插件只提供了一个Live2D的模型展示，不满足于展示图片的我在网上苦苦搜索，终于找到了一个名为：Live2D Widget (opens new window)的项目，这个项目最优秀的一点莫过于提供了一种小白快速引入看板娘的方法，并且可以支持多种模型切换、换装。

🎥Live2D widget

特性 Feature

在网页中添加 Live2D 看板娘。兼容 PJAX，支持无刷新加载。 Add Live2D widget to web page. Compatible with PJAX.

警告

本项目使用了大量 ES6 语法，不支持 IE 11 等老旧浏览器。 WARNING: This project does not support legacy browsers such as IE 11.

引入方式

Live2D Widget的默认使用方法很简单，在head里加载上就行了。那么对Vuepress来说，只需要在blog/.vuepress/config.js中添加

module.exports = {
	head:{
		['link', { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" }],
        ['script', { src: "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js" }],
    }   
}

引入之后就可以看到现在左下角有了Live2D模型了，好看即是原罪啊，就为了这个没啥大用的功能，就花费了我好几个小时去尝试🤷‍♂️

自定义设置

到了引入这一步相信已经满足了大部分朋友的需求，但是如果你是一个重度DIY玩家，那么就一定想要去自定义了！！ 具体教程查看插件开发者写的教程 (opens new window)！！