Files
wordpress-theme-aksrt/src/WidgetSystem/Renderers/ContentRenderer.php
T
kate522andClaude Fable 5 89a9cf24e9 fix(posts): repair the load-more skeleton and align it with the reference
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>
2026-10-03 15:42:18 +08:00

218 lines
11 KiB
PHP

<?php
namespace AKSRT\WidgetSystem\Renderers;
use AKSRT\WidgetSystem\PostRenderer;
use AKSRT\WidgetSystem\RendererHelpers;
defined('ABSPATH') || exit;
/** Render article discovery and paid-content widgets (reference parity). */
final class ContentRenderer {
public static function render(string $slug, array $instance, array $context = []): string {
switch ($slug) {
case 'term_cards': return self::term_cards($instance);
case 'term_aggregation': return self::term_aggregation($instance);
case 'post_pay': return self::post_pay($instance);
case 'tab_posts': return self::tab_posts($instance, $context);
case 'posts': return self::posts($instance, $context, 'posts');
case 'hot_posts': return function_exists('aksrt_widget_hot_posts') ? aksrt_widget_hot_posts($instance) : '';
case 'oneline_posts': return self::posts($instance, $context, 'oneline_posts');
}
return '';
}
private static function posts(array $instance, array $context, string $slug): string {
$widget_id = (string) ($context['widget_id'] ?? '');
$style = in_array(($instance['style'] ?? 'list'), ['list', 'card', 'mini'], true) ? (string) $instance['style'] : 'list';
if ($slug === 'oneline_posts') {
// Reference parity: the swiper row is fully rendered server-side.
$query = \AKSRT\WidgetSystem\PostQuery::build(array_merge($instance, ['paginate' => '']), 1, []);
return \AKSRT\WidgetSystem\PostRenderer::items($query, $instance, 'oneline_posts');
}
$inner = self::ajaxpager($instance, $slug, $widget_id, 1, '');
$html = '<div class="widget-main-post mb20 style-' . esc_attr($style) . '">';
$html .= $style === 'mini' ? '<div class="zib-widget posts-mini-lists">' : '';
$html .= $inner;
$html .= $style === 'mini' ? '</div>' : '';
return $html . '</div>';
}
/** The .widget-ajaxpager container contract shared by posts and tab panes. */
private static function ajaxpager(array $instance, string $slug, string $widget_id, int $page, string $segment): string {
$attrs = ' data-widget-items data-widget="' . esc_attr($slug) . '" data-instance="' . esc_attr($widget_id) . '" data-page="' . (int) $page . '"';
if ($segment !== '') {
$attrs .= ' data-segment="' . esc_attr($segment) . '"';
}
if (($instance['load_mode'] ?? '') === 'ajax') {
// The runtime (lazysizes + lazyload-action) reveals this container
// and clicks the single .ias-btn trigger; frontend.js then loads
// the first page through the REST client.
$trigger = '<span class="hide aksrt-ias-trigger"><a class="ias-btn" no-scroll="true" href="javascript:void(0)" data-widget-ias="1" data-next-page="1" aria-hidden="true" tabindex="-1"></a></span>';
return '<div class="widget-ajaxpager lazyload" lazyload-action="ias"' . $attrs . ' aria-live="polite" aria-busy="true">' . $trigger . '<div class="post_ajax_loader" role="status" aria-label="' . esc_attr__('正在加载', 'aksrt') . '">' . self::placeholder($instance) . '</div></div>';
}
$payload = PostRenderer::payload($instance, $slug, $page, $segment);
return '<div class="widget-ajaxpager"' . $attrs . ' aria-live="polite" aria-busy="false">' . $payload['html'] . $payload['paginate_html'] . '</div>';
}
private static function placeholder(array $instance): string {
$style = (string) ($instance['style'] ?? 'list');
$count = max(1, (int) ($instance['count'] ?? 6));
if ($style === 'mini') {
$mini_opt = (array) ($instance['mini_opt'] ?? []);
return aksrt_render_placeholder(
in_array('show_thumb', $mini_opt, true) ? 'mini_thumb' : 'mini',
$count
);
}
return aksrt_render_placeholder($style === 'card' ? 'card' : 'list', $count);
}
private static function tab_posts(array $instance, array $context): string {
$style = in_array(($instance['style'] ?? 'mini'), ['list', 'card', 'mini'], true) ? (string) $instance['style'] : 'mini';
$tabs = array_values((array) ($instance['tabs'] ?? []));
if (!$tabs) {
return '';
}
$widget_id = (string) ($context['widget_id'] ?? 'preview');
$buttons = '';
$panels = '';
$key = sanitize_html_class($widget_id) ?: 'preview';
$panel_id = 'aksrt-tab-panel-' . $key;
$visible_index = 0;
foreach ($tabs as $index => $tab) {
if (!is_array($tab) || trim((string) ($tab['title'] ?? '')) === '') continue;
$tab_id = 'aksrt-tab-' . $key . '-' . $visible_index;
$selected = $visible_index === 0;
$buttons .= '<li class="' . ($selected ? 'active' : '') . '"><a' . ($selected ? '' : ' data-ajax') . ' data-toggle="tab" href="#' . esc_attr($panel_id . '-' . $visible_index) . '" role="tab" id="' . esc_attr($tab_id) . '" aria-controls="' . esc_attr($panel_id . '-' . $visible_index) . '" aria-selected="' . ($selected ? 'true' : 'false') . '" data-segment="' . (int) $index . '">' . wp_kses_post((string) $tab['title']) . '</a></li>';
if ($selected) {
$body = self::ajaxpager($instance, 'tab_posts', $widget_id, 1, (string) $index);
} else {
// Inactive panes load lazily through the REST client on switch.
$body = '<div class="widget-ajaxpager" data-widget-items data-widget="tab_posts" data-instance="' . esc_attr($widget_id) . '" data-page="1" data-segment="' . (int) $index . '" aria-live="polite" aria-busy="false"></div>';
}
// 显隐交给 .is-loading,内联 display:none 会让 REST 客户端无法展开骨架。
$body .= '<div class="post_ajax_loader">' . self::placeholder($instance) . '</div>';
$panels .= '<div class="tab-pane fade' . ($selected ? ' active in' : '') . '" id="' . esc_attr($panel_id . '-' . $visible_index) . '" role="tabpanel" aria-labelledby="' . esc_attr($tab_id) . '">' . $body . '</div>';
$visible_index++;
}
if ($buttons === '') return '';
return '<div class="widget-tab-post style-' . esc_attr($style) . ($style === 'mini' ? ' posts-mini-lists zib-widget' : ' index-tab relative-h') . '" data-widget="tab_posts" data-instance="' . esc_attr($widget_id) . '"><div class="relative' . ($style === 'card' ? ' mb20' : '') . '"><ul class="list-inline scroll-x no-scrollbar' . ($style === 'mini' ? ' tab-nav-theme' : '') . '" role="tablist">' . $buttons . '</ul></div><div class="tab-content">' . $panels . '</div></div>';
}
private static function term_cards(array $instance): string {
$term_ids = array_values(array_filter(array_map('absint', (array) ($instance['term_id'] ?? []))));
if (!$term_ids) {
return '';
}
$terms = get_terms(['taxonomy' => 'category', 'include' => $term_ids, 'orderby' => 'include']);
if (is_wp_error($terms) || !$terms) {
return '';
}
$pc_row = max(1, (int) ($instance['pc_row'] ?? 2));
$m_row = max(1, (int) ($instance['m_row'] ?? 2));
$row_class = 'col-sm-' . (int) (12 / $pc_row);
$row_class .= $m_row > 1 ? ' col-xs-' . (int) (12 / $m_row) : '';
$is_row = count($terms) > 1;
$target_blank = !empty($instance['target_blank']) ? '_blank' : '';
$animation = (string) ($instance['obs_animation'] ?? '');
$html = '';
foreach ($terms as $term) {
$count = (int) $term->count;
$name = aksrt_widget_str_cut((string) $term->name, 16);
$description = aksrt_widget_str_cut((string) $term->description, 24);
$href = get_term_link($term);
if (is_wp_error($href)) {
continue;
}
$icon = '<i class="fa fas fa-folder-open mr6" aria-hidden="true"></i>';
$card = [
'type' => (string) ($instance['type'] ?? 'style-1'),
'class' => 'mb10',
'img' => aksrt_widget_term_cover_url((int) $term->term_id),
'alt' => $name . '-' . $description,
'link' => ['url' => esc_url((string) $href), 'target' => $target_blank],
'text1' => $name,
'text2' => $description,
'text3' => $icon . $count . __('篇文章', 'aksrt'),
'height_scale' => (int) ($instance['height_scale'] ?? 60),
'mask_opacity' => (int) ($instance['mask_opacity'] ?? 10),
];
$type = (string) $card['type'];
if ($type === 'style-2' || $type === 'style-4') {
$card['text3'] = '<item data-toggle="tooltip" title="' . esc_attr(sprintf(__('共%d篇文章', 'aksrt'), $count)) . '">' . $icon . $count . '</item>';
} elseif ($type === 'style-3') {
$card['text1'] = $icon . $name;
$card['text3'] = '<i class="fa mr6 fa-file-alt" aria-hidden="true"></i>' . $count . __('篇文章', 'aksrt');
}
$attr = '';
$col_class = '';
if ($animation !== '') {
$col_class .= ' obs-animate ani-' . sanitize_html_class($animation);
$attr .= ' data-animation="' . esc_attr($animation) . '"';
if (!empty($instance['animation_repeat'])) {
$attr .= ' data-animation-repeat="true"';
}
}
if ($is_row) {
$col_class .= ' ' . $row_class;
}
$html .= '<div class="' . esc_attr(trim($col_class)) . '"' . $attr . '>' . aksrt_graphic_card($card) . '</div>';
}
return '<div class="' . ($is_row ? 'mb10' : 'mb20') . '">' . ($is_row ? '<div class="row gutters-5">' : '') . $html . ($is_row ? '</div>' : '') . '</div>';
}
private static function term_aggregation(array $instance): string {
$term_ids = array_values(array_filter(array_map('absint', (array) ($instance['term_id'] ?? []))));
if (!$term_ids) {
return '';
}
$pc_row = max(1, min(2, (int) ($instance['pc_row'] ?? 2)));
$row_class = 'col-sm-' . (int) (12 / $pc_row) . ' col-xs-12';
$is_row = count($term_ids) > 1;
$animation = (string) ($instance['obs_animation'] ?? '');
$html = '';
foreach ($term_ids as $key => $term_id) {
$attr = '';
$col_class = '';
if ($animation !== '') {
$col_class .= ' obs-animate ani-' . sanitize_html_class($animation);
$attr .= ' data-animation="' . esc_attr($animation) . '"';
$attr .= ' style=" --delay: ' . esc_attr((string) ($key * 0.15)) . 's; "';
if (!empty($instance['animation_repeat'])) {
$attr .= ' data-animation-repeat="true"';
}
}
if ($is_row) {
$col_class .= ' ' . $row_class;
}
$html .= '<div class="' . esc_attr(trim($col_class)) . '"' . $attr . '>';
$html .= aksrt_widget_term_aggregation([
'term_id' => (int) $term_id,
'target_blank' => !empty($instance['target_blank']),
'orderby' => (string) ($instance['orderby'] ?? 'modified'),
'order' => (($instance['order'] ?? 'desc') === 'asc') ? 'ASC' : 'DESC',
'count' => (int) ($instance['count'] ?? 4),
]);
$html .= '</div>';
}
return '<div class="clearfix mb6">' . ($is_row ? '<div class="row gutters-5">' : '') . $html . ($is_row ? '</div>' : '') . '</div>';
}
private static function post_pay(array $instance): string {
$post = get_post();
if (!$post instanceof \WP_Post || !function_exists('aksrt_get_pay_meta')) {
return '';
}
$meta = aksrt_get_pay_meta($post);
if (($meta['pay_type'] ?? 'no') === 'no') {
return '';
}
return aksrt_get_paywall_html($post, [
'layout' => 'widget',
'theme' => (string) $instance['theme'],
]);
}
}