Typecho版

1、下载本插件，将插件文件夹重命名为Pio
2、上传本插件，并放置在usr/plugins/目录下
3、登录你的Typecho后台，找到Pio选择启用插件
4、你可以通过选择或外链的方式引用你获得的模型资源.

Typecho版Pio插件下载

独立使用

如果你使用的博客平台不是 Typecho 从而无法使用，或是想在自己的网站项目里使用看板娘插件，可以通过参考本节点来实现。
将插件压缩包解压，提取其中的 models 和 static 文件夹。

引用 CSS 资源

在你网站的 head 标签内引用本项目的 CSS 样式表文件。

    <!-- 引用看板娘交互所需的样式表 -->
    <link href='你的站点路径/static/pio.css' rel='stylesheet' type='text/css'/>

引用 JS 资源

在你项目的页尾部分引用本项目的 JS 文件。

    <!-- 引用 Live2D 核心组件 -->
    <script src='你的站点路径/static/l2d.js'></script>
    <!-- 引用看板娘交互组件 -->
    <script src='你的站点路径/static/pio.js'></script>

插入 DOM 内容

    <div class="pio-container {自定位置}">
        <div class="pio-action"></div>
        <canvas id="pio" width="{看板娘宽度}" height="{看板娘高度}"></canvas>
    </div>

而他们的允许值如下：

示例：

    <div class="pio-container left">
        <div class="pio-action"></div>
        <canvas id="pio" width="350" height="350"></canvas>
    </div>

设置启动器

加载完 JS 文件后并不会立即自动生成看板娘，你需要编写一段启动代码来运行看板娘。

示例：

    var pio = new Paul_Pio({
        "mode": "fixed",
        "hidden": true,
        "content": {
            "welcome": ["欢迎来到Lincrow Blog！", "今天天气不错，一起来玩吧！", "博主每天都有些折腾记录，欢迎前往他的小窝阅读~"],
            "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": ["https://paugram.com/usr/plugins/Pio/models/yuan/model.json"]
    });

启动器的必备参数可以参考本文档的 参数 节点。

常见问题

答：你可以在插件设置里面选择使用外链方法载入模型（选择外链模型），或是将自己的模型放在插件的 models 文件夹内（选择模型），确保每个模型放在单独的一个文件夹，并且模型配置文件以 model.json 命名。以下是示例结构：

     plugins/Pio/models
     ┌ pio（模型名称）
     ├─ motions（动作文件）
     ├─ textures（贴图文件）
     ├─ model.moc（配置文件）
     └─ model.json（配置文件）

    l2d.js:1 Uncaught TypeError: Cannot read property '0' of undefined
        at o.r.hitTestSimpleCustom (l2d.js:1)
        at o.hitTestCustom (l2d.js:1)
        at o.tapEvent (l2d.js:1)
        at p (l2d.js:1)
        at g (l2d.js:1)

在 model.json 添加下列代码即可解决。

    "hit_areas_custom": {
        "head_x": [-0.35, 0.6],
        "head_y": [0.19, -0.2],
        "body_x": [-0.3, -0.25],
        "body_y": [0.3, -0.9]
    }

答：目前 2.4 版默认设计为永久隐藏，你可以通过清除浏览器 localStorage 的方式（F12 -> Application -> Local Storage -> 你的网站 -> posterGirl -> X 删除）让她再次出现，这个问题将在下一个版本进行改善。

参数

如果你不通过插件的形式食用，或是要在插件里实现一些高级功能，即可参考本节点，配置看板娘启动器。该参数在对象声明后，可通过 prop 参数来再次设置和修改。修改内容后，使用 init 方法重载看板娘或内容。

设置启动器必备参数的内容最全可以写成这样，当然你可以把这段复制下来自己研究和修改。

    var pio = new Paul_Pio({
        "mode": "static",
        "hidden": false,
        "content": {
            "welcome": "欢迎来到Lincrow博客"
        },
        "night": "single.night()",
        "model": ["static/pio/model.json"],
        "tips": true
    });

Mode

Hidden

默认为 false，如需在手机等移动设备上隐藏，请设置为 true。

Content

提示内容一共有以下几个参数可以自行设置，均为选填。如不额外设置参数则为插件默认的提示文字，按照自己的需求填写即可覆盖默认设置。

这是一个较为齐全的示例，在不同主题下的设置会有所差异，仅供参考。具体的参数设置，请看下方的详细说明。

    {
        "welcome": ["你好，欢迎来到我的小窝", "我是从云，傲完就娇的从云~"],
        "touch": ["你这个绅士！", "别碰我！"],
        "skin": ["想看看我的新服装吗？", "新衣服真漂亮~"],
        "home": "点击这里回到首页！",
        "link": "https://www.lincrow.com/",
        "close": "QWQ 有缘再会吧~",
        "referer": "你通过 %t 来到了这里",
        "custom": [
            {
                "selector": ".comment-form",
                "text": ["欢迎参与本文评论，别发小广告噢~", "快来参加本文的评论吧~"]
            }
        ]
    }

下面是各项参数的详细说明：

Welcome

【2.1 版本及以上】允许字符串或数组，用于用户进站提示。不填本参数则为默认输出。

    默认："欢迎来到本站！"
    示例："欢迎来到我的博客！"、["欢迎来到我的小窝", "我是从云，傲完就娇的从云~"] 或不填本参数。

【2.0 版本】只允许数组，用于用户进站提示。里面有两个项目，分别是直接进站和跳转入站的文字内容。其中 %t 是来源站点，第一项必填，不填则为默认输出。

    默认：["欢迎来到我的博客！", "欢迎来自 %t 的朋友！"]
    示例：["欢迎来到我的博客！"]、["欢迎来到我的小窝", "我是从云，傲完就娇的从云~"] 或不填本参数。

Touch

允许字符串或数组，填写点击看板娘的提示内容。不填本参数则为默认输出。

    默认：["你在干什么？", "再摸我就报警了！", "HENTAI!", "你够了喔！"]
    示例："别碰我！"、["你在干什么？", "萝莉是什么呀"] 或不填。

Skin

只允许数组，用于用户更换皮肤或模型。里面有两个项目，分别是点击更换的提示和更换完成后的提示。不填本参数则为默认输出。

    默认：["想看看我的新衣服吗？", "新衣服真漂亮~"]
    示例：["要让我的朋友上阵吗？", "让她休息一会儿吧~"] 或 ["要让我的朋友上阵吗？"]

Home

允许字符串或数组，填写点击返回首页按钮时看板娘的提示内容。不填本参数则为默认输出。

    默认："点击这里回到首页！"
    示例：["点击这里回到首页！", "让我们回家吧！"]

Close

允许字符串或数组，填写点击关闭看板娘按钮的提示内容。不填本参数则为默认输出。

    默认："QWQ 下次再见吧~"
    示例：["Bye! ", "下次再见吧~"]

Link

此功能在 2.1 版本中新增。

允许字符串，用于修改“关于”按钮的链接地址。不填本参数则为默认输出。

    默认："https://paugram.com/coding/add-poster-girl-with-plugin.html"
    示例："https://paul.ren/about"

Referer

此功能在 2.1 版本中新增。

允许字符串，用于修改其他来源进站的提示。不填本参数则为默认输出。

• %t：来源站点地址

    默认："欢迎来自 `%t` 的朋友！"
    示例："Hi，欢迎你在 `%t` 的指引下来到这里~"

Custom

此功能在 2.2 版本中新增，但 2.3 及后期版本的编写方式有所改变。本文档暂时只提供 2.4 版本的食用方法。

只允许数组，数组内包含一个 JS 对象，我把它称作为 触发器，用于扩展看板娘的自定义提示内容。当鼠标移入指定的元素，将提示对应的内容。不填则不启用该功能。

示例：

    {
        "selector": ".comment-form",
        "text": "欢迎参与本文评论，别发小广告噢~"
    },
    {
        "selector": ".home-social a:last-child",
        "text": "在这里可以了解博主的日常噢~"
    }

如果你想要编写一个适用于 Single 主题的文章链接触发器，可以参考如下示例：

    {
        "type": "read",
        "selector": ".post-item a"
    }

对应的 HTML 结构是这样的：

    <div class="post-item">
        <h2><a href="https://paugram.com/tech/problem-of-activex.html">不死的 ActiveX 又来搞事情了</a></h2>
        <p>那天晚上，我亲戚突然问我电脑有没有 IE8，我就说我是 Win10 系统，只能尝试模拟。我猜肯定是他需要在某些市@政单位的网站上操作，结果遇到问题了询问我有没有什么解决方法。事情确实如此，他后面...</p>
        <div class="post-meta">
            <time class="date">2019.07.27</time>
            <span class="category"><a href="https://paugram.com/tech">做个技术宅</a></span>
            <span class="comments">4 °C</span>
        </div>
    </div>

看板娘将会提示：想阅读 “不死的 ActiveX 又来搞事情了” 吗？

如果你想要编写一个适用于 Single 主题的文章链接触发器，可以参考如下示例：

    {
        "type": "link",
        "selector": ".post-content a"
    }

对应的 HTML 结构是这样的：

    <article class="post-content">
        <p>你好，欢迎来到本小宇宙。这是一个记录生活、分享技术的个人博客。我叫Lincrow，会做点小前端、小设计的萌新码农... 本站主题是自己写的 <a href="https://www.lincrow.com" target="_blank">Single</a>，喜欢就 Star 支持一下吧~</p>
    </article>

当鼠标移入文章的链接“Single”时，看板娘将会提示：想了解一下 “Single” 吗？

其他主题的使用方式由于结构差异，还请自行摸索！

Night

只允许填入字符串，用于切换主题夜间模式（前提是主题提供了该方法）默认将使用 eval() 函数执行，不填则不启用该功能。

在 Single 主题下，只需要这样填写：

    night: "single.night()"

Model

必填，只允许数组，用于引用模型 JSON 文件。不填本参数则无法开启看板娘。

    model: ["static/pio/model.json", "static/kia/model.json"]

Tips

可选，填入 true 则启用时间小贴士，覆盖入站提示内容。默认为 false，不填则不启用该功能。

    tips: true

方法

重载函数

此功能在 2.1 版本中新增。

如果你的主题有 PJAX 功能，可使用以下方法重载本插件。重载后即可避免因在 PJAX 切换页面后，因 DOM 刷新导致看板娘显示异常的问题。

    pio.init()

如使用 AJAX 插入了一个新元素后，执行下面的方法仅刷新文字相关的功能，并重新为选择器指定的元素添加事件。

    pio.init(true)