live2d看板娘之自定义网站篇

简介: live2d看板娘之自定义网站篇

失去信用而赚的钱应结算在损失里。——罗马

通过这篇文档配置

首先我们下载项目:项目地址

然后复制到我们项目中

创建页面并放入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引用看板娘交互所需的样式表 -->
    <link href='Pio/static/pio.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="pio-container left">
    <div class="pio-action"></div>
    <canvas id="pio" width="350" height="350"></canvas>
</div>
<!-- 引用 Live2D 核心组件 -->
<script src='Pio/static/l2d.js'></script>
<!-- 引用看板娘交互组件 -->
<script src='Pio/static/pio.js'></script>
<script>
    var pio = new Paul_Pio({
        "mode": "fixed",
        "hidden": true,
        "content": {
            "welcome": ["欢迎来到保罗的小宇宙!", "今天天气不错,一起来玩吧!", "博主每天都有些折腾记录,欢迎前往他的小窝阅读~"],
            "custom": [
                {"selector": ".comment-form", "text": "欢迎参与本文评论,别发小广告噢~"},
                {"selector": ".home-social a:last-child", "text": "在这里可以了解博主的日常噢~"},
                {"selector": ".post-item a", "type": "read"},
                {"selector": ".post-content a, .page-content a", "type": "link"}
            ]
        },
        "night": "single.night()",
        "model": ["Pio/models/pio/model.json"]
    });
</script>
</body>
</html>

然后打开页面就能看到效果啦

更多配置还是看文档吧~这里只做一个简单的指路

相关文章
Idea:通过Live Template自定义模板(类注释、方法注释)
Idea:通过Live Template自定义模板(类注释、方法注释)
1284 0
Idea:通过Live Template自定义模板(类注释、方法注释)
|
视频直播 API CDN
视频直播服务自定义RAM授权
系统默认的授权无法满足部分用户场景,针对视频直播服务自定义授权写法讨论。
833 0
视频直播服务自定义RAM授权
|
API C++ Windows
【Live555】Live555 Windows下使用VS2017编译教程
【Live555】Live555 Windows下使用VS2017编译教程
【Live555】Live555 Windows下使用VS2017编译教程
|
数据建模 C++ Windows
live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板
live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板
live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板