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>
2026-10-04 03:04:02 +08:00
1 parent f61142ee9a
commit 38bbd917a9
@@ -15,7 +15,9 @@
    var wrap = scope.querySelector("[data-ajax-wrap]");
    if (!wrap) return;

-    var loading = wrap.querySelector(".archive__ajax-loading");
+    // 归档面与首页共用同一套骨架契约：.post_ajax_loader + .is-loading，
+    // 不再使用独立 spinner 遮罩 / opacity 淡出。
+    var loading = wrap.querySelector(".post_ajax_loader");
    var REST_BASE = "/wp-json/aksrt/v1/archive/posts";
    var emptyText = archiveType === "tag" ? "该标签下暂无文章" : "该分类下暂无文章";

@@ -73,12 +75,10 @@

    function showLoading() {
      if (loading) loading.classList.add("is-loading");
-      wrap.classList.add("is-loading");
    }

    function hideLoading() {
      if (loading) loading.classList.remove("is-loading");
-      wrap.classList.remove("is-loading");
    }

    function rebuildEmptyState() {
@@ -102,9 +102,15 @@
        .then(function (data) {
          hideLoading();
          if (data.html !== undefined) {
-            var children = Array.from(wrap.children);
-            children.forEach(function (child) {
-              if (child !== loading) wrap.removeChild(child);
+            // 只清真实内容；骨架（.post_ajax_loader）与分页控件保留复用 ——
+            // 与参考主题 post_ajax success 只 hide 不删的生命周期一致。
+            var keep = function (node) {
+              return node === loading ||
+                node.classList.contains("post_ajax_loader") ||
+                node.classList.contains("ajax-pag");
+            };
+            Array.from(wrap.children).forEach(function (child) {
+              if (!keep(child)) wrap.removeChild(child);
            });
            if (data.html) {
              var temp = document.createElement("div");
@@ -50,7 +50,48 @@
        target = container.parentElement.querySelector(".post-grid, .comment-list, .commentlist, .content-stream__list");
      }

-      // 参考主题兜底 loader：DOM 里没有骨架时补一个 .loading 转圈 + 文案，
+      // 文章骨架：与 runtime/main.js 的 .ajax-next 处理器、aksrt_render_placeholder()
+      // 同源同款（1:1 对齐参考主题 zib_get_post_placeholder）。刻意不写 ajax-item：
+      // 否则会被 inject() / find('.ajax-item') 当成真实条目删除或定位。
+      var CARD_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>';
+      var LIST_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>';
+
+      // 视口阈值与参考主题 .ajax-next 处理器一致：宽 + 无侧栏 → 8，宽 + 有侧栏 → 6，
+      // 窄屏 → 4；list 模式宽屏 4、窄屏 3。
+      function skeletonCount(style) {
+        var wide = window.innerWidth > 766;
+        if (style === "card") {
+          if (!wide) return 4;
+          return window.innerWidth > 992 && !document.querySelector(".sidebar") ? 8 : 6;
+        }
+        return wide ? 4 : 3;
+      }
+
+      // 从列表首张真实卡片判断形状；无卡片时退化为 list。
+      function postSkeleton() {
+        var first = target && target.querySelector
+          ? target.querySelector(".posts-item.card, .posts-item.list")
+          : null;
+        var isCard = !!first && /(^|\s)card(\s|$)/.test(first.className || "");
+        var tpl = isCard ? CARD_ITEM : LIST_ITEM;
+        var out = "";
+        for (var i = 0, n = skeletonCount(isCard ? "card" : "list"); i < n; i++) {
+          out += tpl;
+        }
+        return '<div class="mb20">' + out + '</div>';
+      }
+
+      // 兜底（非文章列表面，例如评论区没有 .posts-item 时）：转圈 + 文案，
      // 绝不用按钮自身文字来表达加载态。
      function fallbackLoader() {
        var text = (window.aksrtData && aksrtData.ajaxLoading) || "加载中...";
@@ -67,7 +108,7 @@
        if (!loader) {
          loader = document.createElement("div");
          loader.className = "post_ajax_loader";
-          loader.innerHTML = fallbackLoader();
+          loader.innerHTML = postSkeleton() || fallbackLoader();
        }
        // 参考主题 beforeSend：骨架每次翻页都挪到列表末尾（分页控件之前），
        // 紧贴最后一张卡片、位于「加载更多」按钮上方。
@@ -231,6 +272,11 @@

      if (loadMoreBtn) {
        clickTarget.addEventListener("click", function(e) {
+          // 排序菜单（.ajax-option）与 tab pane 触发器（.post_ajax_trigger）归 legacy
+          // runtime post_ajax() 管线；本引擎避开，否则一次点击发两个请求。
+          if (e.target.closest && e.target.closest(".ajax-option, .post_ajax_trigger")) {
+            return;
+          }
          e.preventDefault();
          if (loadMoreBtn.dataset.jumpComments === "1") {
            var jumpInput = container.querySelector(".jump-input");
@@ -1781,7 +1781,9 @@ function post_ajax(_this, con, jcon, item, loader, pag, next, trigger, replace,
                    $con.append($loader);
                }

-                $loader.fadeIn();
+                // 显隐只走 .is-loading 类（modal-runtime.css）；fadeIn()/hide() 会写
+                // inline display，而内联优先级高于类规则，残留后骨架永远打不开。
+                $loader.addClass('is-loading');
                swiper_tab_AutoHeight($con);
            },
            success: function (a) {
@@ -1837,7 +1839,8 @@ function post_ajax(_this, con, jcon, item, loader, pag, next, trigger, replace,
                }

                $con.removeAttr('ing').trigger('post_ajax.ed', jQuery(a));
-                find('.post_ajax_loader', $con).hide();
+                // 同 beforeSend：只切换 .is-loading，不写 inline display。
+                find('.post_ajax_loader', $con).removeClass('is-loading');

                if (!_this.attr('no-scroll')) {
                    var _scroll_To = replace ? $con : jQuery(c_c[0]);
@@ -1 +1 @@
-(function($,window2,document2){"use strict";function closeNotyf($element){$element.addClass("notyn-out"),window2.setTimeout(function(){$element.remove()},1e3)}function notyf2(message,type,time,id){var $body=jQuery(document2.body);jQuery(".notyn").length||$body.append('<div class="notyn"></div>'),type=type||"success",type==="error"&&(type="danger"),time=time||5e3,time=time<100?time*1e3:time;var idAttribute=id?' id="'+id+'"':"",$notification=jQuery('<div class="noty1"'+idAttribute+'><div class="notyf '+type+'">'+message+"</div></div>"),shouldClose=!id;id&&jQuery("#"+id).length?(jQuery("#"+id).find(".notyf").removeClass().addClass("notyf "+type).html(message),$notification=jQuery("#"+id),shouldClose=!0):jQuery(".notyn").append($notification),shouldClose&&window2.setTimeout(function(){closeNotyf($notification)},time)}jQuery(document2.body).on("click",".noty1",function(){closeNotyf(jQuery(this))}),window2.notyf=notyf2})(jQuery,window,document),(function(window2){"use strict";var allowedKinds={identity:!0,badges:!0,orders:!0,vip:!0},allowedEvents={click:!0,shell:!0,"first-content":!0,ready:!0,"action-start":!0,"action-end":!0,unauthorized:!0,error:!0},sessions=Object.create(null),sequence=0,maxSessions=100;function normalize(value,fallback){var normalized=String(value||fallback||"").toLowerCase().replace(/[^a-z0-9-]/g,"");return normalized||fallback}function now(){return window2.performance&&typeof window2.performance.now=="function"?window2.performance.now():0}function markName(session,event){return"aksrt-modal-"+session.kind+"-"+session.id+"-"+event}function emit(session,event){if(!(!window2.performance||typeof window2.performance.mark!="function")){var name=markName(session,event);if(window2.performance.mark(name),session.marks[event]=name,typeof window2.performance.measure=="function"&&session.marks.click&&event!=="click")try{window2.performance.measure("aksrt-modal-"+session.kind+"-"+session.id+"-click-to-"+event,session.marks.click,name)}catch{}}}function start(kind){var safeKind=normalize(kind,"unknown");allowedKinds[safeKind]||(safeKind="unknown"),sequence+=1;var id=String(sequence),session={id,kind:safeKind,startedAt:now(),marks:Object.create(null)};sessions[id]=session,emit(session,"click");for(var ids=Object.keys(sessions);ids.length>maxSessions;)delete sessions[ids.shift()];return id}function mark(id,event){var session=sessions[String(id||"")],safeEvent=normalize(event,"error");!session||!allowedEvents[safeEvent]||emit(session,safeEvent)}function finish(id){mark(id,"ready")}function fail(id){mark(id,"error")}window2.AksrtModalTelemetry={start,mark,finish,error:fail}})(window),(function(window2){"use strict";function data(){return window2.aksrtData||window2.aksrt||{}}function createIdempotencyKey(){if(window2.crypto&&typeof window2.crypto.randomUUID=="function")return window2.crypto.randomUUID();if(!window2.crypto||typeof window2.crypto.getRandomValues!="function")throw new Error("当前浏览器无法生成安全的操作标识");var bytes=new Uint8Array(16);window2.crypto.getRandomValues(bytes),bytes[6]=bytes[6]&15|64,bytes[8]=bytes[8]&63|128;var hex=Array.prototype.map.call(bytes,function(value){return value.toString(16).padStart(2,"0")}).join("");return hex.slice(0,8)+"-"+hex.slice(8,12)+"-"+hex.slice(12,16)+"-"+hex.slice(16,20)+"-"+hex.slice(20)}function restBase(){var config=data(),raw=config.restUrl||config.apiUrl||config.rest_url||"",siteUrl=config.siteUrl||config.homeUrl||window2.location.origin+"/";return window2.location.protocol==="https:"&&siteUrl.substring(0,5)==="http:"&&(siteUrl="https:"+siteUrl.substring(5)),raw?String(raw).replace(/\/$/,""):String(siteUrl).replace(/\/$/,"")+"/index.php?rest_route=/aksrt/v1"}function appendQuery(url2,query){if(!query)return url2;var parts=[];return typeof query=="string"?parts=query.replace(/^\?/,"").split("&").filter(Boolean):typeof query=="object"&&Object.keys(query).forEach(function(key){query[key]===void 0||query[key]===null||parts.push(encodeURIComponent(key)+"="+encodeURIComponent(String(query[key])))}),parts.length?url2+(url2.indexOf("?")>=0?"&":"?")+parts.join("&"):url2}function url(path,query){path=String(path||"");var inlineQuery="",queryIndex=path.indexOf("?");if(queryIndex>=0&&(inlineQuery=path.slice(queryIndex+1),path=path.slice(0,queryIndex)),/^https?:\/\//i.test(path))return appendQuery(path,query||inlineQuery);path.charAt(0)!=="/"&&(path="/"+path);var base=restBase(),result=(base.indexOf("rest_route=")>=0,base+path);return appendQuery(result,query||inlineQuery)}function headers(options){var config=data(),source=options&&options.headers||{},result={},nonce=config.restNonce||config.nonce||"";return Object.keys(source).forEach(function(key){result[key]=source[key]}),result.Accept||(result.Accept="application/json, text/html;q=0.9, */*;q=0.8"),nonce&&!result["X-WP-Nonce"]&&(result["X-WP-Nonce"]=nonce),options&&options.body!==void 0&&options.body!==null&&!(window2.FormData&&options.body instanceof window2.FormData)&&!result["Content-Type"]&Line truncated
+(function($,window2,document2){"use strict";function closeNotyf($element){$element.addClass("notyn-out"),window2.setTimeout(function(){$element.remove()},1e3)}function notyf2(message,type,time,id){var $body=jQuery(document2.body);jQuery(".notyn").length||$body.append('<div class="notyn"></div>'),type=type||"success",type==="error"&&(type="danger"),time=time||5e3,time=time<100?time*1e3:time;var idAttribute=id?' id="'+id+'"':"",$notification=jQuery('<div class="noty1"'+idAttribute+'><div class="notyf '+type+'">'+message+"</div></div>"),shouldClose=!id;id&&jQuery("#"+id).length?(jQuery("#"+id).find(".notyf").removeClass().addClass("notyf "+type).html(message),$notification=jQuery("#"+id),shouldClose=!0):jQuery(".notyn").append($notification),shouldClose&&window2.setTimeout(function(){closeNotyf($notification)},time)}jQuery(document2.body).on("click",".noty1",function(){closeNotyf(jQuery(this))}),window2.notyf=notyf2})(jQuery,window,document),(function(window2){"use strict";var allowedKinds={identity:!0,badges:!0,orders:!0,vip:!0},allowedEvents={click:!0,shell:!0,"first-content":!0,ready:!0,"action-start":!0,"action-end":!0,unauthorized:!0,error:!0},sessions=Object.create(null),sequence=0,maxSessions=100;function normalize(value,fallback){var normalized=String(value||fallback||"").toLowerCase().replace(/[^a-z0-9-]/g,"");return normalized||fallback}function now(){return window2.performance&&typeof window2.performance.now=="function"?window2.performance.now():0}function markName(session,event){return"aksrt-modal-"+session.kind+"-"+session.id+"-"+event}function emit(session,event){if(!(!window2.performance||typeof window2.performance.mark!="function")){var name=markName(session,event);if(window2.performance.mark(name),session.marks[event]=name,typeof window2.performance.measure=="function"&&session.marks.click&&event!=="click")try{window2.performance.measure("aksrt-modal-"+session.kind+"-"+session.id+"-click-to-"+event,session.marks.click,name)}catch{}}}function start(kind){var safeKind=normalize(kind,"unknown");allowedKinds[safeKind]||(safeKind="unknown"),sequence+=1;var id=String(sequence),session={id,kind:safeKind,startedAt:now(),marks:Object.create(null)};sessions[id]=session,emit(session,"click");for(var ids=Object.keys(sessions);ids.length>maxSessions;)delete sessions[ids.shift()];return id}function mark(id,event){var session=sessions[String(id||"")],safeEvent=normalize(event,"error");!session||!allowedEvents[safeEvent]||emit(session,safeEvent)}function finish(id){mark(id,"ready")}function fail(id){mark(id,"error")}window2.AksrtModalTelemetry={start,mark,finish,error:fail}})(window),(function(window2){"use strict";function data(){return window2.aksrtData||window2.aksrt||{}}function createIdempotencyKey(){if(window2.crypto&&typeof window2.crypto.randomUUID=="function")return window2.crypto.randomUUID();if(!window2.crypto||typeof window2.crypto.getRandomValues!="function")throw new Error("当前浏览器无法生成安全的操作标识");var bytes=new Uint8Array(16);window2.crypto.getRandomValues(bytes),bytes[6]=bytes[6]&15|64,bytes[8]=bytes[8]&63|128;var hex=Array.prototype.map.call(bytes,function(value){return value.toString(16).padStart(2,"0")}).join("");return hex.slice(0,8)+"-"+hex.slice(8,12)+"-"+hex.slice(12,16)+"-"+hex.slice(16,20)+"-"+hex.slice(20)}function restBase(){var config=data(),raw=config.restUrl||config.apiUrl||config.rest_url||"",siteUrl=config.siteUrl||config.homeUrl||window2.location.origin+"/";return window2.location.protocol==="https:"&&siteUrl.substring(0,5)==="http:"&&(siteUrl="https:"+siteUrl.substring(5)),raw?String(raw).replace(/\/$/,""):String(siteUrl).replace(/\/$/,"")+"/index.php?rest_route=/aksrt/v1"}function appendQuery(url2,query){if(!query)return url2;var parts=[];return typeof query=="string"?parts=query.replace(/^\?/,"").split("&").filter(Boolean):typeof query=="object"&&Object.keys(query).forEach(function(key){query[key]===void 0||query[key]===null||parts.push(encodeURIComponent(key)+"="+encodeURIComponent(String(query[key])))}),parts.length?url2+(url2.indexOf("?")>=0?"&":"?")+parts.join("&"):url2}function url(path,query){path=String(path||"");var inlineQuery="",queryIndex=path.indexOf("?");if(queryIndex>=0&&(inlineQuery=path.slice(queryIndex+1),path=path.slice(0,queryIndex)),/^https?:\/\//i.test(path))return appendQuery(path,query||inlineQuery);path.charAt(0)!=="/"&&(path="/"+path);var base=restBase(),result=(base.indexOf("rest_route=")>=0,base+path);return appendQuery(result,query||inlineQuery)}function headers(options){var config=data(),source=options&&options.headers||{},result={},nonce=config.restNonce||config.nonce||"";return Object.keys(source).forEach(function(key){result[key]=source[key]}),result.Accept||(result.Accept="application/json, text/html;q=0.9, */*;q=0.8"),nonce&&!result["X-WP-Nonce"]&&(result["X-WP-Nonce"]=nonce),options&&options.body!==void 0&&options.body!==null&&!(window2.FormData&&options.body instanceof window2.FormData)&&!result["Content-Type"]&Line truncated