给网站评论增加表情

主题的评论模块主要涉及以下文件：

1. comments.php：该文件处理评论表单的显示、评论列表的展示以及评论相关的交互逻辑，包括评论表情的显示与使用。
2. widgets/comments.php：定义了一个名为CorePress_comments_widget的小部件，用于显示最新评论，其中调用了corepress_comment_face函数处理评论中的表情。
3. component/set-comment.php：提供评论功能的设置界面，可开关评论表情和禁止纯英文评论。
4. static/css/comment-module.css：包含评论模块的样式，如评论表情面板的样式。
5. geekframe/support.php：定义了corepress_comment_face函数，用于将评论中的表情代码替换为对应的表情图片。

添加表情功能实现代码归纳

1. 评论设置界面（component/set-comment.php）

该文件提供了一个开关，用于开启或关闭评论表情功能。

<h3>评论功能开关</h3>

<div class="set-plane">
    <div class="set-title">
        评论表情
    </div>
    <div class="set-object">
        <el-switch
            v-model="set.comment.face"
            :active-value="1"
            :inactive-value="0"
        >
        </el-switch>
    </div>
</div>

2. 评论表单与表情显示（comments.php）

在评论表单中添加表情按钮和表情面板，并处理表情的点击事件。

<?php
global $set;
$comment_face = '';
if ($set['comment']['face'] == 1) {
    $comment_face = '<button class="popover-btn popover-btn-face" type="button"><i class="far fa-smile-wink"></i> 添加表情</button>
        <div class="conment-face-plane">
           ' . file_load_face() . '
        </div>
        ';
}

$comment_form_args = array(
    // ... 其他表单参数
    'comment_field' => $user_avatar . '<div class="comment_form_textarea_box"><textarea class="comment_form_textarea" name="comment" id="comment" placeholder="发表你的看法" rows="5"></textarea><div id="comment_addplane">' . $comment_face . '</div></div></div>',
    // ... 其他表单参数
);
comment_form($comment_form_args);
?>

<script type='text/javascript'>
    <?php
    if ($set['comment']['face'] == 1) {
    ?>
    $(document).click(function (e) {
        $('.conment-face-plane').css("opacity", "0");
        $('.conment-face-plane').css("visibility", "hidden");
        e.stopPropagation();
    });
    $('body').on('click', '.img-pace', function (e) {
        $('.comment_form_textarea').val($('.comment_form_textarea').val() + '[f=' + $(this).attr('facename') + ']')
    });
    $('body').on('click', '.popover-btn-face', function (e) {
        if ($('.conment-face-plane').css("visibility") == 'visible') {
            $('.conment-face-plane').css("opacity", "0");
            $('.conment-face-plane').css("visibility", "hidden");
        } else {
            $('.conment-face-plane').css("opacity", "1");
            $('.conment-face-plane').css("visibility", "visible");
        }
        e.stopPropagation();
    });
    <?php
    }
    ?>
</script>

3. 表情代码替换函数（geekframe/support.php）

定义corepress_comment_face函数，将评论中的表情代码[f=表情名]替换为对应的表情图片。

function corepress_comment_face($incoming_comment)
{
    $pattern = '/\[f=(.*?)\]/';
    $isMatched = preg_match_all($pattern, $incoming_comment, $match);
    if ($isMatched == 0) {
        return $incoming_comment;
    }
    $path = THEME_PATH . "/static/img/face/";
    foreach ($match[1] as $facename) {
        if (file_exists($path . $facename . '.gif')) {
            $incoming_comment = str_replace("[f={$facename}]", '<img src="' . THEME_IMG_PATH . '/face/' . $facename . '.gif" width="30">', $incoming_comment);
        }
    }
    return $incoming_comment;
}

4. 评论小部件中使用表情（widgets/comments.php）

在评论小部件中调用corepress_comment_face函数处理评论内容。

<p><?php echo corepress_comment_face((utf8_excerpt($comment->comment_content, 55))); ?></p>

5. 评论模块样式（static/css/comment-module.css）

定义评论表情面板的样式。

#comment_addface{position:relative}.conment-face-plane{position:absolute;transition:.15s;box-shadow:0 5px 10px rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.2);border-radius:6px;top:100%;padding:10px;background:#fff;max-width:300px;z-index:9999;opacity:1;visibility:hidden}.popover-btn-face{margin-top:10px}.popover-btn{border-radius:4px;display:inline-block;transition:.15s;vertical-align:middle;padding:.3em .5em;text-align:center;line-height:1.44;border:0;outline:0}

移植到其他主题的注意事项

• 文件路径和常量：确保THEME_PATH和THEME_IMG_PATH等常量在新主题中正确定义，并且表情图片的存储路径与代码中的路径一致。
• 依赖库：确保新主题中包含jQuery库，因为代码中使用了jQuery来处理事件。
• 模板兼容性：根据新主题的模板结构，调整评论表单和评论列表的显示位置和样式。