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>
This commit is contained in:
1 parent
7fc1ac98de
commit
89a9cf24e9
9 files changed
+50
-26
No files matched your search
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user