风铃语

gridea

Gridea 博客加上Valine评论系统：https://kveln.cn/post/qE678A4ce/open in new window

Gridea 博客增加搜索功能：https://tangkaichuan.cn/search-for-gridea-blog/open in new window

使用 instant.page 预加速 Gridea 博客：https://kveln.cn/post/BMDxD6cBT/open in new window

连接 coding 步骤

gridea 添加配置

Gridea添加配置

1、域名：静态pages应用域名
2、仓库：仓库的名字，例如：blogs
3、仓库用户名：账户名
4、token：添加在coding上设置的访问令牌
5、CNAME：添加三方域名，可不设置。

coding 添加 token 配置

coding添加token配置

开启静态 pages

coding可一键开启

开启静态pages

添加看板猫

下载相应模型

在github上搜索live2d或者live2dmodel可以找到很多相关的优质项目，例如： Live2Dopen in new windowlive2d-widget-modelsopen in new window

放置目录

本人将所有live2d都放在了assets目录下，如果你有更好的目录或者引入方式(比如npm install方式)，可以按照你的想法来哦～

放置目录

配置个性化提示语

修改message.json内容可以定义自己喜欢的名言语录哦～

{
  "mouseover": [
    {
      "selector": ".inline a.menu",
      "text": [
        "hi，看官，要去看看吗，很精彩哦！"
      ]
    },
    {
      "selector": "#searchbox",
      "text": [
        "在找什么东西呢，需要帮忙吗？"
      ]
    }
  ],
  "click": [
    {
      "selector": "#landlord #live2d",
      "text": [
        "是不是累了！快放松一下吧~~",
        "我是不是很萌很可爱！",
        "我们一起学猫叫，一起喵喵喵喵喵！",
        "在你面前撒个娇，哎呦喵喵喵喵喵！",
        "天青色等烟雨，而我在等你",
        "哈哈哈哈哈哈哈哈哈"
      ]
    }
  ]
}

添加 cat.ejs 文件

<!-- 看板白猫 -->
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="hide-button">隐藏</div>
</div>

<!-- 看板白猫 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
  function loadScript(url, callback) {
   let script = document.createElement('script');
   if (script.readyState) { // IE
    script.onreadystatechange = function () {
     if (script.readyState === 'loaded' || script.readyState === 'complete') {
       script.onreadystatechange = null;
       callback();
     }
    } 
   } else { // 其他浏览器
    script.onload = function () {
     callback();
    }
   }
   script.src = url;
   document.body.appendChild(script);
  }

  var ua = window.navigator.userAgent.toLowerCase();
  var inWindow = !(/android|ipad|iphone|iPod/i.test(ua));
  // 电脑端加载并显示看板猫，移动端很容易崩溃，所以并不建议在移动端展示哦～
  if (inWindow) {
   var message_Path = 'https://....../media/live2d/';
   var link1 = "https://....../media/live2d/live2d.js";
   var link2 = "https://....../media/live2d/message.js";

   loadScript(link1, function(){
    loadScript(link2, function(){
     // 白天展示白猫，黑夜展示黑猫，嘿嘿嘿～
     var hour = (new Date()).getHours();
     if (hour > 6 && hour < 18) {
      loadlive2d("live2d", "https://....../media/live2d/modelWhiteCat/tororo.model.json");
     } else {
      loadlive2d("live2d", "https://....../media/live2d/modelBlackCat/hijiki.model.json");
     }
    })
   })
  }
</script>

引入看板猫

先将1、2、3步骤的修改部署至静态pages后； 接下来只需要在相应的页面引入cat.ejs就可以看到看板猫哦～

<%- include('./_blocks/cat') %>

效果图

效果图

添加 gittalk 评论配置

创建 OAuth Apps

创建链接：https://github.com/settings/applications/newopen in new window

创建OAuth Apps

进入 OAuth Apps 详情，复制 Client ID 和 Client Secret

复制Client ID复制Client Secret

gridea 添加 gittalk 配置

Gridea添加gittalk配置

添加 gittalk 时问题及解决

Not Found

Not Found

解决方案：此问题多为OAuth Apps的Homepage URL、Authorization callback URL和Gridea中的配置错误导致，细心检查配置正确链接即可。

需初始化创建问题

需初始化创建问题

解决方案：

  1. 开启GitHub仓库的Issues功能；

开启GitHub仓库的功能

  1. 检查gittalk的id配置，长度是否超出限制；

检查gittalk的id配置

https://github.com/gitalk/gitalk/blob/master/readme-cn.md