网页如何添加live2d看板娘小插件
hello，我是谢佳宇，想必你们都看到的个人主页左下角的live2d看板娘插件后是否有想学一学的想法，其实很简单，话不多说，直接开讲。
非模板(如hexo、hugo等)式html的添加方法
在<head>和</head>中添加以下代码来加载Font Awesome
1 | |
注:以上代码为官方源，在此列出其他CDN源
- cdnjs(以下均为cdnjs的镜像站)
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> - BootCDN
1
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.6.0/css/all.min.css"> - ZstaticCDN
1
<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/font-awesome/6.6.0/css/all.min.css"> - 7ED Services
1
<link rel="stylesheet" href="https://use.sevencdn.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> - 南方科技大学镜像站更多镜像站请参考这篇文章
1
<link rel="stylesheet" href="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/font-awesome/6.6.0/css/all.min.css">
然后在正文(也就是<head>和</body>)中添加以下代码来加载live2d。为了能更快响应正文内容，建议将所有不算最重要的js和css放在正文最后，也就是</body>前面
1 | |
模板(如hexo、hugo等)式html的添加方法
- hexo
这个就不太好说了，每个主题都有各自的文件归类方式，这里以我博客主题icarus为例，进入博客根目录下的themes\icarus\layout文件夹。由于icarus主题自动加载了Font Awesome，所以无需再次加载。所以直接打开”layout.jsx“，在第40行添加以下代码后保存部署即可生效1
<script src="https://js.xiejiayu.com/autoload.js"></script> - hugo
与hexo大致相同还是以icarus为例。打开themes\layouts\partials文件夹，用编辑器打开head.html在\</head>前加入这段代码:<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">以加载Font Awesome
再打开footer_js.html，在倒数第二行添加这段代码:<script src="https://js.xiejiayu.com/autoload.js"></script>以加载live2d。
特别鸣谢:张书樵，项目地址:https://github.com/stevenjoezhang/live2d-widget
网页如何添加live2d看板娘小插件