Typecho实现一键评论打卡功能(完整版)

前言

18年的时候发布了一个没有完善的版本 一直没有时间改 今天就改了完整版
1.png

教程

我用的handsome主题 其他的自己改 但是也挺简单的

1、首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:
2、然后在后台-->设置外观-->PJAX-->PJAX回调函数也加入以下的代码(否则pjax与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, " 写得好好哟,我要给你生猴子!::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")
    }
};

3、打开主题目录的component/comments.php130行后加入以下代码:

代码

                      <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>


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

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}


然后就大功告成了 快点来水评论吧!!!

Last modification:September 19th, 2019 at 01:15 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

29 comments

  1. 肉夹馍

    点击打卡后光标在时间位置,不在行末

  2. 拾光

    滴!学生卡!打卡时间:下午8:13:30,请上车的乘客系好安全带~

  3. bo

    滴!学生卡!打卡时间:上午9:34:40 写得好好哟,我要给你生猴子! 骚年,我怀疑你写了一篇假的文章! ,请上车的乘客系好安全带~

  4. 阿龙

    滴!学生卡!打卡时间:下午5:39:58,请上车的乘客系好安全带~

  5. YZ

    为什么我的打卡在表情的下一行

    1. 肉夹馍
      @YZ

      130行的那个div加入inline显示即可。

  6. 南楼月下

    滴!学生卡!打卡时间:下午5:47:11,请上车的乘客系好安全带~

  7. Mark

    不错的教程 学习了

  8. 泽泽

    嫌自己垃圾评论不够多吗

    1. T4
  9. 森七

    滴!学生卡!打卡时间:下午9:48:40,请上车的乘客系好安全带~

  10. 2063266105

    滴!学生卡!打卡时间:下午7:54:06,请上车的乘客系好安全带~

  11. canwu

    滴!学生卡!打卡时间:上午8:50:56,请上车的乘客系好安全带~

  12. 松鼠大大

    滴!学生卡!打卡时间:下午7:21:58,请上车的乘客系好安全带~

  13. 333

    262

  14. 6666

    写得好好哟,我要给你生猴子!

  15. JiuDe

    滴!学生卡!打卡时间:上午11:13:01,请上车的乘客系好安全带~

  16. 松鼠大大

    滴!学生卡!打卡时间:上午8:49:22,请上车的乘客系好安全带~

  17. 柒染

    滴!学生卡!打卡时间:下午9:41:17,请上车的乘客系好安全带~

  18. Citrons

    滴!学生卡!打卡时间:21:25:38 GMT+0800 (CST),请上车的乘客系好安全带~

  19. 留芳网

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

  20. 时光笔记

    滴!学生卡!打卡时间:下午2:08:08,请上车的乘客系好安全带~

  21. Asdrt

    滴!学生卡!打卡时间:下午12:36:35,请上车的乘客系好安全带~

  22. 松鼠大大

    滴!学生卡!打卡时间:下午7:55:02,请上车的乘客系好安全带~

  23. 颓废猫

    滴!学生卡!打卡时间:下午9:36:48,请上车的乘客系好安全带~

  24. 丘八

    写的很好,支持一下

  25. 颓废猫

    滴!学生卡!打卡时间:下午11:45:46,请上车的乘客系好安全带~

  26. 2063266105

    滴!学生卡!打卡时间:下午10:01:25,请上车的乘客系好安全带~

  27. 颓废猫

    滴!学生卡!打卡时间:下午9:42:42,请上车的乘客系好安全带~