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

fix(posts): repair the load-more skeleton and align it with the reference

Browse Source 
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>
This commit is contained in:
kate522
2026-10-03 15:42:18 +08:00
co-authored by Claude Fable 5
parent 7fc1ac98de
commit 89a9cf24e9
9 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/build/public.css
+7 -4
View File
@@ -6773,13 +6773,16 @@ body.aksrt-modal-runtime-open {
min-height: 80px;
}
.ajaxpager .post_ajax_loader,
.ajaxpager .post-ajax-loader {
/* 骨架默认收起，由 pagination.js 的 showSkeleton() 加 .is-loading 展开。
这里不依赖 .ajaxpager 祖先：首页 tab pane、归档流、评论列表的 loader
层级各不相同，统一按类名自身控制。 */
.post_ajax_loader,
.post-ajax-loader {
display: none;
}
.ajaxpager .post_ajax_loader.is-loading,
.ajaxpager .post-ajax-loader.is-loading {
.post_ajax_loader.is-loading,
.post-ajax-loader.is-loading {
display: block;
}
assets/css/build/public.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/frontend/modal-runtime.css
+7 -4
View File
@@ -257,13 +257,16 @@ body.aksrt-modal-runtime-open {
min-height: 80px;
}
.ajaxpager .post_ajax_loader,
.ajaxpager .post-ajax-loader {
/* 骨架默认收起，由 pagination.js 的 showSkeleton() 加 .is-loading 展开。
这里不依赖 .ajaxpager 祖先：首页 tab pane、归档流、评论列表的 loader
层级各不相同，统一按类名自身控制。 */
.post_ajax_loader,
.post-ajax-loader {
display: none;
}
.ajaxpager .post_ajax_loader.is-loading,
.ajaxpager .post-ajax-loader.is-loading {
.post_ajax_loader.is-loading,
.post-ajax-loader.is-loading {
display: block;
}
assets/js/core/pagination.js
+5 -5
View File
@@ -31,7 +31,6 @@
var failed = false;
var clickTarget = container.querySelector(".next-page.ajax-next, .ias-btn") || container;
var loadMoreBtn = container.querySelector("[data-aksrt-load-more]") || clickTarget;
var indicator = container.querySelector(".post_ajax_loader");
var successfulAutoLoads = 0;
var iasMax = isComment
? ((window.aksrtData && typeof aksrtData.commentIasMax !== "undefined") ? parseInt(aksrtData.commentIasMax, 10) : 0)
@@ -54,7 +53,8 @@
function showSkeleton() {
if (!target) return;
var loader = target.querySelector(".post-ajax-loader");
// PHP 产出下划线类名 post_ajax_loader；这里同时兼容连字符写法。
var loader = target.querySelector(".post_ajax_loader, .post-ajax-loader");
if (loader) {
loader.classList.add("is-loading");
}
@@ -62,7 +62,7 @@
function hideSkeleton() {
if (!target) return;
var loader = target.querySelector(".post-ajax-loader");
var loader = target.querySelector(".post_ajax_loader, .post-ajax-loader");
if (loader) {
loader.classList.remove("is-loading");
}
@@ -107,7 +107,8 @@
}
loading = true;
if (indicator) indicator.style.display = "flex";
// 骨架开关统一走 .is-loading（modal-runtime.css），不要直接写
// display:flex —— 那会让卡片型骨架挤成一行而不是纵向堆叠。
if (loadMoreBtn) {
loadMoreBtn.classList.add("is-loading");
loadMoreBtn.textContent = loadingText;
@@ -197,7 +198,6 @@
.finally(function () {
loading = false;
hideSkeleton();
if (indicator) indicator.style.display = "none";
if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore") && !failed) {
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.innerHTML = triggerText;
assets/js/runtime/main.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
inc/helpers/aksrt-comments.php
+2 -1
View File
@@ -640,7 +640,8 @@ if (!function_exists('aksrt_get_comment_ajax_loader')) :
*/
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>';
// 显隐交给 modal-runtime.css 的 .is-loading，内联 display:none 会让骨架永远无法展开。
return '<div class="post_ajax_loader">' . $item . $item . $item . $item . '</div>';
}
endif;
inc/helpers/posts-renderer/markup.php
+19 -2
View File
@@ -207,10 +207,27 @@ if (!function_exists('aksrt_render_mini_list')) {
}
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));
$class = $mode === 'card' ? 'posts-item card' : 'posts-item list flex';
$item = '<posts class="' . esc_attr($class) . '"><div class="post-graphic"><div class="item-thumbnail placeholder"></div></div><div class="item-body flex xx flex1 jsb"><div class="placeholder t1"></div><div class="placeholder k2"></div><div class="placeholder s1"></div></div></posts>';
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);
}
}
inc/helpers/template-tags/pagination-permissions.php
+1 -1
View File
@@ -124,7 +124,7 @@ if (!function_exists('aksrt_render_pagination')) {
<div class="next-page order-ajax-next ias-btn<?php echo $auto_load ? ' lazyload' : ''; ?>"<?php echo $auto_load ? ' lazyload-action="ias"' : ''; ?>>
<a href="<?php echo esc_url(add_query_arg($page_var, $current_page + 1)); ?>" data-aksrt-load-more><?php echo wp_kses_post($trigger_text); ?></a>
</div>
<div class="post_ajax_loader" style="display:none;" aria-hidden="true"><?php echo function_exists('aksrt_render_placeholder') ? aksrt_render_placeholder('list', 2) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
<div class="post_ajax_loader" aria-hidden="true"><?php echo function_exists('aksrt_render_placeholder') ? aksrt_render_placeholder('list', 2) : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></div>
</div><?php
}
}
src/WidgetSystem/Renderers/ContentRenderer.php
+7 -7
View File
@@ -60,13 +60,12 @@ final class ContentRenderer {
$count = max(1, (int) ($instance['count'] ?? 6));
if ($style === 'mini') {
$mini_opt = (array) ($instance['mini_opt'] ?? []);
if (in_array('show_thumb', $mini_opt, true)) {
$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>';
return str_repeat($item, $count);
}
return str_repeat('<div class="posts-mini"><div class="placeholder k1"></div></div>', $count);
return aksrt_render_placeholder(
in_array('show_thumb', $mini_opt, true) ? 'mini_thumb' : 'mini',
$count
);
}
return aksrt_render_placeholder($style === 'card' ? 'card' : 'lists', $count);
return aksrt_render_placeholder($style === 'card' ? 'card' : 'list', $count);
}
private static function tab_posts(array $instance, array $context): string {
@@ -92,7 +91,8 @@ final class ContentRenderer {
// 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>';
}
$body .= '<div class="post_ajax_loader" style="display:none;">' . self::placeholder($instance) . '</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++;
}