博客园添加看板娘 (2021/11/05更新）

前言

我也算是最近才开始玩博客园，第一眼就发现了这个会动的人物模型。找到了相关文章，参考链接放在最下。

之所以自己还要写一次【因为我发现我的博客园文件地址不是我的博客园名字，而是变成一串数字。写一下免得小白受罪】

1.下载模型相关文件

参看以下链接中的下载地址。

https://www.cnblogs.com/hean/p/11167216.html

2.将文件上传到博客园

如下图位置：

 

 

 

3.写代码

将以下代码 复制到 博客侧边栏公告区域

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

        <  link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/自己博客园文件的地址/waifu.css"/>

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

 

查看自己博客园文件地址的方法：

以我自己的博客园举例，

红框处就是自己文件的路径，将上面代码中【 自己博客园文件的地址】改成【blogs/716280】。

 

 

 

 

保存代码，返回首页刷新就行了。

ps

参考文章链接：

https://www.cnblogs.com/hean/p/11167216.html

https://www.cnblogs.com/maczhen/p/14375300.html

修改了一些我发现的问题。

23.09.19,更新

waifu1.css是看板娘在右边

waifu.css 是看板娘在左边。