网页如何添加live2d看板娘小插件

hello,我是谢佳宇,想必你们都看到的个人主页左下角的live2d看板娘插件后是否有想学一学的想法,其实很简单,话不多说,直接开讲。

非模板(如hexo、hugo等)式html的添加方法

在<head>和</head>中添加以下代码来加载Font Awesome

1
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">
注:以上代码为官方源,在此列出其他CDN源
  • cdnjs
    1
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    (以下均为cdnjs的镜像站)
  • 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
<script src="https://js.xiejiayu.com/autoload.js"></script>

模板(如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看板娘小插件

https://xiejiayu.com/posts/live2d/

作者

谢佳宇

发布于

2024-08-11

更新于

2024-08-22

许可协议

评论