fix(skeleton): align the homepage tab and sort loaders with the reference 1:1
首页「更多栏目」tab 与「排序方式」切换的骨架占位与参考主题 zibll 有实质差异,
根因不是几何宽度,而是三处结构/契约错位:
1. 骨架块自身结构与参考主题不同。card 分支用了 `<posts>` 元素 + `.post-graphic`
包裹层(列表变体,带 margin-right:20px),而参考主题 card 骨架是
`<div class="posts-item card">` 且 `.item-thumbnail` 是直接子元素。
→ card 骨架右侧多出一条真实卡片没有的 20px 沟槽。
2. 骨架块被错误地打上 `ajax-item`。参考主题的占位块没有该类。它会让
`find('.ajax-item')` / ajax-list 的 `inject()` 把骨架当成真实条目。
3. 排序切换的骨架被预渲染节点顶替。aksrt_render_pagination() 在 .ajax-pag 内
渲染了一个写死 2 条、写死 list 形状的 .post_ajax_loader;runtime post_ajax()
会先在容器内 find('.post_ajax_loader'),找到就复用并丢弃调用方按视口动态
拼出的骨架 → 切排序永远是 2 条 list 骨架,card 布局下也是、与视口宽度无关。
参考主题 zib_paging() 根本没有 loader 兄弟节点。
改动:
- inc/helpers/posts-renderer/markup.php:aksrt_render_placeholder() 的
card/list 分支改为与 zib_get_post_placeholder() 逐字等价的结构;去掉
ajax-item 类、card 分支的 .post-graphic 包裹层,元素改用 <div>。
- inc/helpers/template-tags/pagination-permissions.php:删除预渲染 loader,
与参考主题 zib_paging() 一致 —— 只渲染翻页控件。
- assets/js/core/pagination.js:找不到骨架节点时构造与 runtime/main.js 同款
的文章骨架(卡片 8/6/4 条、列表 4/3 条,按视口与参考主题同阈值),
不再退化为「转圈 + 文案」这个第二套加载语言;仅评论等非文章面保留该兜底。
- assets/js/core/pagination.js:为排序菜单(.ajax-option)与 tab 触发器
(.post_ajax_trigger)增加避让 —— 它们归 legacy runtime 管线,
否则一次点击发两个请求(与 ajax-list.js 的既有避让对称)。
- assets/js/runtime/main.js:post_ajax 的显隐由 fadeIn()/hide() 改为
.is-loading 类切换。前者写 inline display,优先级高于类规则,一旦残留
骨架永远打不开,正是骨架契约明令禁止的失败模式。
归档/分类筛选面原本另有一套独立加载语言(spinner 遮罩 + opacity 淡出),
本次一并统一到同一条 .post_ajax_loader + .is-loading 契约:
- inc/helpers/aksrt-archive.php:删除 show_loading 标记位与遮罩 DOM,
改为在分页之后渲染文章骨架。
- assets/js/core/archive.js:showLoading/hideLoading 只切 .is-loading;
fetchPosts() 清空内容时保留骨架与分页节点(与参考主题 success 只 hide
不删的生命周期一致),原先会连带删掉骨架。
- assets/css/frontend/layout.css:删除 .archive__ajax-wrap.is-loading
的 opacity 淡出与 spinner 遮罩规则。
- category.php / tag.php:删除已失效的 show_loading 实参。
验证:php -l 全部通过;php tools/audit-admin-contracts.php errors=0;
契约测试 post-visual(22) / asset-ledger(16) / message-center(8) /
lazyload(7) / frontend-lifecycle(13) / zibll-modern-widgets(10) /
page-display(18) / a11y 全绿;已重跑 build:public 刷新产物。
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
f61142ee9a
commit
38bbd917a9
14 files changed
+118
-143
No files matched your search
@@ -208,11 +208,18 @@ if (!function_exists('aksrt_render_mini_list')) {
|
||||
|
||||
if (!function_exists('aksrt_render_placeholder')) {
|
||||
/**
|
||||
* 骨架屏占位(legacy zib_get_post_placeholder parity)。
|
||||
* 骨架屏占位,1:1 对齐参考主题 `zib_get_post_placeholder()`。
|
||||
*
|
||||
* 骨架块复用真实卡片的 posts-item / post-graphic / item-body 结构与尺寸,
|
||||
* 只是把内容换成 .placeholder。列表模式四行(标题 k1、摘要 k2、两枚 s1),
|
||||
* 卡片模式三行(标题 t1、摘要 k2、两枚 s1),对应参考主题 1:1。
|
||||
* 只是把内容换成 .placeholder。列表模式四行(标题 t1、摘要 k1、k2、两枚 s1),
|
||||
* 卡片模式三行(标题 t1、摘要 k2、两枚 s1)。
|
||||
*
|
||||
* 刻意与真实条目不同的两点(均与参考主题一致):
|
||||
* - **不写 `ajax-item`**:否则 `find('.ajax-item')` / ajax-list 的 `inject()`
|
||||
* 会把骨架当成真实条目删除或定位。
|
||||
* - **元素是 `<div>` 而非 `<posts>`**,且 card 分支的缩略图是
|
||||
* `.item-thumbnail` 直接子元素(不经 `.post-graphic`,那个带 20px 右边距,
|
||||
* 是列表变体的 wrapper)。
|
||||
*
|
||||
* @param string $mode list|card|mini|mini_thumb。
|
||||
* @param int $count 重复数量,1–12。
|
||||
@@ -222,11 +229,11 @@ if (!function_exists('aksrt_render_placeholder')) {
|
||||
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>';
|
||||
$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>';
|
||||
$item = '<div class="posts-item card"><div class="item-thumbnail"><div class="radius8 item-thumbnail placeholder"></div> </div><div class="item-body "> <h2 class="item-excerpt placeholder t1 item-heading"></h2> <p class="mt10 placeholder k2"></p><i class="flex jsb"><i class="placeholder s1"></i><i class="placeholder s1 ml10"></i></i></div></div>';
|
||||
} 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>';
|
||||
$item = '<div class="posts-item list flex"><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></div>';
|
||||
}
|
||||
return str_repeat($item, $count);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user