kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(comments): 评论区按 Zibll 1:1 全量复刻

Browse Source 
- 评论项/表单/工具栏/筛选/分页/空状态 DOM 全部替换为 zibll 原始类名
  （li.comment、comt-main、comt-meta、list-inline、dropup 工具栏、
  theme-pagination/pagenav、post_ajax_loader 骨架等）
- 移植 zibll main.css L9412–9751 桌面 + 移动端评论样式，
  缺失基础组件（title-theme/dropdown-menu/line-form/tab-nav-theme 等）
  以 #comments 作用域补齐
- 删除全部 aksrt-comment__* 旧类名与旧样式，无兼容层
- JS 选择器对齐 zibll DOM：片段整块替换 #postcomments、骨架加载、
  跳页输入、prepend 插入、addComment onclick 剥离，
  移除 WP comment-reply enqueue 避免双 moveForm
- 表情资源替换为 zibll 全套 gif（内容逐字节一致，git 无差异）
- REST 后端 (CommentActions) 不变

验证：php -l 全部通过；5 个改动 JS 语法校验通过；
node --test tests/widget-system/post-visual-contract.test.cjs 12/12 通过
This commit is contained in:
kate522
2026-08-22 13:29:51 +08:00
parent 251fe86527
commit e1f176429b
15 changed files with 1286 additions and 1439 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/helpers/aksrt-comments.php
+106 -122
View File
@@ -321,7 +321,7 @@ if (!function_exists('aksrt_comments_render_list_fragment')) :
/**
* Fragment payload for order/author/page AJAX.
*
* @return array{html:string,filter_html:string,pagination_html:string,count_text:string,total:int,max_pages:int,page:int,order:string,author_only:bool,empty:bool}
* @return array{html:string,items_html:string,count_text:string,total:int,max_pages:int,page:int,order:string,author_only:bool,empty:bool}
*/
function aksrt_comments_render_list_fragment(int $post_id, array $args = []): array {
$result = aksrt_comments_query_for_post($post_id, $args);
@@ -351,42 +351,36 @@ if (!function_exists('aksrt_comments_render_list_fragment')) :
];
ob_start();
if (function_exists('aksrt_comments_render_filter') && !empty($ctx['corderby_enabled'])) {
aksrt_comments_render_filter($ctx);
}
$filter_html = (string) ob_get_clean();
ob_start();
if ($items_html === '' && function_exists('aksrt_comments_render_empty')) {
aksrt_comments_render_empty($ctx);
echo '<div id="postcomments"><ol class="commentlist list-unstyled">';
if ($items_html === '') {
if (function_exists('aksrt_comments_render_empty')) {
aksrt_comments_render_empty($ctx);
}
echo '<div class="pagenav hide"><div class="next-page ajax-next"><a href="#"></a></div></div>';
} else {
echo '<div id="postcomments"><ol class="commentlist list-unstyled" id="comment-list">';
if (function_exists('aksrt_comments_render_filter') && !empty($ctx['corderby_enabled'])) {
aksrt_comments_render_filter($ctx);
}
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- rendered comment markup.
echo $items_html;
echo '</ol></div>';
if (function_exists('aksrt_render_comment_pagination') && $max_pages > 1) {
$pages_filter = static function () use ($max_pages) {
return $max_pages;
};
add_filter('get_comment_pages_count', $pages_filter);
aksrt_render_comment_pagination();
remove_filter('get_comment_pages_count', $pages_filter);
}
}
echo '</ol></div>';
$list_html = (string) ob_get_clean();
ob_start();
if (function_exists('aksrt_render_comment_pagination') && $max_pages > 1) {
// Temporarily override page counts via filter.
$pages_filter = static function () use ($max_pages) {
return $max_pages;
};
add_filter('get_comment_pages_count', $pages_filter);
aksrt_render_comment_pagination();
remove_filter('get_comment_pages_count', $pages_filter);
}
$pagination_html = (string) ob_get_clean();
wp_reset_postdata();
return [
'html' => $list_html,
'items_html' => $items_html,
'filter_html' => $filter_html,
'pagination_html' => $pagination_html,
'count_text' => sprintf(__('共 %d 条', 'aksrt'), $total),
'count_text' => sprintf(__('共%s条', 'aksrt'), (string) $total),
'total' => $total,
'max_pages' => $max_pages,
'page' => $page,
@@ -406,30 +400,32 @@ if (!function_exists('aksrt_comments_render_signarea')) :
*/
function aksrt_comments_render_signarea(array $ctx): void {
$oauth_providers = is_array($ctx['oauth_providers'] ?? null) ? $ctx['oauth_providers'] : [];
$login_url = function_exists('aksrt_get_login_url') ? aksrt_get_login_url(get_permalink()) : wp_login_url(get_permalink());
?>
<div class="comment-signarea text-center box-body radius8">
<i class="fa fas fa-lock" aria-hidden="true"></i>
<span><?php esc_html_e('登录后参与评论', 'aksrt'); ?></span>
<div class="comment-login-prompt__btns">
<a class="signin-loader but hollow" href="<?php echo esc_url(function_exists('aksrt_get_login_url') ? aksrt_get_login_url(get_permalink()) : wp_login_url(get_permalink())); ?>"><?php esc_html_e('登录', 'aksrt'); ?></a>
<?php if (get_option('users_can_register')) : ?>
<a class="signup-loader but b-theme" href="<?php echo esc_url(function_exists('aksrt_get_register_url') ? aksrt_get_register_url() : wp_registration_url()); ?>"><?php esc_html_e('注册', 'aksrt'); ?></a>
<h3 class="text-muted em12 theme-box muted-3-color"><?php esc_html_e('请登录后发表评论', 'aksrt'); ?></h3>
<p>
<a href="javascript:;" data-login-url="<?php echo esc_url($login_url); ?>" class="signin-loader but c-blue padding-lg"><i class="fa fa-fw fa-sign-in mr10" aria-hidden="true"></i><?php esc_html_e('登录', 'aksrt'); ?></a>
<?php if (get_option('users_can_register')) :
$register_url = function_exists('aksrt_get_register_url') ? aksrt_get_register_url() : wp_registration_url();
?>
<a href="javascript:;" data-register-url="<?php echo esc_url($register_url); ?>" class="signup-loader ml10 but c-yellow padding-lg"><i class="fa fa-fw fa-user-plus mr10" aria-hidden="true"></i><?php esc_html_e('注册', 'aksrt'); ?></a>
<?php endif; ?>
</div>
</p>
<?php if (!empty($oauth_providers)) : ?>
<div class="comment-signarea__oauth">
<p class="social-login-wrap">
<?php foreach ($oauth_providers as $provider) :
$provider_name = (string) ($provider['name'] ?? '');
$label = (string) ($provider['label'] ?? $provider_name);
$url = (string) ($provider['url'] ?? '#');
$icon = $provider['icon'] ?? '';
?>
<a href="<?php echo esc_url($url); ?>" class="social-login-item but hollow <?php echo esc_attr($provider_name); ?>" data-provider="<?php echo esc_attr($provider_name); ?>" title="<?php echo esc_attr($label); ?>">
<a href="<?php echo esc_url($url); ?>" class="social-login-item but hollow ml10 <?php echo esc_attr($provider_name); ?>" data-provider="<?php echo esc_attr($provider_name); ?>" title="<?php echo esc_attr($label); ?>">
<?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<span><?php echo esc_html($label); ?></span>
</a>
<?php endforeach; ?>
</div>
</p>
<?php endif; ?>
</div>
<?php
@@ -445,7 +441,6 @@ if (!function_exists('aksrt_comments_render_form')) :
function aksrt_comments_render_form(array $ctx): void {
$is_logged_in = !empty($ctx['is_logged_in']);
$current_user = $ctx['current_user'] ?? null;
$avatar_size = max(40, (int) $ctx['avatar_size']);
$require_name_email = (bool) get_option('require_name_email');
$comment_author = isset($_COOKIE['comment_author_' . COOKIEHASH])
? sanitize_text_field(wp_unslash((string) $_COOKIE['comment_author_' . COOKIEHASH]))
@@ -472,59 +467,62 @@ if (!function_exists('aksrt_comments_render_form')) :
echo aksrt_get_comment_virtual_input_html($placeholder, '#respond'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
?>
<div id="respond" class="comment-respond mobile-fixed">
<div id="respond" class="mobile-fixed">
<div class="fixed-body"></div>
<form id="commentform" class="comment-form" method="post" action="<?php echo esc_url(site_url('/wp-comments-post.php')); ?>">
<form id="commentform" method="post" action="<?php echo esc_url(site_url('/wp-comments-post.php')); ?>">
<div class="flex ac">
<div class="comt-title text-center flex0 mr10">
<?php if ($is_logged_in && $current_user instanceof WP_User) : ?>
<div class="comt-avatar mb10">
<?php echo get_avatar($current_user->ID, $avatar_size, '', '', ['class' => 'avatar-img comt-avatar']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo get_avatar($current_user->ID, 60, '', '', ['class' => 'avatar']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<p class="text-ellipsis muted-2-color"><?php echo esc_html($current_user->display_name); ?></p>
<?php else : ?>
<div class="comt-avatar mb10">
<?php echo get_avatar(0, $avatar_size, '', '', ['class' => 'avatar-img comt-avatar']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php echo get_avatar(0, 60, '', '', ['class' => 'avatar']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<p data-toggle-class="open" data-target="#comment-user-info" title="<?php esc_attr_e('填写用户信息', 'aksrt'); ?>">
<p data-toggle-class="open" data-target="#comment-user-info" data-toggle="tooltip" title="<?php esc_attr_e('填写用户信息', 'aksrt'); ?>">
<?php echo $comment_author !== '' ? esc_html($comment_author) : esc_html__('昵称', 'aksrt'); ?>
</p>
<?php endif; ?>
</div>
<div class="comt-box grow1">
<div class="action-text mb10 em09 muted-2-color" id="comment-reply-info" style="display:none;"></div>
<textarea placeholder="<?php echo esc_attr($placeholder); ?>" autoheight="true" maxheight="188" class="form-control grin comt-textarea" name="comment" id="comment" cols="100%" rows="4" tabindex="1" required></textarea>
<textarea placeholder="<?php echo esc_attr($placeholder); ?>" autoheight="true" maxheight="188" class="form-control grin" name="comment" id="comment" cols="100%" rows="4" tabindex="1"></textarea>
<?php if (function_exists('aksrt_is_captcha_enabled_for') && function_exists('aksrt_render_captcha') && aksrt_is_captcha_enabled_for('comment')) : ?>
<div class="comment-form__captcha" style="width:230px;margin-top:8px;"><?php aksrt_render_captcha('comment'); ?></div>
<div style="width: 230px; margin-top: 8px;"><?php aksrt_render_captcha('comment'); ?></div>
<?php endif; ?>
<div class="comt-ctrl relative">
<div class="comt-tips">
<?php comment_id_fields(); ?>
<?php wp_nonce_field('aksrt_comment_nonce', '_aksrt_comment_nonce'); ?>
<input type="hidden" name="comment_post_ID" value="<?php echo esc_attr((string) get_the_ID()); ?>">
<?php do_action('comment_form', get_the_ID()); ?>
</div>
<div class="comt-tips-right pull-right">
<a class="but c-red" id="cancel-comment-reply-link" href="javascript:;" style="display:none;"><?php esc_html_e('取消', 'aksrt'); ?></a>
<button class="but c-blue pw-1em input-expand-submit comment-send comment-form__submit" name="submit" id="submit" type="submit" tabindex="5"><?php echo esc_html((string) $ctx['submit_text']); ?></button>
<button class="but c-blue pw-1em input-expand-submit comment-send" name="submit" id="submit" type="submit" tabindex="5"><?php echo esc_html((string) $ctx['submit_text']); ?></button>
</div>
<div class="comt-tips-left">
<?php if (!$is_logged_in) :
$req_mark = $require_name_email ? '(' . __('必填', 'aksrt') . ')' : '';
?>
<span class="dropup relative" id="comment-user-info"<?php echo $require_name_email ? ' require_name_email="true"' : ''; ?>>
<a class="but mr6" data-toggle-class="open" data-target="#comment-user-info" href="javascript:;"><i class="fa fas fa-fw fa-user" aria-hidden="true"></i><span class="hide-sm"><?php esc_html_e('昵称', 'aksrt'); ?></span></a>
<a class="but mr6" data-toggle-class="open" data-target="#comment-user-info" href="javascript:;"><i class="fa fa-fw fa-user" aria-hidden="true"></i><span class="hide-sm"><?php esc_html_e('昵称', 'aksrt'); ?></span></a>
<div class="dropdown-menu box-body" style="width:250px;">
<div class="mb20">
<p><?php esc_html_e('请填写用户信息：', 'aksrt'); ?></p>
<ul>
<li class="line-form mb10">
<input type="text" name="author" class="line-form-input" tabindex="1" value="<?php echo esc_attr($comment_author); ?>" placeholder="" <?php echo $require_name_email ? 'required' : ''; ?> />
<input type="text" name="author" class="line-form-input" tabindex="1" value="<?php echo esc_attr($comment_author); ?>" placeholder="">
<div class="scale-placeholder"><?php echo esc_html__('昵称', 'aksrt') . esc_html($req_mark); ?></div>
<div class="abs-right muted-color"><i class="fa fa-fw fa-user" aria-hidden="true"></i></div>
<i class="line-form-line"></i>
</li>
<li class="line-form">
<input type="email" name="email" class="line-form-input" tabindex="2" value="<?php echo esc_attr($comment_email); ?>" placeholder="" <?php echo $require_name_email ? 'required' : ''; ?> />
<input type="text" name="email" class="line-form-input" tabindex="2" value="<?php echo esc_attr($comment_email); ?>" placeholder="">
<div class="scale-placeholder"><?php echo esc_html__('邮箱', 'aksrt') . esc_html($req_mark); ?></div>
<div class="abs-right muted-color"><i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i></div>
<i class="line-form-line"></i>
</li>
</ul>
</div>
@@ -532,14 +530,14 @@ if (!function_exists('aksrt_comments_render_form')) :
$oauth = is_array($ctx['oauth_providers'] ?? null) ? $ctx['oauth_providers'] : [];
if (!empty($oauth)) :
?>
<div class="comment-signarea__oauth flex ac" style="flex-wrap:wrap;gap:6px;">
<p class="social-login-wrap">
<?php foreach ($oauth as $provider) :
$label = (string) ($provider['label'] ?? $provider['name'] ?? '');
$url = (string) ($provider['url'] ?? '#');
?>
<a href="<?php echo esc_url($url); ?>" class="but hollow social-login-item"><?php echo esc_html($label); ?></a>
<a href="<?php echo esc_url($url); ?>" class="but hollow social-login-item ml10"><?php echo esc_html($label); ?></a>
<?php endforeach; ?>
</div>
</p>
<?php endif; ?>
</div>
</span>
@@ -571,8 +569,8 @@ if (!function_exists('aksrt_comments_render_filter')) :
$post_author_id = (int) $ctx['post_author_id'];
?>
<div class="comment-filter tab-nav-theme flex ac jsb" win-ajax-replace="comment-order-btn">
<ul class="list-inline comment-order-box comment-filter__tabs">
<li class="<?php echo $order === 'newest' ? 'active' : ''; ?>">
<ul class="list-inline comment-order-box" style="padding:0;">
<li class="mr6<?php echo $order === 'newest' ? ' active' : ''; ?>">
<a href="javascript:;" class="comment-orderby" data-order="newest" rel="nofollow"><?php esc_html_e('最新', 'aksrt'); ?></a>
</li>
<li class="<?php echo $order === 'hottest' ? 'active' : ''; ?>">
@@ -580,7 +578,7 @@ if (!function_exists('aksrt_comments_render_filter')) :
</li>
</ul>
<?php if ($post_author_id > 0) : ?>
<a href="javascript:;" class="but comment-orderby btn-only-author p2-10 comment-author-filter<?php echo $author_only ? ' active' : ''; ?>" data-author-only="<?php echo $author_only ? '0' : '1'; ?>" rel="nofollow">
<a href="javascript:;" class="but comment-orderby btn-only-author p2-10<?php echo $author_only ? ' active' : ''; ?>" data-author-only="<?php echo $author_only ? '0' : '1'; ?>" rel="nofollow">
<?php echo $author_only ? esc_html__('查看全部', 'aksrt') : esc_html__('只看作者', 'aksrt'); ?>
</a>
<?php endif; ?>
@@ -589,69 +587,34 @@ if (!function_exists('aksrt_comments_render_filter')) :
}
endif;
if (!function_exists('aksrt_comments_render_list')) :
if (!function_exists('aksrt_get_comment_ajax_loader')) :
/**
* Comment list + pagination.
* Hidden skeleton loader shown while AJAX pagination runs (zibll parity).
*
* @param array<string,mixed> $ctx Comments context.
* @return string
*/
function aksrt_comments_render_list(array $ctx): void {
?>
<div id="postcomments">
<ol class="commentlist list-unstyled" id="comment-list">
<?php
wp_list_comments([
'style' => 'ol',
'short_ping' => true,
'avatar_size' => (int) $ctx['avatar_size'],
'max_depth' => (int) $ctx['max_depth'],
'callback' => 'aksrt_comment_callback',
'reverse_top_level' => !empty($ctx['reverse_comments']),
'reverse_children' => !empty($ctx['reverse_comments']),
]);
?>
</ol>
</div>
<?php
if (function_exists('aksrt_render_comment_pagination')) {
aksrt_render_comment_pagination();
}
function aksrt_get_comment_ajax_loader(): string {
$item = '<ul class="list-inline flex"><div class="avatar-img placeholder radius"></div><li class="flex1"><div class="placeholder s1 mb6" style="width: 30%;"></div><div class="placeholder k2 mb10"></div><i class="placeholder s1 mb6"></i><i class="placeholder s1 mb6 ml10"></i></li></ul>';
return '<div style="display:none;" class="post_ajax_loader">' . $item . $item . $item . $item . '</div>';
}
endif;
if (!function_exists('aksrt_comments_render_empty')) :
/**
* Empty state.
* Empty state (zibll: zib_get_null('暂无评论内容', 40, 'null.svg', 'comment comment-null')).
*
* @param array<string,mixed> $ctx Comments context.
*/
function aksrt_comments_render_empty(array $ctx): void {
$closed = !comments_open();
$text = (string) ($ctx['empty_text'] ?? __('暂无评论内容', 'aksrt'));
if ($closed) {
$text = __('评论已关闭', 'aksrt');
} elseif (!empty($ctx['author_only'])) {
if (!empty($ctx['author_only'])) {
$text = __('暂无作者评论', 'aksrt');
}
$hint = $closed
? __('本文评论已关闭，仅可浏览历史留言', 'aksrt')
: (!empty($ctx['author_only'])
? __('切换到「查看全部」可浏览其他评论', 'aksrt')
: __('成为第一个评论者吧', 'aksrt'));
if (function_exists('aksrt_get_null')) {
echo aksrt_get_null($text, 40, 'null.svg', 'comment comment-null comments-empty', 220); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
echo '<p class="comments-empty__hint muted-3-color em09 text-center" style="margin-top:-20px;">' . esc_html($hint) . '</p>';
echo aksrt_get_null($text, 40, 'null.svg', 'comment comment-null', 280); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
return;
}
?>
<div class="comments-empty post_ajax_loader">
<div class="comments-empty__icon">
<i class="fa fas fa-comment-dots"></i>
</div>
<p class="comments-empty__text"><?php echo esc_html($text); ?></p>
<p class="comments-empty__hint"><?php echo esc_html($hint); ?></p>
</div>
<?php
echo '<div class="text-center comment comment-null" style="padding:40px 0;"><p class="em09 muted-3-color separator">' . esc_html($text) . '</p></div>';
}
endif;
@@ -676,17 +639,15 @@ if (!function_exists('aksrt_comments_render')) :
set_query_var('aksrt_comment_order', (string) $ctx['order']);
set_query_var('aksrt_comment_settings', $ctx['settings']);
$avatar_size = max(45, (int) $ctx['avatar_size']);
$count = (int) $ctx['comment_count'];
$count_label = $count > 0
? sprintf(__('共%s条', 'aksrt'), (string) $count)
: __('抢沙发', 'aksrt');
?>
<div class="theme-box" id="comments" style="<?php echo esc_attr('--aksrt-comment-avatar:' . $avatar_size . 'px;--aksrt-comment-avatar-form:' . $avatar_size . 'px;--aksrt-comment-indent:86px;'); ?>">
<div class="theme-box" id="comments">
<div class="box-body notop">
<div class="title-theme">
<?php echo esc_html((string) $ctx['title_text']); ?>
<small class="comments-count"><?php echo esc_html($count_label); ?></small>
<div class="title-theme"><?php echo esc_html((string) $ctx['title_text']); ?>
<?php echo '<small>' . esc_html($count_label) . '</small>'; ?>
</div>
</div>
@@ -699,26 +660,49 @@ if (!function_exists('aksrt_comments_render')) :
<?php endif; ?>
<?php endif; ?>
<?php
$show_filter = !empty($ctx['corderby_enabled']) && ($count > 0 || !empty($ctx['author_only']) || have_comments());
if ($show_filter) {
aksrt_comments_render_filter($ctx);
}
?>
<div id="postcomments">
<ol class="commentlist list-unstyled">
<?php
$show_filter = !empty($ctx['corderby_enabled']) && ($count > 0 || !empty($ctx['author_only']) || have_comments());
if ($show_filter) {
aksrt_comments_render_filter($ctx);
}
<?php if (have_comments()) : ?>
<?php aksrt_comments_render_list($ctx); ?>
<?php elseif (!post_password_required()) : ?>
<?php aksrt_comments_render_empty($ctx); ?>
<div class="pagenav hide"><div class="next-page ajax-next"><a href="#"></a></div></div>
<?php endif; ?>
<?php if (!comments_open() && $count && post_type_supports(get_post_type(), 'comments')) : ?>
<p class="comments-closed separator text-muted em12"><?php esc_html_e('评论已关闭。', 'aksrt'); ?></p>
<?php endif; ?>
if (have_comments()) {
aksrt_comments_render_list_items($ctx);
} elseif (!post_password_required()) {
aksrt_comments_render_empty($ctx);
echo '<div class="pagenav hide"><div class="next-page ajax-next"><a href="#"></a></div></div>';
}
?>
</ol>
</div>
</div>
</div>
<?php
}
endif;
endif;
if (!function_exists('aksrt_comments_render_list_items')) :
/**
* Render just the comment items + loader + pagination (inside ol.commentlist).
*
* @param array<string,mixed> $ctx Comments context.
*/
function aksrt_comments_render_list_items(array $ctx): void {
wp_list_comments([
'type' => 'comment',
'style' => 'ol',
'avatar_size' => (int) $ctx['avatar_size'],
'max_depth' => (int) $ctx['max_depth'],
'callback' => 'aksrt_comment_callback',
'reverse_top_level' => !empty($ctx['reverse_comments']),
'reverse_children' => !empty($ctx['reverse_comments']),
]);
echo aksrt_get_comment_ajax_loader(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
if (function_exists('aksrt_render_comment_pagination')) {
aksrt_render_comment_pagination();
}
}
endif;