前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Typecho下实现一键评论打卡功能

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

作者头像
Xcnte
发布2021-12-14 10:32:55
7030
发布2021-12-14 10:32:55
举报
文章被收录于专栏:Blog记录

前言

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

2019-5-10

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

2019-5-29

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

教程

以Handsome主题为例

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

代码语言: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行:

替换为以下代码:

代码语言:javascript
复制
                    <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加入以下代码:

代码语言:javascript
复制
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

版权属于:Xcnte' s Blog(除特别注明外)

本文链接:https://cloud.tencent.com/developer/article/1918352

本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 教程
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档