Files
argon-theme/comments.php
nanhaoluo ea4663472c refactor: 重构评论区回复提示框
- 重新设计 HTML 结构,更清晰的布局
- 新增回复图标和用户名高亮显示
- 关闭按钮改为圆形,悬停时旋转动画
- 使用 CSS 动画替代 jQuery slideDown/slideUp
- 添加渐变背景和阴影效果
- 优化深色模式适配
2026-01-16 15:18:22 +08:00

532 lines
22 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="comments-area card shadow-sm comments-collapsed<?php if (get_option('argon_comment_avatar_vcenter') == 'true'){echo " comment-avatar-vertical-center";} ?>">
<div class="card-body">
<?php if ( have_comments() ){?>
<h2 class="comments-title">
<i class="fa fa-comments"></i>
<?php _e('评论', 'argon');?>
</h2>
<ol class="comment-list">
<?php
get_option("argon_comment_pagination_type", "feed") == "feed" ?
wp_list_comments(
array(
'type' => 'comment',
'callback' => 'argon_comment_format'
),
argon_get_comments()
) :
wp_list_comments(
array(
'type' => 'comment',
'callback' => 'argon_comment_format'
)
);
?>
</ol>
<?php
if (get_option("argon_comment_pagination_type") == "page"){
if (get_comment_pages_count() > 1){
echo get_argon_formatted_comment_paginate_links_for_all_platforms();
}
}else{
$prevPageUrl = get_argon_comment_paginate_links_prev_url();
if (!empty($prevPageUrl)){?>
<div class="comments-navigation-more">
<button id="comments_more" class="btn btn-lg btn-primary rounded-circle" href="<?php echo $prevPageUrl;?>">
<span class="btn-inner--icon">
<i class="fa fa-angle-down" style="transform: translateY(2px);font-size: 19.2px;"></i>
</span>
</button>
</div>
<?php }
}
?>
<?php } else {?>
<span><?php _e('暂无评论', 'argon');?></span>
<?php } ?>
<?php
// 如果启用了Geetest验证码添加相关脚本
if (argon_is_comment_captcha_enabled() && get_option('argon_captcha_type', 'math') === 'geetest') {
$captcha_id = get_option('argon_geetest_captcha_id', '');
if (!empty($captcha_id)) {
?>
<script>
// Geetest 备用加载机制
function loadGeetestWithFallback() {
if (typeof ArgonResourceLoader !== 'undefined') {
ArgonResourceLoader.smartLoad('https://static.geetest.com/v4/gt4.js', 'js')
.then(function() {
console.log('Geetest 加载成功');
})
.catch(function(error) {
console.warn('Geetest 加载失败,已使用本地备用版本');
});
} else {
// 传统加载方式作为最后备用
var script = document.createElement('script');
script.src = 'https://static.geetest.com/v4/gt4.js';
script.onerror = function() {
console.warn('Geetest 加载失败');
};
document.head.appendChild(script);
}
}
function handleGeetestLoadError() {
console.warn('Geetest 主资源加载失败,尝试备用方案');
loadGeetestWithFallback();
}
// 立即加载
loadGeetestWithFallback();
</script>
<script>
var geetestCaptcha = null;
var geetestLoadFailed = false;
var geetestScriptLoaded = false;
var geetestScriptLoading = false;
var geetestRetryAttempts = 0;
var geetestMaxRetries = 3;
var geetestRetryDelays = [500, 2000, 5000];
var geetestRetryTimer = null;
// Geetest库加载失败处理
function handleGeetestLoadError() {
geetestLoadFailed = true;
// 显示错误提示 - 优化样式使其与表单元素一致
if ($('#geetest-captcha').length > 0) {
$('#geetest-captcha').html('<div class="input-group input-group-alternative mb-4" style="flex-wrap: wrap; align-items: center; padding: 10px; background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 0.375rem;"><div style="width: 100%; display: flex; align-items: center; margin-bottom: 8px;"><i class="fa fa-exclamation-triangle" style="color: #856404; margin-right: 8px;"></i><span style="color: #856404; font-size: 14px;">验证码服务暂时不可用,请稍后重试或刷新页面</span></div><button type="button" class="btn btn-sm btn-outline-warning" id="geetest-retry-btn" style="margin: 0;"><i class="fa fa-refresh"></i> 重试加载验证码</button></div>');
}
scheduleGeetestRetry();
}
function scheduleGeetestRetry() {
if (geetestRetryAttempts >= geetestMaxRetries) { return; }
var delay = geetestRetryDelays[geetestRetryAttempts] || 5000;
clearTimeout(geetestRetryTimer);
geetestRetryTimer = setTimeout(function(){
geetestRetryAttempts++;
loadGeetestScript(function(){ initGeetestCaptchaCore(); });
}, delay);
}
function loadGeetestScript(callback) {
if (typeof initGeetest4 !== 'undefined') {
geetestScriptLoaded = true;
geetestScriptLoading = false;
geetestLoadFailed = false;
if (callback) callback();
return;
}
if (geetestScriptLoading) {
var t0 = Date.now();
(function wait(){
if (geetestScriptLoaded || typeof initGeetest4 !== 'undefined') {
geetestScriptLoaded = true;
geetestScriptLoading = false;
geetestLoadFailed = false;
if (callback) callback();
return;
}
if (Date.now() - t0 > 5000) {
geetestScriptLoading = false;
handleGeetestLoadError();
return;
}
setTimeout(wait, 100);
})();
return;
}
var existing = Array.prototype.slice.call(document.getElementsByTagName('script')).some(function(s){ return (s.src||'').indexOf('static.geetest.com/v4/gt4.js') !== -1; });
if (!existing) {
var s = document.createElement('script');
s.src = 'https://static.geetest.com/v4/gt4.js';
s.async = true;
s.onload = function(){
geetestScriptLoaded = true;
geetestScriptLoading = false;
geetestLoadFailed = false;
if (callback) callback();
};
s.onerror = function(){
geetestScriptLoading = false;
handleGeetestLoadError();
};
document.head.appendChild(s);
geetestScriptLoading = true;
} else {
var t1 = Date.now();
geetestScriptLoading = true;
(function wait2(){
if (typeof initGeetest4 !== 'undefined') {
geetestScriptLoaded = true;
geetestScriptLoading = false;
geetestLoadFailed = false;
if (callback) callback();
return;
}
if (Date.now() - t1 > 5000) {
geetestScriptLoading = false;
handleGeetestLoadError();
return;
}
setTimeout(wait2, 100);
})();
}
}
function initGeetestCaptchaCore() {
initGeetest4({
captchaId: '<?php echo esc_js($captcha_id); ?>',
product: 'bind'
}, function (captcha) {
window.geetestCaptcha = captcha;
geetestCaptcha = captcha;
try{ $('#geetest-captcha').empty(); }catch(e){}
captcha.appendTo('#geetest-captcha');
captcha.onReady(function () { });
captcha.onSuccess(function () {
var result = captcha.getValidate();
if (result) {
document.getElementById('geetest_lot_number').value = result.lot_number;
document.getElementById('geetest_captcha_output').value = result.captcha_output;
document.getElementById('geetest_pass_token').value = result.pass_token;
document.getElementById('geetest_gen_time').value = result.gen_time;
window.geetestVerified = true;
if (typeof postComment === 'function') {
window.geetestAutoSubmitting = true;
postComment();
}
}
});
captcha.onError(function () {
$('#geetest_lot_number').val('');
$('#geetest_captcha_output').val('');
$('#geetest_pass_token').val('');
$('#geetest_gen_time').val('');
try{ captcha.reset(); captcha.showBox(); }catch(e){}
if (!window.geetestVerified) { scheduleGeetestRetry(); }
});
captcha.onClose(function () {
if (!window.geetestVerified) {
iziToast.destroy();
iziToast.error({
title: '验证失败',
message: '请完成验证',
position: 'topRight'
});
}
});
});
}
function retryGeetestLoad() {
geetestLoadFailed = false;
geetestScriptLoaded = false;
geetestScriptLoading = false;
if ($('#geetest-captcha').length > 0) {
$('#geetest-captcha').empty();
}
loadGeetestScript(function(){ initGeetestCaptchaCore(); });
}
// 初始化Geetest验证码
function initGeetestCaptcha() {
if (geetestLoadFailed) {
if ($('#geetest-captcha').length > 0) {
$('#geetest-captcha').html('<div class="input-group input-group-alternative mb-4" style="flex-wrap: wrap; align-items: center; padding: 10px; background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 0.375rem;"><div style="width: 100%; display: flex; align-items: center; margin-bottom: 8px;"><i class="fa fa-exclamation-triangle" style="color: #856404; margin-right: 8px;"></i><span style="color: #856404; font-size: 14px;">验证码加载失败,请刷新页面重试</span></div><button type="button" class="btn btn-sm btn-outline-warning" id="geetest-retry-btn" style="margin: 0;"><i class="fa fa-refresh"></i> 重试加载验证码</button></div>');
}
scheduleGeetestRetry();
return;
}
if (typeof initGeetest4 === 'undefined') {
if ($('#geetest-captcha').length > 0) {
$('#geetest-captcha').html('<div class="input-group input-group-alternative mb-4" style="align-items: center; padding: 10px; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 0.375rem;"><i class="fa fa-info-circle" style="color: #0c5460; margin-right: 8px;"></i><span style="color: #0c5460; font-size: 14px;">正在加载验证码…</span></div>');
}
geetestRetryAttempts = 0;
loadGeetestScript(function(){ initGeetestCaptchaCore(); });
scheduleGeetestRetry();
return;
}
initGeetestCaptchaCore();
}
// 页面加载完成后初始化并清理可能的残留值
$(document).ready(function() {
// 防止浏览器缓存导致隐藏字段残留,导致 pass_token 复用
if ($('#geetest-captcha').length > 0) {
$('#geetest_lot_number').val('');
$('#geetest_captcha_output').val('');
$('#geetest_pass_token').val('');
$('#geetest_gen_time').val('');
window.geetestVerified = false;
window.geetestAutoSubmitting = false;
}
geetestRetryAttempts = 0;
initGeetestCaptcha();
});
$(document).on('click', '#geetest-retry-btn', function(){ retryGeetestLoad(); });
// 重置Geetest验证码的函数
function resetGeetestCaptcha() {
if (geetestCaptcha) {
geetestCaptcha.reset();
}
}
</script>
<?php
}
}
?>
</div>
</div>
<?php if (!comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' )) {?>
<div id="post_comment" class="card shadow-sm">
<div class="card-body">
<span><?php _e('本文评论已关闭', 'argon');?></span>
</div>
</div>
<?php } else { ?>
<?php $name_and_email_required = get_option('require_name_email');?>
<?php $enable_qq_avatar = get_option('argon_comment_enable_qq_avatar'); ?>
<?php
$current_commenter = wp_get_current_commenter();
if ($enable_qq_avatar == 'true'){
$current_commenter['comment_author_email'] = str_replace("@avatarqq.com", "", $current_commenter['comment_author_email']);
}
?>
<div id="post_comment" class="card shadow-sm comments-collapsed <?php if (is_user_logged_in()) {echo("logged");}?><?php if (!$name_and_email_required) {echo(" no-need-name-email");}?><?php if (!argon_is_comment_captcha_enabled()) {echo(" no-need-captcha");}?><?php if ($enable_qq_avatar == 'true') {echo(" enable-qq-avatar");}?>">
<div class="card-body">
<h2 class="post-comment-title">
<i class="fa fa-commenting"></i>
<span class="hide-on-comment-editing"><?php echo apply_filters("argon_comment_title", __('发送评论', 'argon'))?></span>
<span class="hide-on-comment-not-editing"><?php echo apply_filters("argon_comment_title_editing", __('编辑评论', 'argon'))?></span>
</h2>
<div id="post_comment_reply_info" class="post-comment-reply" style="display: none;">
<div class="post-comment-reply-header">
<div class="post-comment-reply-icon">
<i class="fa fa-reply"></i>
</div>
<div class="post-comment-reply-meta">
<span class="post-comment-reply-label"><?php _e('正在回复', 'argon');?></span>
<span class="post-comment-reply-name" id="post_comment_reply_name"></span>
</div>
<button id="post_comment_reply_cancel" class="post-comment-reply-close" type="button" title="<?php _e('取消回复', 'argon');?>">
<i class="fa fa-times"></i>
</button>
</div>
<div id="post_comment_reply_preview" class="post-comment-reply-preview"></div>
</div>
<form>
<div style="display:none;">
<input type="text" name="argon_comment_honeypot" id="argon_comment_honeypot" value="" tabindex="-1" autocomplete="off">
</div>
<div class="row">
<div class="col-md-12">
<textarea id="post_comment_content" class="form-control form-control-alternative" placeholder="<?php echo apply_filters("argon_comment_textarea_placeholder", __('评论内容', 'argon'));?>" name="comment" style="height: 80px;"></textarea>
</div>
<div class="col-md-12" style="height: 0;overflow: hidden;">
<pre id="post_comment_content_hidden" class=""></pre>
</div>
</div>
<?php
$col1_class = "col-md-4";
$col2_class = "col-md-5";
$col3_class = "col-md-3";
$captcha_enabled = argon_is_comment_captcha_enabled();
if ((get_option('argon_hide_name_email_site_input') == 'true') && ($name_and_email_required != true)){
if (!$captcha_enabled){
$col1_class = "d-none";
$col2_class = "d-none";
$col3_class = "d-none";
}else{
$col1_class = "d-none";
$col2_class = "d-none";
$col3_class = "col-md-12";
}
}else{
if (!$captcha_enabled){
$col1_class = "col-md-6";
$col2_class = "col-md-6";
$col3_class = "d-none";
}else{
$col1_class = "col-md-4";
$col2_class = "col-md-5";
$col3_class = "col-md-3";
}
}
?>
<div class="row hide-on-comment-editing" style="margin-bottom: -10px;">
<div class="<?php echo $col1_class;?>">
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user-circle"></i></span>
</div>
<input id="post_comment_name" class="form-control" placeholder="<?php _e('昵称', 'argon');?>" type="text" name="author" value="<?php if (is_user_logged_in()) {echo (wp_get_current_user() -> user_login);} else {echo htmlspecialchars($current_commenter['comment_author']);} ?>">
</div>
</div>
</div>
<div class="<?php echo $col2_class;?>">
<div class="form-group">
<div class="input-group input-group-alternative mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input id="post_comment_email" class="form-control" placeholder="<?php _e('邮箱', 'argon');?><?php if ($enable_qq_avatar == 'true'){echo __(' / QQ 号', 'argon');} ?>" type="email" name="email" value="<?php if (is_user_logged_in()) {echo (wp_get_current_user() -> user_email);} else {echo htmlspecialchars($current_commenter['comment_author_email']);} ?>">
</div>
</div>
</div>
<div class="<?php echo $col3_class;?>">
<div class="form-group">
<?php
$captcha_type = get_option('argon_captcha_type', 'math');
if ($captcha_type === 'geetest') { ?>
<!-- Geetest 验证码容器 -->
<div id="geetest-captcha" class="mb-4"></div>
<input type="hidden" id="geetest_lot_number" name="lot_number" value="">
<input type="hidden" id="geetest_captcha_output" name="captcha_output" value="">
<input type="hidden" id="geetest_pass_token" name="pass_token" value="">
<input type="hidden" id="geetest_gen_time" name="gen_time" value="">
<input type="hidden" id="argon_comment_nonce" value="<?php echo wp_create_nonce('argon_comment'); ?>">
<?php } else { ?>
<!-- 原有的数学验证码 -->
<div class="input-group input-group-alternative mb-4 post-comment-captcha-container" captcha="<?php echo get_comment_captcha(get_comment_captcha_seed());?>">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-key"></i></span>
</div>
<input id="post_comment_captcha" class="form-control" placeholder="<?php _e('验证码', 'argon');?>" type="text" name="comment_captcha" <?php if (current_user_can('level_7')) {echo('value="' . get_comment_captcha_answer(get_comment_captcha_seed()) . '" disabled');}?>>
<style>
.post-comment-captcha-container:before{
content: attr(captcha);
}
</style>
<input type="hidden" id="argon_comment_nonce" value="<?php echo wp_create_nonce('argon_comment'); ?>">
<?php if (get_option('argon_get_captcha_by_ajax', 'false') == 'true') {?>
<script>
$(".post-comment-captcha-container").attr("captcha", "Loading...");
$.ajax({
url : argonConfig.wp_path + "wp-admin/admin-ajax.php",
type : "POST",
dataType : "json",
data : {
action: "get_captcha",
},
success : function(result){
$(".post-comment-captcha-container").attr("captcha", result['captcha']);
},
error : function(xhr){
$(".post-comment-captcha-container").attr("captcha", "<?php _e('获取验证码失败', 'argon');?>");
}
});
</script>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="row hide-on-comment-editing" id="post_comment_extra_input" style="display: none";>
<div class="col-md-12" style="margin-bottom: -10px;">
<div class="form-group">
<div class="input-group input-group-alternative mb-4 post-comment-link-container">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-link"></i></span>
</div>
<input id="post_comment_link" class="form-control" placeholder="<?php _e('网站', 'argon'); ?>" type="text" name="url" value="<?php echo htmlspecialchars($current_commenter['comment_author_url']); ?>">
</div>
</div>
</div>
</div>
<div class="row hide-on-comment-editing <?php if (get_option('argon_hide_name_email_site_input') == 'true') {echo 'd-none';}?>" style="margin-top: 10px; <?php if (is_user_logged_in()) {echo('display: none');}?>">
<div class="col-md-12">
<button id="post_comment_toggle_extra_input" type="button" class="btn btn-icon btn-outline-primary btn-sm" tooltip-show-extra-field="<?php _e('展开附加字段', 'argon'); ?>" tooltip-hide-extra-field="<?php _e('折叠附加字段', 'argon'); ?>">
<span class="btn-inner--icon"><i class="fa fa-angle-down"></i></span>
</button>
</div></div>
<div class="row" style="margin-top: 5px; margin-bottom: 10px;">
<div class="col-md-12">
<?php if (get_option("argon_comment_allow_markdown") != "false") {?>
<div class="custom-control custom-checkbox comment-post-checkbox comment-post-use-markdown">
<input class="custom-control-input" id="comment_post_use_markdown" type="checkbox" checked="true">
<label class="custom-control-label" for="comment_post_use_markdown">Markdown</label>
</div>
<?php } ?>
<?php if (get_option("argon_comment_allow_privatemode") == "true") {?>
<div class="custom-control custom-checkbox comment-post-checkbox comment-post-privatemode" tooltip="<?php _e('评论仅发送者和博主可见', 'argon'); ?>">
<input class="custom-control-input" id="comment_post_privatemode" type="checkbox">
<label class="custom-control-label" for="comment_post_privatemode"><?php _e('悄悄话', 'argon');?></label>
</div>
<?php } ?>
<?php if (get_option("argon_comment_allow_mailnotice") == "true") {?>
<div class="custom-control custom-checkbox comment-post-checkbox comment-post-mailnotice" tooltip="<?php _e('有回复时邮件通知我', 'argon'); ?>">
<input class="custom-control-input" id="comment_post_mailnotice" type="checkbox"<?php if (get_option("argon_comment_mailnotice_checkbox_checked") == 'true'){echo ' checked';}?>>
<label class="custom-control-label" for="comment_post_mailnotice"><?php _e('邮件提醒', 'argon');?></label>
</div>
<?php } ?>
<button id="post_comment_send" class="btn btn-icon btn-primary comment-btn pull-right mr-0" type="button">
<span class="btn-inner--icon hide-on-comment-editing"><i class="fa fa-send"></i></span>
<span class="btn-inner--icon hide-on-comment-not-editing"><i class="fa fa-pencil"></i></span>
<span class="btn-inner--text hide-on-comment-editing" style="margin-right: 0;"><?php _e('发送', 'argon');?></span>
<span class="btn-inner--text hide-on-comment-not-editing" style="margin-right: 0;"><?php _e('编辑', 'argon');?></span>
</button>
<button id="post_comment_edit_cancel" class="btn btn-icon btn-danger comment-btn pull-right hide-on-comment-not-editing" type="button" style="margin-right: 8px;">
<span class="btn-inner--icon"><i class="fa fa-close"></i></span>
<span class="btn-inner--text"><?php _e('取消', 'argon');?></span>
</button>
<?php if (get_option("argon_comment_emotion_keyboard", "true") != "false"){ ?>
<button id="comment_emotion_btn" class="btn btn-icon btn-primary pull-right" type="button" title="<?php _e('表情', 'argon');?>">
<i class="fa fa-smile-o" aria-hidden="true"></i>
</button>
<?php get_template_part( 'template-parts/emotion-keyboard' ); ?>
<?php } ?>
</div>
</div>
<input id="post_comment_captcha_seed" value="<?php echo $commentCaptchaSeed;?>" style="display: none;"></input>
<input id="post_comment_post_id" value="<?php echo get_the_ID();?>" style="display: none;"></input>
</form>
</div>
</div>
<div id="comment_edit_history" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-size: 20px;"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="word-break: break-word;"></div>
</div>
</div>
</div>
<div id="comment_pin_comfirm_dialog" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" style="font-size: 20px;"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="word-break: break-word;"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-dismiss" data-dismiss="modal"></button>
<button type="button" class="btn btn-primary btn-comfirm"></button>
</div>
</div>
</div>
</div>
<?php } ?>