Xcnte

Typecho下实现一键评论打卡功能
前言 非本站原创,本站只优化了显示样式(样式来于Mark's Blog)及部分代码
扫描右侧二维码阅读全文
24
2019/04

Typecho下实现一键评论打卡功能

前言

非本站原创,本站只优化了显示样式(样式来于Mark's Blog)及部分代码

2019-5-10
修复了每次评论前,有概率要先单击评论框,否则无法发表评论

2019-5-29
修复了添加打卡功能后,移动端中评论框表情无法正常显示

教程

以Handsome主题为例

1、首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:

function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

2、打开主题目录的component/comments.php里面的126行到141行:

替换为以下代码:

                    <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> <span class="required text-danger">(请使用真实邮箱地址,方便接收评论回复)</span>
                            <span class="required text-danger"></span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴!访客卡!请上车的乘客系好安全带,现在是:')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

3、在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}
Last modification:May 29th, 2019 at 10:12 pm
如果觉得我的文章对你有所帮助,请随意赞赏

Leave a Comment

57 comments

  1. Alvin

    时光机的私密评论位置不对

    1. Xcnte
      @Alvin

      自己调整一下即可

  2. 混迹

    想make一下可以吗?也不是转载,有出处的。

    1. Xcnte
      @混迹

      可以

      1. 混迹
        @Xcnte

        http://hunji.xyz/index.php/archives/107/

  3. 酷酷的二货

    博主你这个复制成功的弹窗怎么弄的

    1. Xcnte
  4. 风凉

    我部署进去点击打卡,没有反应,没有任何执行。

    1. Xcnte
      @风凉

      仔细看文章吧

      1. 风凉
        @Xcnte

        博客原有js和新添加的有矛盾。

      2. 风凉
        @Xcnte

        模板是一样的,安装每一步都是弄好了。

        1. Xcnte
          @风凉

          我使用并没有问题
          或者给一下演示地址

  5. 风凉

    滴!访客卡!请上车的乘客系好安全带,现在是:Thu Aug 29 2019 22:00:50 GMT+0800 (CST)

  6. 模板

    滴!访客卡!请上车的乘客系好安全带,现在是:Tue Aug 20 2019 15:01:06 GMT+0800 (中国标准时间)
    文章写得不错,支持一下!骚年,我怀疑你写了一篇假的文章!

  7. Hcat

    滴!访客卡!请上车的乘客系好安全带,现在是:Sat Aug 10 2019 19:31:39 GMT+0800 (中国标准时间)

  8. 凉心

    滴!访客卡!请上车的乘客系好安全带,现在是:Wed Aug 07 2019 20:01:28 GMT+0800 (CST)

  9. 泽泽

    滴!访客卡!请上车的乘客系好安全带,现在是:Sat Aug 03 2019 13:44:52 GMT+0800 (中国标准时间)

  10. ridd1ot

    滴!访客卡!请上车的乘客系好安全带,现在是:Tue Jul 30 2019 09:01:41 GMT+0800 (中国标准时间)

  11. 源偉

    滴!签到卡!请上车的乘客系好安全带,现在是:Sun Jul 21 2019 15:31:58 GMT+0800 (中国标准时间)

  12. 鸟不拉屎

    滴!签到卡!请上车的乘客系好安全带,现在是:Thu Jul 04 2019 13:50:09 GMT+0800 (中国标准时间)

  13. 阿七博客

    滴!签到卡!请上车的乘客系好安全带,现在是:Thu Jul 04 2019 12:39:15 GMT+0800 (中国标准时间)

  14. 易梦

    滴!签到卡!请上车的乘客系好安全带,现在是:Thu Jun 27 2019 13:51:21 GMT+0800 (CST)

  15. 无言

    滴!签到卡!请上车的乘客系好安全带,现在是:Mon Jun 10 2019 10:17:23 GMT+0800 (中国标准时间)

  16. Xcnte

    感谢一位友人的反馈(关于添加打卡功能后,移动端中评论框表情无法正常显示的问题)
    已经修复,请更新一下文章的给出的css代码

  17. 阿强
    该评论仅登录用户及评论双方可见
    1. Xcnte
      @阿强
      该评论仅登录用户及评论双方可见
      1. 阿强
        @Xcnte
        该评论仅登录用户及评论双方可见
        1. Xcnte
          @阿强

          已修复!请更新文章中给出css代码

          1. 阿强
            @Xcnte
            该评论仅登录用户及评论双方可见
            1. Xcnte
              @阿强

              ヾ(≧∇≦*)ゝ

        2. Xcnte
          @阿强

          好的,感谢反馈,晚点修复

  18. Kali博客

    你好!能分享下显示浏览器和系统的插件吗?

    1. Xcnte
      @Kali博客

      博客地址:https://blog.xiaojian.party/ 看置顶文章

  19. 迷恋

    滴!签到卡!请上车的乘客系好安全带,现在是:Mon May 27 2019 15:14:02 GMT+0800 (中国标准时间)

  20. MC

    滴!签到卡!请上车的乘客系好安全带,现在是:Sun May 19 2019 23:00:44 GMT+0800 (CST)

  21. 猪蹄君

    滴!访客卡!请上车的乘客系好安全带,现在是:Fri May 10 2019 22:20:59 GMT+0800 (CST)

  22. Xcnte

    修复一个小毛病
    使用的朋友
    请更新了一下js代码

  23. 爱莉

    草 (是个大佬 其实我是来水评论的。。

  24. 小科

    我的又发表失败,原因是系统认为你没有输入任何字符,所以失败
    打卡后,再手动输入任何字符,才能发表成功!

    1. Xcnte
      @小科

      文章中给出的代码修改了,你可以重新改一下试试

  25. 小科

    滴!访客卡!请上车的乘客系好安全带,现在是:Sun May 05 2019 10:25:19 GMT+0800 (China Standard Time)

  26. 小科

    提示评论的内容不符合规矩!

    1. Xcnte
      @小科

      一直这样吗?

      1. 小科
        @Xcnte

        点“打卡” 提交,提示不符合规则。

        1. Xcnte
          @小科

          看到了,要刷新一下页面才能解决,你可以尝试修改一下文字内容,看看还会不会

          1. 小科
            @Xcnte

            嗯,解决了!修改了下文字内容就可以了!

  27. temperature

    biu~star~

  28. Xcnte

    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Sun Apr 28 2019 12:15:07 GMT+0800 (中国标准时间)

  29. Airs_Lau

    要是能做成插件就好了

    1. Xcnte
      @Airs_Lau

      好主意

  30. 哟哟C

    安装上了但是自己登陆成功点击评论不行

    1. Xcnte
      @哟哟C

      我这边看了一下,没问题哦

  31. 范明明

    评论不上,是怎么回事?

    1. Xcnte
      @范明明

      博文评论不了吗?估计是pjax的锅

  32. 猪蹄君

    已经安装上了,谢谢老铁

  33. 猪蹄君

    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Thu Apr 25 2019 11:30:56 GMT+0800 (中国标准时间)

  34. wazty

    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Thu Apr 25 2019 10:47:55 GMT+0800 (中国标准时间)