live2d看板娘之自定义网站篇
失去信用而赚的钱应结算在损失里。——罗马
image-20201225221038842
通过这篇文档配置
首先我们下载项目：项目地址
然后复制到我们项目中
image-20201225221235628
创建页面并放入代码
<!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>然后打开页面就能看到效果啦
image-20201225221556851
更多配置还是看文档吧~这里只做一个简单的指路
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-12-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。
腾讯云开发者
