精华内容
下载资源
问答
  • 华夫饼干 插件应用程序,用于向您的网页添加评论
  • 评论员 可以轻松添加到任何网页的超轻量级评论系统。
  • Github+Jekyll添加评论支持

    千次阅读 2016-08-22 08:14:58
    这里介绍怎么给文章、网页添加评论支持。选择评论系统(commenting system)主流的评论系统有Disqus, Facebook comment, IntenseDebate, Livefyre等。提供的功能和服务都大同小异,可以根据个人爱好选择。这里已...

    现在,可以非常方便的使用Jekyll+Guthub制作个人静态网站。具体可以参考Github官方教程

    这里介绍怎么给文章、网页添加评论支持。

    选择评论系统(commenting system)

    主流的评论系统有Disqus, Facebook comment, IntenseDebate, Livefyre等。提供的功能和服务都大同小异,可以根据个人爱好选择。这里已IntenseDebate为例,主要原因是其它几个要么国内访问不了,要么访问速度极慢,可以自己体验。

    先去IntenseDebate注册一个账号。

    在Jekyll站点的_includes目录下创建intense debate-comments.html文件.

    文件内容如下。在{% if page.comments != false %}和{% endif %}之间就是IntenseDebate注册完以后得到的脚步代码。如果使用其他评论系统,代码类似。

    {% if page.comments != false %}
        <script>
        var idcomments_acct = 'xxxx50b9b39';
        var idcomments_post_id = '{{ page.url }}';
        var idcomments_post_url;
        </script>
        <span id="IDCommentsPostTitle" style="display:none"></span>
        <script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
    {% endif %}

    在站点配置文件中添加评论配置参数,方便灵活的enable/disable评论功能。

         intensedebate_comments: true

    在post.html文件末尾后面添加代码引用intensedebate-comments.html来显示评论框。

        {% if site.intensedebate_comments %}
          {% include intensedebate-comments.html %}
        {% endif %}
    展开全文
  • 添加和删除评论功能网页的实现

    千次阅读 2016-10-19 15:22:03
    DOM是Document Object Model(文本对象...另外,文档对象模型还提供了添加和删除文档对象的方法,这样能够创建动态的文档内容。DOM也提供了处理事件的接口,它允许捕获和响应用户以及浏览器的动作。 接下来通过结合HTM

    DOM是Document Object Model(文本对象模型)的简称,是表示文档和访问操作构成文档的各种元素的应用程序接口(API)。它提供了文档中独立元素的结构化、面向对象的表示方法,并允许通过对象的属性和方法访问这些对象。另外,文档对象模型还提供了添加和删除文档对象的方法,这样能够创建动态的文档内容。DOM也提供了处理事件的接口,它允许捕获和响应用户以及浏览器的动作。
    接下来通过结合HTML、CSS和JavaScript对一个添加和删除评论功能网页进行实现。

    <%@ page language="java" pageEncoding="GBk"%>
    <html>
      <head>
        <title>发表评论</title>
        <link rel="stylesheet" href="CSS/style.css">
        <script language="javascript">
        function addElement() {
        //创建TextNode节点
        var person = document.createTextNode(form1.person.value);
        var content = document.createTextNode(form1.content.value); 
        //创建td类型的Element节点
        var td_person = document.createElement("td"); 
        var td_content = document.createElement("td");  
        var tr = document.createElement("tr"); //创建一个tr类型的Element节点
        var tbody = document.createElement("tbody"); //创建一个tbody类型的Element节点
        //将TextNode节点加入到td类型的节点中
        td_person.appendChild(person);
        td_content.appendChild(content);    
        //将td类型的节点添加到tr节点中
        tr.appendChild(td_person);
        tr.appendChild(td_content); 
        tbody.appendChild(tr); //将tr节点加入tbody中
        var tComment = document.getElementById("comment"); //获取table对象
        tComment.appendChild(tbody); //将节点tbody加入节点尾部
        form1.person.value="";  //清空评论人文本框
        form1.content.value="";     //清空评论内容文本框
    }
    //删除第一条评论
    function deleteFirstE(){
        var tComment = document.getElementById("comment"); //获取table对象
        if(tComment.rows.length>1){
            tComment.deleteRow(1);      //删除表格的第二行,即第一条评论,
        }
    }
    //删除最后一条评论
    function deleteLastE(){
        var tComment = document.getElementById("comment"); //获取table对象
        if(tComment.rows.length>1){
            tComment.deleteRow(tComment.rows.length-1); //删除表格的最后一行,即最后一条评论
        }
    }
        </script>
      </head>
    
      <body>
    <table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933" bordercolordark="#FFFFFF" bgcolor="#666666">
      <thead>
        <tr>
          <td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td>
          <td width="86%" align="left" bgcolor="#FFFFFF">&nbsp;人生若真如一场大梦,这个梦倒也很有趣的。在这个大梦里,一定还有长长短短,深深浅浅,肥肥瘦瘦、甜甜苦苦,无数的小梦。有些已经随着日影飞去;有些还远着哩……</td>
        </tr>
      </thead>
    </table>
    <br>
    <table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
      <tr>
        <td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
        <td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
      </tr>
    </table>
    <form name="form1" method="post" action="">    
      <table width="600" height="122" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="119" height="14">&nbsp;</td>
          <td width="481">&nbsp;</td>
        </tr>
        <tr>
          <td height="27" align="center">评 论 人:</td>
          <td>
            <input name="person" type="text" id="person" size="40">
    
          </td>
        </tr>
        <tr>
          <td align="center">评论内容:</td>
          <td><textarea name="content" cols="60" rows="6" id="content"></textarea></td>
        </tr>
        <tr>
          <td height="40">&nbsp;</td>
          <td><input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()">
          &nbsp;
          <input name="Reset" type="reset" class="btn_grey" value="重置">
          &nbsp;
          <input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick="deleteFirstE()">
          &nbsp;
          <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()"></td>
        </tr>
      </table>
      </form>
      </body>
    </html>
    

    CSS:

    <!--
    body{
        FONT-SIZE: 9pt;
        margin-left:0px;
        SCROLLBAR-FACE-COLOR: #E5BB93; 
        SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
        SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;
        SCROLLBAR-3DLIGHT-COLOR: #ececec;
        SCROLLBAR-ARROW-COLOR: #ffffff;
        SCROLLBAR-TRACK-COLOR: #ececec;
        SCROLLBAR-DARKSHADOW-COLOR: #999966;
        BACKGROUND-COLOR: #fcfcfc
    
    }
    a:hover {
        font-size: 9pt; color: #FF6600;
    }
    a {
        font-size: 9pt; text-decoration: none;  color: #676767;
        noline:expression(this.onfocus=this.blur);
    }
    td{
        font-size: 9pt; color: #000000;
        padding:5px;
    }
    .btn_grey {
        font-family: "宋体";  font-size: 9pt;color: #333333;  
        background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
        border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
        border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
    }
    input{
        font-family: "宋体";
        font-size: 9pt;
        color: #333333;
        border: 1px solid #999999;
    
    }
    hr{
        border-style:solid;
        height:1px;
        color:#CCCCCC;
    }
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">

    实现如图:
    这里写图片描述

    展开全文
  • 如何在优酷评论添加如上图中的fhv


    如何在优酷评论中添加如上图中的超链接?

    <a href='链接地址'>显示内容</a>


    添加当前视频的时间点超链接?

    <a href="javascript:PlayerSeekMin('17','08');window.scroll(0,0)" alt="点击从此时间点开始播放">17:08</a>

    展开全文
  • 网页添加 Live2D 看板娘

    千次阅读 2018-11-21 14:12:59
    没错我也加上了,好萌啊 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄  ...从" _ ,,,, / |./ | 网页添加 Live2D 看板娘 レ'| i>.、,,__ _,.イ / .i | https://www.fghrsh.net/post/123.html レ'| | / k_7_/レ...

    没错我也加上了,好萌啊  ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 

    最近无意中又看到了 @Jad 大佬的博客,不拖坑了,加加加 233

     

    在 dalao 的 waifu-tips.js 的基础上,实现了套 API,加上了以下功能

     

    • 可以切换 Live2D 模型了(暂时只有 Pio 和 Tia 酱

    • 支持 随机换装 和 顺序换装(收集了截至目前的 Pio、Tia 全套服装

     

    *需要根据 自身情况 进行定制,不能直接套用(其他资源文件见 打包下载

    ** waifu-tips.js 的详细设置说明,和 waifu-tips.json 节点说明,见 GitHub - fghrsh/live2d_demo ReadMe

     

    waifu.css

    CSS

    .waifu {
        position: fixed;
        bottom: 0;
        z-index: 1;
        font-size: 0;
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    .waifu:hover {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .waifu-tips {
        opacity: 0;
        margin: -20px 20px;
        padding: 5px 10px;
        border: 1px solid rgba(224, 186, 140, 0.62);
        border-radius: 12px;
        background-color: rgba(236, 217, 188, 0.5);
        box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
        text-overflow: ellipsis;
        overflow: hidden;
        position: absolute;
        animation-delay: 5s;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-name: shake;
        animation-timing-function: ease-in-out;
    }
    .waifu-tool {
        display: none;
        color: #aaa;
        top: 50px;
        right: 10px;
        position: absolute;
    }
    .waifu:hover .waifu-tool {
        display: block;
    }
    .waifu-tool span {
        display: block;
        cursor: pointer;
        color: #5b6c7d;
        transition: 0.2s;
    }
    .waifu-tool span:hover {
        color: #34495e;
    }
    .waifu #live2d{
        position: relative;
    }
    
    @keyframes shake {
        2% {
            transform: translate(0.5px, -1.5px) rotate(-0.5deg);
        }
    
        4% {
            transform: translate(0.5px, 1.5px) rotate(1.5deg);
        }
    
        6% {
            transform: translate(1.5px, 1.5px) rotate(1.5deg);
        }
    
        8% {
            transform: translate(2.5px, 1.5px) rotate(0.5deg);
        }
    
        10% {
            transform: translate(0.5px, 2.5px) rotate(0.5deg);
        }
    
        12% {
            transform: translate(1.5px, 1.5px) rotate(0.5deg);
        }
    
        14% {
            transform: translate(0.5px, 0.5px) rotate(0.5deg);
        }
    
        16% {
            transform: translate(-1.5px, -0.5px) rotate(1.5deg);
        }
    
        18% {
            transform: translate(0.5px, 0.5px) rotate(1.5deg);
        }
    
        20% {
            transform: translate(2.5px, 2.5px) rotate(1.5deg);
        }
    
        22% {
            transform: translate(0.5px, -1.5px) rotate(1.5deg);
        }
    
        24% {
            transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
        }
    
        26% {
            transform: translate(1.5px, 0.5px) rotate(1.5deg);
        }
    
        28% {
            transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
        }
    
        30% {
            transform: translate(1.5px, -0.5px) rotate(-0.5deg);
        }
    
        32% {
            transform: translate(2.5px, -1.5px) rotate(1.5deg);
        }
    
        34% {
            transform: translate(2.5px, 2.5px) rotate(-0.5deg);
        }
    
        36% {
            transform: translate(0.5px, -1.5px) rotate(0.5deg);
        }
    
        38% {
            transform: translate(2.5px, -0.5px) rotate(-0.5deg);
        }
    
        40% {
            transform: translate(-0.5px, 2.5px) rotate(0.5deg);
        }
    
        42% {
            transform: translate(-1.5px, 2.5px) rotate(0.5deg);
        }
    
        44% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }
    
        46% {
            transform: translate(1.5px, -0.5px) rotate(-0.5deg);
        }
    
        48% {
            transform: translate(2.5px, -0.5px) rotate(0.5deg);
        }
    
        50% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }
    
        52% {
            transform: translate(-0.5px, 1.5px) rotate(0.5deg);
        }
    
        54% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }
    
        56% {
            transform: translate(0.5px, 2.5px) rotate(1.5deg);
        }
    
        58% {
            transform: translate(2.5px, 2.5px) rotate(0.5deg);
        }
    
        60% {
            transform: translate(2.5px, -1.5px) rotate(1.5deg);
        }
    
        62% {
            transform: translate(-1.5px, 0.5px) rotate(1.5deg);
        }
    
        64% {
            transform: translate(-1.5px, 1.5px) rotate(1.5deg);
        }
    
        66% {
            transform: translate(0.5px, 2.5px) rotate(1.5deg);
        }
    
        68% {
            transform: translate(2.5px, -1.5px) rotate(1.5deg);
        }
    
        70% {
            transform: translate(2.5px, 2.5px) rotate(0.5deg);
        }
    
        72% {
            transform: translate(-0.5px, -1.5px) rotate(1.5deg);
        }
    
        74% {
            transform: translate(-1.5px, 2.5px) rotate(1.5deg);
        }
    
        76% {
            transform: translate(-1.5px, 2.5px) rotate(1.5deg);
        }
    
        78% {
            transform: translate(-1.5px, 2.5px) rotate(0.5deg);
        }
    
        80% {
            transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
        }
    
        82% {
            transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
        }
    
        84% {
            transform: translate(-0.5px, 0.5px) rotate(1.5deg);
        }
    
        86% {
            transform: translate(2.5px, 1.5px) rotate(0.5deg);
        }
    
        88% {
            transform: translate(-1.5px, 0.5px) rotate(1.5deg);
        }
    
        90% {
            transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
        }
    
        92% {
            transform: translate(-1.5px, -1.5px) rotate(1.5deg);
        }
    
        94% {
            transform: translate(0.5px, 0.5px) rotate(-0.5deg);
        }
    
        96% {
            transform: translate(2.5px, -0.5px) rotate(-0.5deg);
        }
    
        98% {
            transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
        }
    
        0%, 100% {
            transform: translate(0, 0) rotate(0);
        }
    }
    @font-face {
      font-family: 'Flat-UI-Icons';
      src: url('flat-ui-icons-regular.eot');
      src: url('flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('flat-ui-icons-regular.woff') format('woff'), url('flat-ui-icons-regular.ttf') format('truetype'), url('flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg');
    }
    [class^="fui-"],
    [class*="fui-"] {
      font-family: 'Flat-UI-Icons';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .fui-cross:before {
      content: "\e609";
    }
    .fui-info-circle:before {
      content: "\e60f";
    }
    .fui-photo:before {
      content: "\e62a";
    }
    .fui-eye:before {
      content: "\e62c";
    }
    .fui-chat:before {
      content: "\e62d";
    }
    .fui-home:before {
      content: "\e62e";
    }
    .fui-user:before {
      content: "\e631";
    }

     

    waifu-tips.js

    JavaScript

    window.live2d_settings = Array(); /*
    
        く__,.ヘヽ.    / ,ー、 〉
             \ ', !-─‐-i / /´
              /`ー'    L//`ヽ、            Live2D 看板娘 参数设置
             /  /,  /|  ,  ,    ',                                           Version 1.4
           イ  / /-‐/ i L_ ハ ヽ!  i                            Update 2018.11.10
            レ ヘ 7イ`ト  レ'ァ-ト、!ハ|  |  
             !,/7 '0'   ´0iソ|   |   
             |.从"  _   ,,,, / |./   |             网页添加 Live2D 看板娘
             レ'| i>.、,,__ _,.イ /  .i  |                    https://www.fghrsh.net/post/123.html
              レ'| | / k_7_/レ'ヽ, ハ. |           
               | |/i 〈|/  i ,.ヘ | i |    Thanks
              .|/ / i:   ヘ!  \ |          journey-ad / https://github.com/journey-ad/live2d_src
                kヽ>、ハ   _,.ヘ、   /、!            xiazeyu / https://github.com/xiazeyu/live2d-widget.js
               !'〈//`T´', \ `'7'ーr'          Live2d Cubism SDK WebGL 2.1 Projrct & All model authors.
               レ'ヽL__|___i,___,ンレ|ノ
                 ト-,/ |___./
                 'ー'  !_,.:*********************************************************************************/
    
    
    // 后端接口
    live2d_settings['modelAPI']             = '//live2d.fghrsh.net/api/';   // 自建 API 修改这里
    live2d_settings['tipsMessage']          = 'waifu-tips.json';            // 同目录下可省略路径
    live2d_settings['hitokotoAPI']          = 'lwl12.com';                  // 一言 API,可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)
    
    // 默认模型
    live2d_settings['modelId']              = 1;            // 默认模型 ID,可在 F12 控制台找到
    live2d_settings['modelTexturesId']      = 53;           // 默认材质 ID,可在 F12 控制台找到
    
    // 工具栏设置
    live2d_settings['showToolMenu']         = true;         // 显示 工具栏          ,可选 true(真), false(假)
    live2d_settings['canCloseLive2d']       = true;         // 显示 关闭看板娘  按钮,可选 true(真), false(假)
    live2d_settings['canSwitchModel']       = true;         // 显示 模型切换    按钮,可选 true(真), false(假)
    live2d_settings['canSwitchTextures']    = true;         // 显示 材质切换    按钮,可选 true(真), false(假)
    live2d_settings['canSwitchHitokoto']    = true;         // 显示 一言切换    按钮,可选 true(真), false(假)
    live2d_settings['canTakeScreenshot']    = true;         // 显示 看板娘截图  按钮,可选 true(真), false(假)
    live2d_settings['canTurnToHomePage']    = true;         // 显示 返回首页    按钮,可选 true(真), false(假)
    live2d_settings['canTurnToAboutPage']   = true;         // 显示 跳转关于页  按钮,可选 true(真), false(假)
    
    // 模型切换模式
    live2d_settings['modelRandMode']        = 'switch';     // 模型切换,可选 'rand'(随机), 'switch'(顺序)
    live2d_settings['modelTexturesRandMode']= 'rand';       // 材质切换,可选 'rand'(随机), 'switch'(顺序)
    
    // 提示消息选项
    live2d_settings['showHitokoto']         = true;         // 显示一言
    live2d_settings['showF12Status']        = true;         // 显示加载状态
    live2d_settings['showF12Message']       = false;        // 显示看板娘消息
    live2d_settings['showF12OpenMsg']       = true;         // 显示控制台打开提示
    live2d_settings['showCopyMessage']      = true;         // 显示 复制内容 提示
    live2d_settings['showWelcomeMessage']   = true;         // 显示进入面页欢迎词
    
    //看板娘样式设置
    live2d_settings['waifuSize']            = '280x250';    // 看板娘大小,例如 '280x250', '600x535'
    live2d_settings['waifuTipsSize']        = '250x70';     // 提示框大小,例如 '250x70', '570x150'
    live2d_settings['waifuFontSize']        = '12px';       // 提示框字体,例如 '12px', '30px'
    live2d_settings['waifuToolFont']        = '14px';       // 工具栏字体,例如 '14px', '36px'
    live2d_settings['waifuToolLine']        = '20px';       // 工具栏行高,例如 '20px', '36px'
    live2d_settings['waifuToolTop']         = '0px'         // 工具栏顶部边距,例如 '0px', '-60px'
    live2d_settings['waifuMinWidth']        = '768px';      // 面页小于 指定宽度 隐藏看板娘,例如 'disable'(禁用), '768px'
    live2d_settings['waifuEdgeSide']        = 'left:0';     // 看板娘贴边方向,例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
    live2d_settings['waifuDraggable']       = 'disable';    // 拖拽样式,例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
    live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置,可选 true(真), false(假)
    
    // 其他杂项设置
    live2d_settings['l2dVersion']           = '1.4';        // 当前版本
    live2d_settings['l2dVerDate']           = '2018.11.10'; // 版本更新日期
    live2d_settings['homePageUrl']          = 'auto';       // 主页地址,可选 'auto'(自动), '{URL 网址}'
    live2d_settings['aboutPageUrl']         = 'https://www.fghrsh.net/post/123.html';   // 关于页地址, '{URL 网址}'
    live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名,例如 'live2d.png'
    
    /****************************************************************************************************/
    
    
    String.prototype.render = function(context) {
        var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
    
        return this.replace(tokenReg, function (word, slash1, token, slash2) {
            if (slash1 || slash2) { return word.replace('\\', ''); }
            
            var variables = token.replace(/\s/g, '').split('.');
            var currentObject = context;
            var i, length, variable;
            
            for (i = 0, length = variables.length; i < length; ++i) {
                variable = variables[i];
                currentObject = currentObject[variable];
                if (currentObject === undefined || currentObject === null) return '';
            }
            return currentObject;
        });
    };
    
    var re = /x/;
    console.log(re);
    
    function empty(obj) {return typeof obj=="undefined"||obj==null||obj==""?true:false}
    function getRandText(text) {return Array.isArray(text) ? text[Math.floor(Math.random() * text.length + 1)-1] : text}
    
    function showMessage(text, timeout, flag) {
        if(flag || sessionStorage.getItem('waifu-text') === '' || sessionStorage.getItem('waifu-text') === null){
            if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1];
            if (live2d_settings.showF12Message) console.log('[Message]', text.replace(/<[^<>]+>/g,''));
            
            if(flag) sessionStorage.setItem('waifu-text', text);
            
            $('.waifu-tips').stop();
            $('.waifu-tips').html(text).fadeTo(200, 1);
            if (timeout === undefined) timeout = 5000;
            hideMessage(timeout);
        }
    }
    
    function hideMessage(timeout) {
        $('.waifu-tips').stop().css('opacity',1);
        if (timeout === undefined) timeout = 5000;
        window.setTimeout(function() {sessionStorage.removeItem('waifu-text')}, timeout);
        $('.waifu-tips').delay(timeout).fadeTo(200, 0);
    }
    
    function initModel(waifuPath, type) {
        /* console welcome message */
        eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8.d(" ");8.d("\\U,.\\y\\5.\\1\\1\\1\\1/\\1,\\u\\2 \\H\\n\\1\\1\\1\\1\\1\\b \', !-\\r\\j-i\\1/\\1/\\g\\n\\1\\1\\1 \\1 \\a\\4\\f\'\\1\\1\\1 L/\\a\\4\\5\\2\\n\\1\\1 \\1 /\\1 \\a,\\1 /|\\1 ,\\1 ,\\1\\1\\1 \',\\n\\1\\1\\1\\q \\1/ /-\\j/\\1\\h\\E \\9 \\5!\\1 i\\n\\1\\1\\1 \\3 \\6 7\\q\\4\\c\\1 \\3\'\\s-\\c\\2!\\t|\\1 |\\n\\1\\1\\1\\1 !,/7 \'0\'\\1\\1 \\X\\w| \\1 |\\1\\1\\1\\n\\1\\1\\1\\1 |.\\x\\"\\1\\l\\1\\1 ,,,, / |./ \\1 |\\n\\1\\1\\1\\1 \\3\'| i\\z.\\2,,A\\l,.\\B / \\1.i \\1|\\n\\1\\1\\1\\1\\1 \\3\'| | / C\\D/\\3\'\\5,\\1\\9.\\1|\\n\\1\\1\\1\\1\\1\\1 | |/i \\m|/\\1 i\\1,.\\6 |\\F\\1|\\n\\1\\1\\1\\1\\1\\1.|/ /\\1\\h\\G \\1 \\6!\\1\\1\\b\\1|\\n\\1\\1\\1 \\1 \\1 k\\5>\\2\\9 \\1 o,.\\6\\2 \\1 /\\2!\\n\\1\\1\\1\\1\\1\\1 !\'\\m//\\4\\I\\g\', \\b \\4\'7\'\\J\'\\n\\1\\1\\1\\1\\1\\1 \\3\'\\K|M,p,\\O\\3|\\P\\n\\1\\1\\1\\1\\1 \\1\\1\\1\\c-,/\\1|p./\\n\\1\\1\\1\\1\\1 \\1\\1\\1\'\\f\'\\1\\1!o,.:\\Q \\R\\S\\T v"+e.V+" / W "+e.N);8.d(" ");',60,60,'|u3000|uff64|uff9a|uff40|u30fd|uff8d||console|uff8a|uff0f|uff3c|uff84|log|live2d_settings|uff70|u00b4|uff49||u2010||u3000_|u3008||_|___|uff72|u2500|uff67|u30cf|u30fc||u30bd|u4ece|u30d8|uff1e|__|u30a4|k_|uff17_|u3000L_|u3000i|uff1a|u3009|uff34|uff70r|u30fdL__||___i|l2dVerDate|u30f3|u30ce|nLive2D|u770b|u677f|u5a18|u304f__|l2dVersion|FGHRSH|u00b40i'.split('|'),0,{}));
        
        /* 判断 JQuery */
        if (typeof($.ajax) != 'function') typeof(jQuery.ajax) == 'function' ? window.$ = jQuery : console.log('[Error] JQuery is not defined.');
        
        /* 加载看板娘样式 */
        live2d_settings.waifuSize = live2d_settings.waifuSize.split('x');
        live2d_settings.waifuTipsSize = live2d_settings.waifuTipsSize.split('x');
        live2d_settings.waifuEdgeSide = live2d_settings.waifuEdgeSide.split(':');
        
        $("#live2d").attr("width",live2d_settings.waifuSize[0]);
        $("#live2d").attr("height",live2d_settings.waifuSize[1]);
        $(".waifu-tips").width(live2d_settings.waifuTipsSize[0]);
        $(".waifu-tips").height(live2d_settings.waifuTipsSize[1]);
        $(".waifu-tips").css("top",live2d_settings.waifuToolTop);
        $(".waifu-tips").css("font-size",live2d_settings.waifuFontSize);
        $(".waifu-tool").css("font-size",live2d_settings.waifuToolFont);
        $(".waifu-tool span").css("line-height",live2d_settings.waifuToolLine);
        
        if (live2d_settings.waifuEdgeSide[0] == 'left') $(".waifu").css("left",live2d_settings.waifuEdgeSide[1]);
        else if (live2d_settings.waifuEdgeSide[0] == 'right') $(".waifu").css("right",live2d_settings.waifuEdgeSide[1]);
        
        if (live2d_settings.waifuMinWidth != 'disable') $(window).resize(function() {
            $(window).width() <= Number(live2d_settings.waifuMinWidth.replace('px','')) ? $(".waifu").hide() : $(".waifu").show();
        });
        
        try {
            if (live2d_settings.waifuDraggable == 'axis-x') $(".waifu").draggable({ axis: "x", revert: live2d_settings.waifuDraggableRevert });
            else if (live2d_settings.waifuDraggable == 'unlimited') $(".waifu").draggable({ revert: live2d_settings.waifuDraggableRevert });
            else $(".waifu").css("transition", 'all .3s ease-in-out');
        } catch(err) { console.log('[Error] JQuery UI is not defined.') }
        
        live2d_settings.homePageUrl == 'auto' ? window.location.protocol+'//'+window.location.hostname+'/' : live2d_settings.homePageUrl;
        if (window.location.protocol == 'file:' && live2d_settings.modelAPI.substr(0,2) == '//') live2d_settings.modelAPI = 'http:'+live2d_settings.modelAPI;
        
        $('.waifu-tool .fui-home').click(function (){
            //window.location = 'https://www.fghrsh.net/';
            window.location = live2d_settings.homePageUrl;
        });
        
        $('.waifu-tool .fui-info-circle').click(function (){
            //window.open('https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02');
            window.open(live2d_settings.aboutPageUrl);
        });
        
        if (typeof(waifuPath) == "object") loadTipsMessage(waifuPath); else {
            $.ajax({
                cache: true,
                url: waifuPath == '' ? live2d_settings.tipsMessage : (waifuPath.substr(waifuPath.length-15)=='waifu-tips.json'?waifuPath:waifuPath+'waifu-tips.json'),
                dataType: "json",
                success: function (result){ loadTipsMessage(result); }
            });
        }
        
        if (!live2d_settings.showToolMenu) $('.waifu-tool').hide();
        if (!live2d_settings.canCloseLive2d) $('.waifu-tool .fui-cross').hide();
        if (!live2d_settings.canSwitchModel) $('.waifu-tool .fui-eye').hide();
        if (!live2d_settings.canSwitchTextures) $('.waifu-tool .fui-user').hide();
        if (!live2d_settings.canSwitchHitokoto) $('.waifu-tool .fui-chat').hide();
        if (!live2d_settings.canTakeScreenshot) $('.waifu-tool .fui-photo').hide();
        if (!live2d_settings.canTurnToHomePage) $('.waifu-tool .fui-home').hide();
        if (!live2d_settings.canTurnToAboutPage) $('.waifu-tool .fui-circle').hide();
    
        if (waifuPath === undefined) waifuPath = '';
        var modelId = localStorage.getItem('modelId');
        var modelTexturesId = localStorage.getItem('modelTexturesId');
        
        if (modelId == null) {
            var modelId = live2d_settings.modelId;
            var modelTexturesId = live2d_settings.modelTexturesId;
        } loadModel(modelId, modelTexturesId);
    }
    
    function loadModel(modelId, modelTexturesId) {
        localStorage.setItem('modelId', modelId);
        
        if (modelTexturesId === undefined) modelTexturesId = 0;
        localStorage.setItem('modelTexturesId', modelTexturesId);
        
        loadlive2d('live2d', live2d_settings.modelAPI+'get/?id='+modelId+'-'+modelTexturesId, (live2d_settings.showF12Status ? console.log('[Status]','live2d','模型',modelId+'-'+modelTexturesId,'加载完成'):null));
    }
    
    function loadTipsMessage(result) {
        $.each(result.mouseover, function (index, tips){
            $(document).on("mouseover", tips.selector, function (){
                var text = getRandText(tips.text);
                text = text.render({text: $(this).text()});
                showMessage(text, 3000);
            });
        });
        $.each(result.click, function (index, tips){
            $(document).on("click", tips.selector, function (){
                var text = getRandText(tips.text);
                text = text.render({text: $(this).text()});
                showMessage(text, 3000, true);
            });
        });
        $.each(result.seasons, function (index, tips){
            var now = new Date();
            var after = tips.date.split('-')[0];
            var before = tips.date.split('-')[1] || after;
            
            if((after.split('/')[0] <= now.getMonth()+1 && now.getMonth()+1 <= before.split('/')[0]) && 
               (after.split('/')[1] <= now.getDate() && now.getDate() <= before.split('/')[1])){
                var text = getRandText(tips.text);
                text = text.render({year: now.getFullYear()});
                showMessage(text, 6000, true);
            }
        });
        
        if (live2d_settings.showF12OpenMsg) {
            re.toString = function() {
                showMessage(getRandText(result.waifu.console_open_msg), 5000, true);
                return '';
            };
        }
        
        if (live2d_settings.showCopyMessage) {
            $(document).on('copy', function() {
                showMessage(getRandText(result.waifu.copy_message), 5000, true);
            });
        }
        
        $('.waifu-tool .fui-photo').click(function(){
            showMessage(getRandText(result.waifu.screenshot_message), 5000, true);
            window.Live2D.captureName = live2d_settings.screenshotCaptureName;
            window.Live2D.captureFrame = true;
        });
        
        $('.waifu-tool .fui-cross').click(function(){
            sessionStorage.setItem('waifu-dsiplay', 'none');
            showMessage(getRandText(result.waifu.hidden_message), 1300, true);
            window.setTimeout(function() {$('.waifu').hide();}, 1300);
        });
        
        if (live2d_settings.showWelcomeMessage) {
            var text;
            if (window.location.href == live2d_settings.homePageUrl) {
                var now = (new Date()).getHours();
                if (now > 23 || now <= 5) text = getRandText(result.waifu.hour_tips.t23-5);
                else if (now > 5 && now <= 7) text = getRandText(result.waifu.hour_tips.t5-7);
                else if (now > 7 && now <= 11) text = getRandText(result.waifu.hour_tips.t7-11);
                else if (now > 11 && now <= 14) text = getRandText(result.waifu.hour_tips.t11-14);
                else if (now > 14 && now <= 17) text = getRandText(result.waifu.hour_tips.t14-17);
                else if (now > 17 && now <= 19) text = getRandText(result.waifu.hour_tips.t17-19);
                else if (now > 19 && now <= 21) text = getRandText(result.waifu.hour_tips.t19-21);
                else if (now > 21 && now <= 23) text = getRandText(result.waifu.hour_tips.t21-23);
                else text = getRandText(result.waifu.hour_tips.default);
            } else {
                var referrer_message = result.waifu.referrer_message;
                if (document.referrer !== '') {
                    var referrer = document.createElement('a');
                    referrer.href = document.referrer;
                    var domain = referrer.hostname.split('.')[1];
                    if (window.location.hostname == referrer.hostname)
                        text = referrer_message.localhost[0] + document.title.split(referrer_message.localhost[2])[0] + referrer_message.localhost[1];
                    else if (domain == 'baidu')
                        text = referrer_message.baidu[0] + referrer.search.split('&wd=')[1].split('&')[0] + referrer_message.baidu[1];
                    else if (domain == 'so')
                        text = referrer_message.so[0] + referrer.search.split('&q=')[1].split('&')[0] + referrer_message.so[1];
                    else if (domain == 'google')
                        text = referrer_message.google[0] + document.title.split(referrer_message.google[2])[0] + referrer_message.google[1];
                    else {
                        $.each(result.waifu.referrer_hostname, function(i,val) {if (i==referrer.hostname) referrer.hostname = getRandText(val)});
                        text = referrer_message.default[0] + referrer.hostname + referrer_message.default[1];
                    }
                } else text = referrer_message.none[0] + document.title.split(referrer_message.none[2])[0] + referrer_message.none[1];
            }
            showMessage(text, 6000);
        }
        
        var waifu_tips = result.waifu;
        
        function loadOtherModel() {
            var modelId = localStorage.getItem('modelId');
            var modelRandMode = live2d_settings.modelRandMode;
            
            $.ajax({
                cache: modelRandMode == 'switch' ? true : false,
                url: live2d_settings.modelAPI+modelRandMode+'/?id='+modelId,
                dataType: "json",
                success: function(result) {
                    loadModel(result.model['id']);
                    var message = result.model['message'];
                    $.each(waifu_tips.model_message, function(i,val) {if (i==result.model['id']) message = getRandText(val)});
                    showMessage(message, 3000, true);
                }
            });
        }
        
        function loadRandTextures() {
            var modelId = localStorage.getItem('modelId');
            var modelTexturesId = localStorage.getItem('modelTexturesId');
            var modelTexturesRandMode = live2d_settings.modelTexturesRandMode;
            
            $.ajax({
                cache: modelTexturesRandMode == 'switch' ? true : false,
                url: live2d_settings.modelAPI+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
                dataType: "json",
                success: function(result) {
                    if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0))
                        showMessage(waifu_tips.load_rand_textures[0], 3000, true);
                    else showMessage(waifu_tips.load_rand_textures[1], 3000, true);
                    loadModel(modelId, result.textures['id']);
                }
            });
        }
        
        /* 检测用户活动状态,并在空闲时显示一言 */
        if (live2d_settings.showHitokoto) {
            window.getActed = false; window.hitokotoTimer = 0; window.hitokotoInterval = false;
            $(document).mousemove(function(e){getActed = true;}).keydown(function(){getActed = true;});
            setInterval(function(){ if (!getActed) ifActed(); else elseActed(); }, 1000);
        }
        
        function ifActed() {
            if (!hitokotoInterval) {
                hitokotoInterval = true;
                hitokotoTimer = window.setInterval(showHitokotoActed, 30000);
            }
        }
        
        function elseActed() {
            getActed = hitokotoInterval = false;
            window.clearInterval(hitokotoTimer);
        }
        
        function showHitokotoActed() {
            if ($(document)[0].visibilityState == 'visible') showHitokoto();
        }
        
        function showHitokoto() {
        	switch(live2d_settings.hitokotoAPI) {
        	    case 'lwl12.com':
        	        $.getJSON('https://api.lwl12.com/hitokoto/v1?encode=realjson',function(result){
            	        if (!empty(result.source)) {
                            var text = waifu_tips.hitokoto_api_message['lwl12.com'][0];
                            if (!empty(result.author)) text += waifu_tips.hitokoto_api_message['lwl12.com'][1];
                            text = text.render({source: result.source, creator: result.author});
                            window.setTimeout(function() {showMessage(text+waifu_tips.hitokoto_api_message['lwl12.com'][2], 3000, true);}, 5000);
                        } showMessage(result.text, 5000, true);
                    });break;
        	    case 'fghrsh.net':
        	        $.getJSON('https://api.fghrsh.net/hitokoto/rand/?encode=jsc&uid=3335',function(result){
                	    if (!empty(result.source)) {
                            var text = waifu_tips.hitokoto_api_message['fghrsh.net'][0];
                            text = text.render({source: result.source, date: result.date});
                            window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);
                            showMessage(result.hitokoto, 5000, true);
                	    }
                    });break;
                case 'jinrishici.com':
                    $.ajax({
                        url: 'https://v2.jinrishici.com/one.json',
                        xhrFields: {withCredentials: true},
                        success: function (result, status) {
                            if (!empty(result.data.origin.title)) {
                                var text = waifu_tips.hitokoto_api_message['jinrishici.com'][0];
                                text = text.render({title: result.data.origin.title, dynasty: result.data.origin.dynasty, author:result.data.origin.author});
                                window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);
                            } showMessage(result.data.content, 5000, true);
                        }
                    });break;
        	    default:
        	        $.getJSON('https://v1.hitokoto.cn',function(result){
                	    if (!empty(result.from)) {
                            var text = waifu_tips.hitokoto_api_message['hitokoto.cn'][0];
                            text = text.render({source: result.from, creator: result.creator});
                            window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);
                	    }
                        showMessage(result.hitokoto, 5000, true);
                    });
        	}
        }
        
        $('.waifu-tool .fui-eye').click(function (){loadOtherModel()});
        $('.waifu-tool .fui-user').click(function (){loadRandTextures()});
        $('.waifu-tool .fui-chat').click(function (){showHitokoto()});
    }

     

    waifu-tips.json

    {
        "waifu": {
            "console_open_msg": ["哈哈,你打开了控制台,是想要看看我的秘密吗?"],
            "copy_message": ["你都复制了些什么呀,转载要记得加上出处哦"],
            "screenshot_message": ["照好了嘛,是不是很可爱呢?"],
            "hidden_message": ["我们还能再见面的吧…"],
            "load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],
            "hour_tips": {
                "t5-7": ["早上好!一日之计在于晨,美好的一天就要开始了"],
                "t7-11": ["上午好!工作顺利嘛,不要久坐,多起来走动走动哦!"],
                "t11-14": ["中午了,工作了一个上午,现在是午餐时间!"],
                "t14-17": ["午后很容易犯困呢,今天的运动目标完成了吗?"],
                "t17-19": ["傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~"],
                "t19-21": ["晚上好,今天过得怎么样?"],
                "t21-23": ["已经这么晚了呀,早点休息吧,晚安~"],
                "t23-5": ["你是夜猫子呀?这么晚还不睡觉,明天起的来嘛"],
                "default": ["嗨~ 快来逗我玩吧!"]
            },
            "referrer_message": {
                "localhost": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
                "baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
                "so": ["Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
                "google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
                "default": ["Hello! 来自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
                "none": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "]
            },
            "referrer_hostname": {
                "example.com": ["示例网站"],
                "www.fghrsh.net": ["FGHRSH 的博客"]
            },
            "model_message": {
                "1": ["来自 Potion Maker 的 Pio 酱 ~"],
                "2": ["来自 Potion Maker 的 Tia 酱 ~"]  
            },
            "hitokoto_api_message": {
                "lwl12.com": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>", ",是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],
                "fghrsh.net": ["这句一言出处是 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">FGHRSH</span> 在 {date} 收藏的!"],
                "jinrishici.com": ["这句诗词出自 <span style=\"color:#0099cc;\">《{title}》</span>,是 {dynasty}诗人 {author} 创作的!"],
                "hitokoto.cn": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。"]
            }
        },
        "mouseover": [
            { "selector": ".container a[href^='http']", "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么?"] },
            { "selector": ".fui-home", "text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦"] },
            { "selector": ".fui-chat", "text": ["一言一语,一颦一笑。一字一句,一颗赛艇。"] },
            { "selector": ".fui-eye", "text": ["嗯··· 要切换 看板娘 吗?"] },
            { "selector": ".fui-user", "text": ["喜欢换装 Play 吗?"] },
            { "selector": ".fui-photo", "text": ["要拍张纪念照片吗?"] },
            { "selector": ".fui-info-circle", "text": ["这里有关于我的信息呢"] },
            { "selector": ".fui-cross", "text": ["你不喜欢我了吗..."] },
            { "selector": "#tor_show", "text": ["翻页比较麻烦吗,点击可以显示这篇文章的目录呢"] },
            { "selector": "#comment_go", "text": ["想要去评论些什么吗?"] },
            { "selector": "#night_mode", "text": ["深夜时要爱护眼睛呀"] },
            { "selector": "#qrcode", "text": ["手机扫一下就能继续看,很方便呢"] },
            { "selector": ".comment_reply", "text": ["要吐槽些什么呢"] },
            { "selector": "#back-to-top", "text": ["回到开始的地方吧"] },
            { "selector": "#author", "text": ["该怎么称呼你呢"] },
            { "selector": "#mail", "text": ["留下你的邮箱,不然就是无头像人士了"] },
            { "selector": "#url", "text": ["你的家在哪里呢,好让我去参观参观"] },
            { "selector": "#textarea", "text": ["认真填写哦,垃圾评论是禁止事项"] },
            { "selector": ".OwO-logo", "text": ["要插入一个表情吗"] },
            { "selector": "#csubmit", "text": ["要[提交]^(Commit)了吗,首次评论需要审核,请耐心等待~"] },
            { "selector": ".ImageBox", "text": ["点击图片可以放大呢"] },
            { "selector": "input[name=s]", "text": ["找不到想看的内容?搜索看看吧"] },
            { "selector": ".previous", "text": ["去上一页看看吧"] },
            { "selector": ".next", "text": ["去下一页看看吧"] },
            { "selector": ".dropdown-toggle", "text": ["这里是菜单"] },
            { "selector": "c-player a.play-icon", "text": ["想要听点音乐吗"] },
            { "selector": "c-player div.time", "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"] },
            { "selector": "c-player div.volume", "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"] },
            { "selector": "c-player div.list-button", "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"] },
            { "selector": "c-player div.lyric-button", "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"] },
            { "selector": ".waifu #live2d", "text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!"] }
        ],
        "click": [
            {
                "selector": ".waifu #live2d",
                "text": [
                    "是…是不小心碰到了吧",
                    "萝莉控是什么呀",
                    "你看到我的小熊了吗",
                    "再摸的话我可要报警了!⌇●﹏●⌇",
                    "110吗,这里有个变态一直在摸我(ó﹏ò。)"
                ]
            }
        ],
        "seasons": [
            { "date": "01/01", "text": ["<span style=\"color:#0099cc;\">元旦</span>了呢,新的一年又开始了,今年是{year}年~"] },
            { "date": "02/14", "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>,{year}年找到对象了嘛~"] },
            { "date": "03/08", "text": ["今天是<span style=\"color:#0099cc;\">妇女节</span>!"] },
            { "date": "03/12", "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>,要保护环境呀"] },
            { "date": "04/01", "text": ["悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节,不要被骗了哦~</span>"] },
            { "date": "05/01", "text": ["今天是<span style=\"color:#0099cc;\">五一劳动节</span>,计划好假期去哪里了吗~"] },
            { "date": "06/01", "text": ["<span style=\"color:#0099cc;\">儿童节</span>了呢,快活的时光总是短暂,要是永远长不大该多好啊…"] },
            { "date": "09/03", "text": ["<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>,铭记历史、缅怀先烈、珍爱和平、开创未来。"] },
            { "date": "09/10", "text": ["<span style=\"color:#0099cc;\">教师节</span>,在学校要给老师问声好呀~"] },
            { "date": "10/01", "text": ["<span style=\"color:#0099cc;\">国庆节</span>,新中国已经成立69年了呢"] },
            { "date": "11/05-11/12", "text": ["今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"] },
            { "date": "12/20-12/31", "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>,主人肯定又去剁手买买买了~"] }
        ]
    }

     

    加进 header.php

    Markup

    <!-- 加载样式 -->
    <link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>

     

    加进 footer.php(须 jQuery 支持)

    Markup

    <div class="waifu">
        
        <!-- 提示框 -->
        <div class="waifu-tips"></div>
        
        <!-- 看板娘画布 -->
        <canvas id="live2d" 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="path/to/waifu-tips.js"></script>
    <script src="path/to/live2d.js"></script>
    
    <!-- 初始化看板娘,加载 waifu-tips.json -->
    <script type="text/javascript">
    	/* 可直接修改部分参数 */
        live2d_settings['modelId'] = 5;                  // 默认模型 ID
        live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
    	/* 在 initModel 前添加 */
    	initModel("https://www.example.com/path/to/waifu-tips.json")
    </script>

     

    或 实现自动加载,在 footer.php 的最后加上

    Markup

    <script src="https://www.example.com/path/to/autoload.js" type="text/javascript"></script>

     

    autoload.js

    JavaScript

    // 加载 CSS
    $("<link>").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head');
    
    // 插入 DIV
    $('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" 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>');
    
    // 加载 JS
    $.ajax({
    	url: 'https://www.example.com/path/to/waifu-tips.js',
    	dataType:"script",
    	cache: true,
    	async: false
    });
    $.ajax({
    	url: 'https://www.example.com/path/to/live2d.js',
    	dataType:"script",
    	cache: true,
    	async: false
    });
    
    // 初始化看板娘,加载 waifu-tips.json
    
    /* 可直接修改部分参数 */
    live2d_settings['modelId'] = 5;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
    /* 在 initModel 前添加 */
    initModel('https://www.example.com/path/to/waifu-tips.json');

     

    Demo

     

    打包下载

     

    API 接口

    • 截至目前,接口每日请求数高达 80+万次,并产生了大量的流量... 

    • 在 2018.05.12~2018.06.10 期间,API 请求数已达到 20138636 次

    • 希望大站 dalao 们看到能自建 API,源码在上方(可以联系我协助搭建

     

    更新日志

    • 2018-01-03:live2d.js 修复 IE,Edge 兼容性问题

    • 2018-03-02:API 新增 22,33,Shizuku,Neptunia 系列,Murakumo 模型

    • 2018-05-20:修复 waifu-tips.json 导致的 小bug,增加使用 hitokoto.cn 一言 API

    • 2018-11-06:waifu-tips.js 优化空闲显示一言判定,增加看板娘设置,增加更多 一言 API

    • 2018-11-10:优化代码,修复 bug,增加可在 waifu-tips.json 定制提示语,可在外部定义参数

    • 后续日志,见 GitHub - fghrsh/live2d_demo Releases (Live2D 看板娘插件 的前端 HTML 源码)

     

    其他插件

    Tips: 以上插件大概能替换 waifu-tips.js 来使用这边的 API (逃

    推荐一个 Live2D 模型资源收集站:https://mx.paugram.com/

     

    参考资料

     

     

     

    版权信息

     

             

    本文标题:网页添加 Live2D 看板娘

    本文链接:https://www.fghrsh.net/post/123.html

    作者授权:除特别说明外,本文由 fghrsh 原创编译并授权 FGHRSH 的博客 刊载发布。

    版权声明:本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

    展开全文
  • 第一步添加数据库库名为hf 第二步在目录下加入以下php网页showprocess.php 内容为 ?php require_once./Connections/connMain.php; $id = _REQUEST['main_id']; $comment = _REQUEST['textfield2']; //评论内容 $...
  • [Jekyll] 添加评论插件

    千次阅读 2014-05-06 17:49:58
    在github pages上用jekyll建立了一个静态博客,静态博客没有数据库什么的,于是准备使用第三方的评论插件添加到文章的评论部分。 国外的一般比较慢,有时候可能连不上。。。所以使用了国内的多说。 首先...
  • 发表评论网页

    千次阅读 2018-07-14 23:39:35
    需求:写一个发表评论功能的网页,可以删除评论 &lt;%@ page language="java" pageEncoding="GBk"%&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;发表评论&...
  • 网页添加(标签页)左上角的图标

    万次阅读 2016-08-31 22:01:50
    网页添加(标签页)左上角的图标 本人接触编程不久,对一些没有接触过的东西好奇心比较重,之所以会写博客,是因为之前保存到本地,由于一些原因,大部分丢失了,所以准备存到博客上,以便以后查看使用,可能会有...
  • 使用Vue组件为页面添加评论

    千次阅读 2019-03-22 17:48:11
    本文章将使用Vue.js组件为博客详情页添加评论功能,主要实现以下功能: 文章页面可查看评论 用户可进行评论,并且不需要刷新视图 准备工作 首先新建好Vue组件:Comment.vue 并将它在入口(默认为app.js)进行注册...
  • VLC网页插件添加对火狐浏览器的支持 2016-11-23 16:56 546人阅读 评论(1) 收藏 举报  分类: HTML(6)  原文转自:http://blog.csdn.NET/gsls200808/article/details/25536113 1.用...
  • CSS给网页上的评论文本框加上提醒功能背景图片
  • Hexo+yilia主题添加网页访问计数功能

    千次阅读 2019-03-29 09:54:57
    Hexo+yilia主题添加网页访问计数功能)yilia 主题下的网站流量计数系统在`themes/yilia/_config.yml `中添加属性添加不算子网站访问量统计脚本在你需要的位置添加访问量生成以及显示效果 yilia 主题下的网站流量计数...
  • 目录 目录 说明 注意事项 ...结构化数据是网页中一段固定格式的字符串,是个网页内容的元数据。搜索引擎通过结构化数据可以更好的理解页面内容,在搜索结构中呈现页面的时候,以富媒体方式展示。 ...
  • 使用python,爬取网页评论

    千次阅读 2019-05-11 21:07:36
    使用python,爬取网页评论(实例:豆瓣《都挺好》) python的第三方库丰富了python的功能,今天就用python的第三方库requests和bs4这两个库来实现对一个网页的爬取 操作环境 python3.7.2 requests库 bs4库 requests...
  • Jekyll博客添加GitTalk评论

    千次阅读 2018-11-11 07:08:29
    之前一直用的是来必力的评论系统,还不错,但是个人不太喜欢来必力的界面,感觉加载速度有点慢(个人感觉)。所以换成GitTalk的评论系统,话不多说,我们来上硬货。 注册申请 在GitHub上注册新应用,链接:...
  • 钉钉网页直播回放添加控件(倍速)脚本

    万次阅读 热门讨论 2020-02-04 15:34:36
    如果想加入什么功能可以留言(评论),比如说弹幕什么的,我会更新脚本,谢谢支持! Ⅱ 一次性使用倍速控件方法:Console控制台 ①进入钉钉GroupLive网课网页页面,呼出开发者工具(快捷键F12或在浏览器右上角的...
  • Hexo博客yilia主题添加Gitment评论系统

    千次阅读 2019-04-16 15:48:58
    gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址 实现方便,只要简单的配置 没有广告,这个很重要 注册OAuth Application 注册网址: ...
  • Chrome扩展程序,可从任何网页访问向Trello添加卡。 创建此扩展名是为了减轻将卡添加到列表的麻烦,并以当前选项卡的URL作为注释。 考虑将卡添加到TODO板上,并带有指向电子邮件的链接作为注释,而无需切换到...
  • 博客中的评论系统其实是个很复杂的东西,但是网上已经有现成的轮子了,比如django-...1、添加评论模型 评论也是需要记录在数据库中的,因此我们需要在models.py中为它创建一个模型,由于我们不提供注册服务,因...
  • 网页还支持将位置添加到收藏夹列表和从收藏夹列表中删除位置,以及将位置信息发布到Twitter。 2.它写的是什么? 它是用三个版本编写的。 更具体: Nodejs版本实现了一个全面的Web应用程序 1. Allow user to ...
  • Hexo添加RSS和评论插件

    千次阅读 2016-03-20 23:52:29
    根目录下的配置信息:在# Extensions中添加,已经有的就免了。 plugins: hexo-generator-feed 打开Terminal(终端)输入:运行 npm install hero-generator-feed 重新部署: hexo clean hexo d -
  • 1.评论框及评论内容展示模板如下: div id="comment"> h3>strong>发表评论:strong>h3> p>span>标题:span> input type="text" name="" id="comm_title" class="text">p> p>span>内容:span>textarea rows=...
  • 在html页面添加评论和回复的显示页面

    万次阅读 热门讨论 2018-03-23 17:13:24
    在html页面添加评论和回复的显示页面 先来看看效果图,用了Layui的框架,图片查看用了layui的photos,这功能很赞。 源码如下: <!doctype html> <html> <head> <meta ...
  • 按照官方说法,只需要在config.toml文件中加上disqus的shortname即可让博客拥有disqus评论系统的功能。但折腾许久未能成功,现提供另一种添加disqus的方式。1.注册disqus 官网注册帐号 https://disqus.com/ 使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,674
精华内容 16,269
关键字:

网页添加评论