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

此教程仅以Handsome主题为例 其他主题请修改相应代码

使用指南

  1. 首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码: PJAX回调函数也加入这个代码
function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子!::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")
    }
};
  1. 打开主题目录的component/comments.php里面的126行到144行附近:
                    <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?>
                            <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" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
              <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
          <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></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>
  1. 在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

效果图

请输入图片描述

-------------本文结束感谢您的阅读-------------
最后修改:2019 年 10 月 13 日 12 : 42 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论

7 条评论

  1. 皮皮凛 Google Chrome 77.0.3865.90 Windows 10

    我使用是报错了,你的自定义JS是不是贴错了
    function a(a, b, c) {
    if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
    else if (a.selectionStart || "0" == a.selectionStart) {
    var l = a.selectionStart,
    m = a.selectionEnd,
    n = m;
    c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
    c ? n += b.length + c.length : n += b.length - m + l;
    l == m && c && (n -= c.length);
    a.focus();
    a.selectionStart = n;
    a.selectionEnd = n
    } else a.value += b + c, a.focus()
    }
    var b = (new Date).toLocaleTimeString(),
    c = document.getElementById("comment") || 0;
    window.SIMPALED = {};
    window.SIMPALED.Editor = {
    daka: function() {
    a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
    a(c, " 写得好好哟,我要给你生猴子! ")
    },
    cai: function() {
    a(c, "骚年,我怀疑你写了一篇假的文章! ")
    }
    };
    这个才是吧,从你网站源码找的

    1. 灵曦 Google Chrome 76.0.3809.100 Windows 7
      @皮皮凛

      我重新发了

    2. 灵曦 Google Chrome 76.0.3809.100 Windows 7
      @皮皮凛

      是少了 记得发的时候没少啊 ~~~ 回调函数也要填

  2. 皮皮凛 Google Chrome 77.0.3865.90 Windows 10

    自定义JS是不是少了点东西?

  3. 七月 Google Chrome 63.0.3239.132 Windows 10

    滴!学生卡!打卡时间:上午1:05:20 ,请上车的乘客系好安全带~

  4. 林叶展弟弟 Google Chrome 63.0.3239.132 Windows 10

    新版是126至141行,请注意更新

    1. 灵曦 Google Chrome 76.0.3809.100 Windows 7
      @林叶展弟弟

      感谢提醒