前言

以下是改进版的博客评论打卡功能,新版引入了评论 一键打卡 3个模块,下面是实现方法,请按需各站长"食用":

⚠️ 注意:本教程仅在 handsome 主题下通过测试,其它平台请自行 DIY 。

新样式

原样式

操作步骤

第一步:打开 Handsome 主题目录下的 component/comments.php 文件,找到并删除如下内容:

接着在相同位置,加入以下 HTML 代码:

                    <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                            <span class="required text-danger">(请使用真实邮箱地址,方便及时接收评论回复!)</span>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="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>

提示:第二步详细教程,评论回复,刷新网页可见 !!

此处内容需要评论回复后(审核通过)方可阅读。

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

/*评论一键打卡、赞、踩 */
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

此时,已完成所有所需步骤,刷新网页即可看到新的评论效果!

最后修改:2022 年 06 月 07 日
如果觉得我的文章对你有用,请随意赞赏