kate522andClaude Fable 5
89a9cf24e9
Clicking 加载更多 showed no skeleton at all, and the placeholder shape did not match the reference theme's post cards. - Class-name mismatch: pagination.js queried .post-ajax-loader while every PHP producer emits .post_ajax_loader, so showSkeleton() never found a target and the loader stayed hidden. Accept both spellings. - Inline display:none on the loader (pagination, comments, widget tab panes) outranked .is-loading, so even the correct selector could not reveal it. Drop the inline style; the reference uses a bare <div class="post_ajax_loader"> and toggles visibility from JS. - loadNextPage() set indicator.style.display = "flex", which forced the .posts-item.card skeleton blocks (inline-block layout) into a single row instead of stacking vertically — the visible symptom. Remove those inline writes and drive .is-loading from CSS for every surface. - Scope the hide/show rules on the class itself rather than requiring an .ajaxpager ancestor: homepage tab panes, archive streams and comment lists sit at three different depths. - Rebuild aksrt_render_placeholder() on zib_get_post_placeholder's structure — list = t1/k1/k2 + two s1, card = t1 item-heading/k2 + two s1, thumb wrapped in post-graphic + radius8 item-thumbnail, all carrying ajax-item so the loader is not mistaken for a real card. - Add mini/mini_thumb modes so ContentRenderer::placeholder() stops hand-rolling the same markup; normalize its 'lists' arg to 'list'. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
234 lines
10 KiB
PHP
234 lines
10 KiB
PHP
<?php
|
||
/**
|
||
* legacy 9.0 article-list DOM contract.
|
||
*
|
||
* @package AKSRT
|
||
*/
|
||
|
||
defined('ABSPATH') || exit;
|
||
|
||
if (!function_exists('aksrt_renderer_list')) {
|
||
function aksrt_renderer_list(array $data, array $cfg): string {
|
||
$classes = ['posts-item', 'list', 'ajax-item'];
|
||
if ((string) ($cfg['style'] ?? '') !== '') {
|
||
$classes[] = (string) $cfg['style'];
|
||
}
|
||
if (!empty($data['is_mult_thumb'])) {
|
||
$classes[] = 'mult-thumb';
|
||
}
|
||
if (!empty($data['is_no_thumb'])) {
|
||
$classes[] = 'no-thumb';
|
||
}
|
||
if (!empty($cfg['no_margin'])) {
|
||
$classes[] = 'no_margin';
|
||
}
|
||
$classes[] = ($cfg['style'] ?? '') === 'style2' ? 'flex xx' : 'flex';
|
||
|
||
$title = '<h2 class="item-heading' . (!empty($cfg['heading_bold']) ? ' font-bold' : '') . '"><a' . (!empty($cfg['target_blank']) ? ' target="_blank"' : '') . ' href="' . esc_url((string) $data['permalink']) . '">' . aksrt_renderer_title_markup($data, $cfg) . '</a></h2>';
|
||
$excerpt_class = ($cfg['style'] ?? '') === 'style2' ? 'text-ellipsis-2' : 'text-ellipsis';
|
||
$excerpt = '<div class="item-excerpt muted-color ' . $excerpt_class . ' mb6">' . aksrt_renderer_excerpt_markup($data, $cfg) . '</div>';
|
||
$thumb = aksrt_renderer_thumb($data, $cfg);
|
||
$mult = aksrt_renderer_mult_thumb($data, $cfg);
|
||
$graphic = '';
|
||
if ($thumb !== '' && empty($data['is_mult_thumb'])) {
|
||
$graphic = '<div class="post-graphic' . (($cfg['img_position'] ?? 'left') === 'right' ? ' order1' : '') . '">' . $thumb . '</div>';
|
||
}
|
||
$badges = aksrt_renderer_badges($data, $cfg);
|
||
$meta = aksrt_renderer_meta($data, $cfg, false);
|
||
$html = '<posts class="' . esc_attr(implode(' ', $classes)) . '">';
|
||
if (($cfg['style'] ?? '') === 'style2') {
|
||
$html .= $title . '<div class="flex">' . $graphic . '<div class="item-body flex xx flex1 jsb">';
|
||
$html .= $mult !== '' ? $mult : $excerpt;
|
||
$html .= $badges . $meta . '</div></div>';
|
||
} else {
|
||
$html .= $graphic . '<div class="item-body flex xx flex1 jsb">' . $title;
|
||
$html .= $mult !== '' ? $mult : $excerpt;
|
||
$html .= '<div>' . $badges . $meta . '</div></div>';
|
||
}
|
||
return $html . '</posts>';
|
||
}
|
||
}
|
||
|
||
if (!function_exists('aksrt_renderer_card')) {
|
||
function aksrt_renderer_card(array $data, array $cfg): string {
|
||
$classes = ['posts-item', 'card', 'ajax-item'];
|
||
if ((string) ($cfg['style'] ?? '') !== '') {
|
||
$classes[] = (string) $cfg['style'];
|
||
}
|
||
$title = '<h2 class="item-heading' . (!empty($cfg['heading_bold']) ? ' font-bold' : '') . '"><a' . (!empty($cfg['target_blank']) ? ' target="_blank"' : '') . ' href="' . esc_url((string) $data['permalink']) . '">' . aksrt_renderer_title_markup($data, $cfg) . '</a></h2>';
|
||
|
||
$html = '<posts class="' . esc_attr(implode(' ', $classes)) . '">';
|
||
$html .= aksrt_renderer_thumb($data, $cfg);
|
||
$html .= '<div class="item-body">' . $title;
|
||
$html .= aksrt_renderer_badges($data, $cfg);
|
||
$html .= aksrt_renderer_meta($data, $cfg, true);
|
||
return $html . '</div></posts>';
|
||
}
|
||
}
|
||
|
||
if (!function_exists('aksrt_renderer_mini')) {
|
||
function aksrt_renderer_mini(array $data, array $cfg = []): string {
|
||
$target = !empty($cfg['target_blank']) ? ' target="_blank"' : '';
|
||
$thumb = '';
|
||
$show_thumb = !array_key_exists('show_thumb', $cfg) || !empty($cfg['show_thumb']);
|
||
$show_meta = !array_key_exists('show_meta', $cfg) || !empty($cfg['show_meta']);
|
||
if ($show_thumb && (string) $data['primary'] !== '') {
|
||
$default_attr = empty($data['has_real']) ? ' data-thumb="default"' : '';
|
||
$thumb = '<div class="mr10"><div class="item-thumbnail"><a' . $target . ' href="' . esc_url((string) $data['permalink']) . '"><img' . $default_attr . aksrt_get_lazy_attr('lazy_posts_thumb', (string) $data['primary'], 'fit-cover radius8') . ' alt="' . esc_attr((string) $data['title']) . '"></a></div></div>';
|
||
}
|
||
$number = '';
|
||
if (!empty($cfg['show_number'])) {
|
||
$number_value = max(1, (int) ($cfg['number_offset'] ?? 1));
|
||
$colors = ['c-red', 'c-yellow', 'c-purple', 'c-blue', 'c-green'];
|
||
$number_class = $colors[$number_value - 1] ?? '';
|
||
$number = '<span class="badg badg-sm mr3 ' . esc_attr($number_class) . '">' . $number_value . '</span>';
|
||
}
|
||
$title_class = $show_thumb ? ' text-ellipsis-2' : ' text-ellipsis' . (!$show_meta && empty($cfg['show_number']) ? ' icon-circle' : '');
|
||
$title = esc_html((string) $data['title']);
|
||
if ((string) ($data['subtitle'] ?? '') !== '') {
|
||
$title .= '<span class="focus-color">' . esc_html((string) $data['subtitle']) . '</span>';
|
||
}
|
||
$meta = '';
|
||
if ($show_meta) {
|
||
$show_time = !empty($cfg['show_time']);
|
||
if (!empty($cfg['show_author'])) {
|
||
$author_value = $show_time ? (string) $data['time_ago'] : (string) $data['author_name'];
|
||
$meta_left = '<item class="meta-author flex ac"><img class="avatar-mini" src="' . esc_url((string) $data['avatar_url']) . '" alt="" width="20" height="20"><span class="ml6">' . esc_html($author_value) . '</span></item>';
|
||
} else {
|
||
$meta_left = $show_time ? '<item title="' . esc_attr((string) $data['time_title']) . '" class="icon-circle mln3">' . esc_html((string) $data['time_ago']) . '</item>' : '';
|
||
}
|
||
$pay = aksrt_renderer_pay_badge($data, true);
|
||
if ($meta_left === '') {
|
||
$meta_left = $pay;
|
||
$pay = '';
|
||
}
|
||
if ($meta_left === '') {
|
||
$meta_left = '<item></item>';
|
||
}
|
||
$meta_right = $pay . '<item class="meta-view">' . aksrt_renderer_svg_icon('view') . esc_html(aksrt_renderer_meta_number((int) $data['views'])) . '</item>';
|
||
$meta = '<div class="item-meta muted-2-color flex jsb ac' . (!$show_thumb ? ' mt6' : '') . '">' . $meta_left . '<div class="meta-right">' . $meta_right . '</div></div>';
|
||
}
|
||
$class = trim('posts-mini ' . (string) ($cfg['class'] ?? ''));
|
||
return '<div class="' . esc_attr($class) . '">' . $thumb . '<div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading' . esc_attr($title_class) . '">' . $number . '<a' . $target . ' href="' . esc_url((string) $data['permalink']) . '">' . $title . '</a></h2>' . $meta . '</div></div>';
|
||
}
|
||
}
|
||
|
||
if (!function_exists('aksrt_render_post')) {
|
||
function aksrt_render_post(array $args = []): string {
|
||
$cfg = aksrt_renderer_config($args);
|
||
$data = aksrt_renderer_collect_post_data($cfg);
|
||
if (!$data) {
|
||
return '';
|
||
}
|
||
return ($cfg['mode'] ?? 'list') === 'card'
|
||
? aksrt_renderer_card($data, $cfg)
|
||
: aksrt_renderer_list($data, $cfg);
|
||
}
|
||
}
|
||
|
||
if (!function_exists('aksrt_render_post_list')) {
|
||
/**
|
||
* Render the canonical article stream.
|
||
*
|
||
* @param array<string,mixed> $args legacy-shaped list arguments.
|
||
* @param WP_Query|null $query Optional custom query.
|
||
*/
|
||
function aksrt_render_post_list(array $args = [], ?WP_Query $query = null, bool $echo = true): string {
|
||
$cfg = aksrt_renderer_config($args);
|
||
$has_posts = $query instanceof WP_Query ? $query->have_posts() : have_posts();
|
||
if (!$has_posts) {
|
||
$html = aksrt_get_null(__('暂无内容', 'aksrt'), 100, 'null-post.svg');
|
||
if ($echo) {
|
||
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||
return '';
|
||
}
|
||
return $html;
|
||
}
|
||
|
||
$classes = ['posts-row', 'ajaxpager'];
|
||
foreach (preg_split('/\s+/', trim((string) ($cfg['wrapper_class'] ?? ''))) ?: [] as $class) {
|
||
$class = sanitize_html_class($class);
|
||
if ($class !== '') {
|
||
$classes[] = $class;
|
||
}
|
||
}
|
||
// legacy 契约：分页等控件与列表同处一个 .ajaxpager 内，供 runtime post_ajax 提取。
|
||
$append_inner_html = (string) ($cfg['append_inner_html'] ?? '');
|
||
$html = empty($cfg['skip_wrapper'])
|
||
? '<div class="' . esc_attr(implode(' ', array_unique($classes))) . '" data-view="' . esc_attr((string) $cfg['mode']) . '">'
|
||
: '';
|
||
|
||
if ($query instanceof WP_Query) {
|
||
while ($query->have_posts()) {
|
||
$query->the_post();
|
||
$html .= aksrt_render_post($cfg);
|
||
}
|
||
wp_reset_postdata();
|
||
} else {
|
||
while (have_posts()) {
|
||
the_post();
|
||
$html .= aksrt_render_post($cfg);
|
||
}
|
||
}
|
||
$html .= $append_inner_html;
|
||
if (empty($cfg['skip_wrapper'])) {
|
||
$html .= '</div>';
|
||
}
|
||
|
||
if ($echo) {
|
||
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||
return '';
|
||
}
|
||
return $html;
|
||
}
|
||
}
|
||
|
||
if (!function_exists('aksrt_render_mini_list')) {
|
||
function aksrt_render_mini_list(WP_Query $query, array $args = [], bool $echo = true): string {
|
||
$cfg = aksrt_renderer_config($args);
|
||
$html = '';
|
||
$number = max(0, (int) ($args['number_offset'] ?? 0));
|
||
while ($query->have_posts()) {
|
||
$query->the_post();
|
||
$data = aksrt_renderer_collect_post_data($cfg);
|
||
if (!$data) {
|
||
continue;
|
||
}
|
||
$number++;
|
||
$html .= aksrt_renderer_mini($data, array_merge($cfg, ['number_offset' => $number]));
|
||
}
|
||
wp_reset_postdata();
|
||
if ($echo) {
|
||
echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||
return '';
|
||
}
|
||
return $html;
|
||
}
|
||
}
|
||
|
||
if (!function_exists('aksrt_render_placeholder')) {
|
||
/**
|
||
* 骨架屏占位（legacy zib_get_post_placeholder parity）。
|
||
*
|
||
* 骨架块复用真实卡片的 posts-item / post-graphic / item-body 结构与尺寸，
|
||
* 只是把内容换成 .placeholder。列表模式四行（标题 k1、摘要 k2、两枚 s1），
|
||
* 卡片模式三行（标题 t1、摘要 k2、两枚 s1），对应参考主题 1:1。
|
||
*
|
||
* @param string $mode list|card|mini|mini_thumb。
|
||
* @param int $count 重复数量，1–12。
|
||
*/
|
||
function aksrt_render_placeholder(string $mode = 'list', int $count = 3): string {
|
||
$count = max(1, min(12, $count));
|
||
if ($mode === 'mini') {
|
||
$item = '<div class="posts-mini"><div class="placeholder k1"></div></div>';
|
||
} elseif ($mode === 'mini_thumb') {
|
||
$item = '<div class="posts-mini"><div class="mr10"><div class="item-thumbnail placeholder"></div></div><div class="posts-mini-con flex xx flex1 jsb"><div class="placeholder t1"></div><div class="placeholder s1"></div></div></div>';
|
||
} elseif ($mode === 'card') {
|
||
$item = '<posts class="posts-item card ajax-item"><div class="post-graphic"><div class="radius8 item-thumbnail placeholder"></div></div><div class="item-body"><h2 class="item-heading item-excerpt placeholder t1"></h2><p class="mt10 placeholder k2"></p><i class="flex jsb"><i class="placeholder s1"></i><i class="placeholder s1 ml10"></i></i></div></posts>';
|
||
} else {
|
||
$item = '<posts class="posts-item list flex ajax-item"><div class="post-graphic"><div class="radius8 item-thumbnail placeholder"></div></div><div class="item-body flex xx flex1 jsb"><p class="placeholder t1"></p><h4 class="item-excerpt placeholder k1"></h4><p class="placeholder k2"></p><i><i class="placeholder s1"></i><i class="placeholder s1 ml10"></i></i></div></posts>';
|
||
}
|
||
return str_repeat($item, $count);
|
||
}
|
||
}
|