[typecho]给Joe主题添加评论隐私回复

一、预览

二、教程

1.将下面这段代码插入评论区public\comment.php（请自行美化样式，在提交评论的按钮前）

<!--新版密语开始--> 
<?php if ($this->options->PrivateComments !== "off") : ?>
    <div class="comment_box" onclick="document.getElementById('PrivateComments').click()" style="">
    <i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i>
    <span class="title" >密语</span>
    <input type="checkbox" style="display: none;" name="is-private" id="PrivateComments">
    </div>
<?php endif; ?>
<!--新版版密语结束 --> 

<input type="checkbox" name="is-private" id="PrivateComments"><label for="PrivateComments" class="PrivateCommentsLable">

2.插入JS，将下面这段代码插入 comment.php 最下方

<!--隐私评论-->
<script>function preventDeletingText(){var e=document.getElementById("comment");e.value.startsWith("密语# ")||(e.value="密语# "+e.value.substring(3))}document.getElementById("PrivateComments").addEventListener("click",function(){var e=document.getElementById("comment");if(document.getElementById("PrivateComments").checked){Qmsg.info("已开启密语");var t=e.value;e.style.filter="background-color: red;",e.value="密语# "+t,e.addEventListener("input",preventDeletingText)}else Qmsg.info("已关闭密语"),e.style.filter="background-color: black;",e.value=e.value.replace("密语# ",""),e.removeEventListener("input",preventDeletingText)});</script>

<!--隐私评论-->
<script>
    document.getElementById('PrivateComments').addEventListener('click',
    function() {
        var commentField = document.getElementById('comment');
        if (document.getElementById('PrivateComments').checked) {
            Qmsg.info('已开启密语');
            var currentValue = commentField.value;
            commentField.style.backgroundColor = '#dde8dd';
            commentField.value = '密语# ' + currentValue;
            commentField.addEventListener('input', preventDeletingText)
        } else {
            Qmsg.info('已关闭密语');
            commentField.style.backgroundColor = '';
            commentField.value = commentField.value.replace('密语# ', '');
            commentField.removeEventListener('input', preventDeletingText)
        }
    });
    function preventDeletingText() {
        var commentField = document.getElementById('comment');
        if (!commentField.value.startsWith('密语# ')) {
            commentField.value = '密语# ' + commentField.value.substring(3)
        }
    }
</script>

3.修改评论输出语句（以Joe主题为例） 在comment.php

原来<?php _parseCommentReply($comments->content);
修改为

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复【验证码】，获取验证码。 在微信里搜索“TechBars”或者微信扫描右侧二维码都可以关注本站微信公众号。

4.修改comment.php文本输入框，给文本框添加 id="comment"

<textarea class="text joe_owo__target"  name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图或者点击上传图片试试？"></textarea>

改为

 <textarea class="text joe_owo__target" id="comment" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图或者点击上传图片试试？"></textarea>

如果你的主题输入框已有id值，就将js中的'comment' 修改为主题的id值

5.修改侧边栏评论输出语句 在aside.php

找到

<?php _parseAsideReply($item->content); ?>

修改为

<!--aside.php侧边栏密语输出开始-->
<?php
$db = Typecho_Db::get();
$smyk = $db->fetchRow($db->select('mail')->from('table.comments')->where('coid = ?', $item->parent)->limit(1)); // 读取父评论内容和邮件
$smhf = $item->mail;
$user = Typecho_Widget::widget('Widget_User');

// 检查当前评论是否私密
$isCurrentPrivate = strpos($item->content, '密语# ') !== false;
// 检查父评论是否私密
$isParentPrivate = !empty($smyk['content']) && strpos($smyk['content'], '密语# ') !== false;

// 获取当前访客的邮箱
$ykmail = Typecho_Cookie::get('__typecho_remember_mail');

// 判断当前用户是否有权限查看该评论
$canSeeComment = ($smhf == $user->mail || $smhf == $ykmail || $user->group == 'administrator' || (!empty($smyk['mail']) && $smyk['mail'] == $ykmail));

// 如果当前评论是私密的，或其父级评论是私密的
if ($isCurrentPrivate || $isParentPrivate) 
{
   if ($canSeeComment) 
       {
        _parseAsideReply(str_replace('密语# ', '', $item->content));
       } 
   else 
       {
       echo '<div class="SecretComments" style="color: red;">此条为私密评论，发布者可见</div>';
       }
} 
else 
{
_parseAsideReply($item->content);
}
?>
<!--aside.php侧边栏密语输出结束-->

6.给class="SecretComments"添加css代码

在joe后台自定义CSS添加代码

div.SecretComments {
    background: repeating-linear-gradient(145deg,var(--classB),var(--classB) 15px,var(--background) 0,var(--background) 30px);
    display: block;
    color: var(--main);
    border-radius: 5px;
    margin: auto 0;
    text-align: center;
}

7.修改joe.global.js处理开启匿名评论的BUG

匿名评论时用户的邮箱会被设置为 'niming@nm.com'，这可能导致所有匿名用户的评论都被识别为同一用户。
我们需要确保在处理密语评论时能够正确区分不同匿名用户。
找到joe.global.js里/* 激活评论提交 */的代码，修改如下

PS：解决表情、语录、密语排版问题
comment.php中

                    <div class="foot">
                        <div class="owo joe_owo__contain"></div>
                        
                        <?php if ($this->options->Comment_Citation !== "off") : ?>
                            <div class="Comment_Citation" title="语录" style="">
                                <div class='comment_box'>
                                    <i class='fa fa-fw fa-refresh' aria-hidden='true'></i>
                                    <span class="title">语录</span>
                                </div>
                            </div>
                            <?php endif; ?>
                        <!--密语开始--> 
                        <?php if ($this->options->PrivateComments !== "off") : ?>
                        <div class="comment_box" onclick="document.getElementById('PrivateComments').click()" style="">
                            <i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i>
                            <span class="title" >密语</span>
                            <input type="checkbox" style="display: none;" name="is-private" id="PrivateComments">
                        </div>
                        <?php endif; ?>
                        <!--密语结束 -->  
                        <div class="submit">
                            <span class="cancle joe_comment__cancle">取消</span>
                            <button type="submit">发送评论</button>
                            <input style="<?php if(Helper::options()->NimingComment !== 'on') echo 'display:none;'  ?>" id="joe_comment_niming" class="barrager" type="checkbox" title="开启/关闭匿名">
                                                    </div>
                    </div>

改为

<div class="foot">
    <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <div class="owo joe_owo__contain"></div>
        
        <?php if ($this->options->Comment_Citation !== "off") : ?>
            <div class="Comment_Citation" title="语录" style="margin-left: 5px;">
                <div class='comment_box'>
                    <i class='fa fa-fw fa-refresh' aria-hidden='true'></i>
                    <span class="title">语录</span>
                </div>
            </div>
        <?php endif; ?>
        
        <!--密语开始--> 
        <?php if ($this->options->PrivateComments !== "off") : ?>
            <div class="comment_box" onclick="document.getElementById('PrivateComments').click()" style="margin-left: 5px;">
                <i class="fa fa-fw fa-eye-slash" aria-hidden="true"></i>
                <span class="title">密语</span>
                <input type="checkbox" style="display: none;" name="is-private" id="PrivateComments">
            </div>
        <?php endif; ?>
        <!--密语结束 -->
    </div>
    
    <div class="submit">
        <span class="cancle joe_comment__cancle">取消</span>
        <button type="submit">发送评论</button>
        <input style="<?php if(Helper::options()->NimingComment !== 'on') echo 'display:none;'  ?>" id="joe_comment_niming" class="barrager" type="checkbox" title="开启/关闭匿名">
    </div>
</div>

其次joe.global.js，让owo添加同样悬停变蓝色。

<div class="seat">OωO</div>
···············省略
 $(".joe_owo__contain .seat").on("click", function (e) {

改为

<div class="comment_box">OωO</div>
···············省略
 $(".joe_owo__contain .comment_box").on("click", function (e) {