博客园增加Live2D看板娘教程，超级简单，一看就懂

自己的网站要实现特别简单，本插件需要 Font Awesome (v4 或 v5) 图标支持，请确保相关样式表已在页面中加载。以 Font Awesome v4 为例，请在 <head> 中加入：
Font Awesome (v4 or v5) is required for this plugin. Take Font Awesome v4 as an example, please add the following in <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

否则图标将无法正常显示。（如果网页中已经加载了任何版本的 Font Awesome，就不要重复加载了）

导入了图标之后，将这一行代码加入 <head> 或 <body>，即可展现出效果：

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

如果网站启用了 PJAX，由于看板娘不必每页刷新，因此要注意将相关脚本放到 PJAX 刷新区域之外。

换句话说，如果你是小白，或者只需要最基础的功能，就只用把这一行代码，连同前面加载 Font Awesome 的一行代码，一起放到 html 的 <head> 中即可。

2、博客园实现教程

博客园要实现这个，需要申请开通博客，然后找到设置，如下图：

在页面定制CSS代码中加入以下代码：

#home {
opacity: 0.70;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/wjhsmart/1817159/o_2007300516461.jpg
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

在博客边栏公告中加入以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wjhsmart/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/wjhsmart/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wjhsmart/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wjhsmart/flat-ui.min.css"/>

如果还是不行，可能要申请一下JS权限。只需要把这两个代码分别复制到对应的地方，然后倒首页刷新一下即可看到一个呆萌的看板娘了，是不是特别简单。

博客园增加Live2D看板娘教程，超级简单，一看就懂

一、前言

二、效果图

三、资源准备

1、相关的资源，可以点击下面的网盘链接直接下载

2、也可以通过下面的地址到Gitbuh中下载

四、实现教程

1、个人小站实现教程

2、博客园实现教程

猜你喜欢