feat(frontend): replace article system with Zibll 9.0

This commit is contained in:
2026-08-18 16:06:47 +08:00
parent 2881c69e9c
commit 0f2ac6c34a
69 changed files with 2603 additions and 4163 deletions
+96
View File
@@ -4,6 +4,102 @@
(function () {
"use strict";
function renderGradientBackground(container) {
if (!container || container.dataset.aksrtGradientState || typeof window.Grade !== "function") return;
var source = container.querySelector("img");
if (!source || (!source.classList.contains("lazyloaded") && !(source.complete && source.naturalWidth > 0))) return;
container.dataset.aksrtGradientState = "loading";
window.Grade(container, null, function (result) {
var gradientData = result && result[0];
var colors = gradientData && gradientData.gradientData;
if (!gradientData || !colors || !colors[0] || !colors[1]) {
delete container.dataset.aksrtGradientState;
return;
}
var opacity = container.getAttribute("data-opacity");
var colorName = opacity ? "rgba" : "rgb";
var alpha = opacity ? "," + opacity : "";
var color1 = colorName + "(" + colors[0].rgba.slice(0, 3).join(",") + alpha + ") 10%";
var color2 = colorName + "(" + colors[1].rgba.slice(0, 3).join(",") + alpha + ") 80%";
gradientData.element.classList.add("gradient-bg-loaded");
gradientData.element.style.backgroundImage = "linear-gradient(135deg, " + color1 + ", " + color2 + ")";
container.dataset.aksrtGradientState = "loaded";
});
}
function initGradientBackgrounds(root) {
var scope = root || document;
if (scope.nodeType === 1 && scope.matches(".gradient-bg")) {
renderGradientBackground(scope);
}
scope.querySelectorAll(".gradient-bg").forEach(renderGradientBackground);
}
document.addEventListener("lazyloaded", function (event) {
if (!(event.target instanceof Element) || !event.target.matches(".gradient-bg img")) return;
renderGradientBackground(event.target.closest(".gradient-bg"));
}, true);
function initPostThumbMedia(root) {
var scope = root || document;
scope.querySelectorAll("[data-post-thumb-slider]").forEach(function (el) {
if (el.dataset.aksrtThumbSliderBound === "1" || typeof Swiper === "undefined") return;
el.dataset.aksrtThumbSliderBound = "1";
new Swiper(el, {
slidesPerView: 1,
loop: el.querySelectorAll(".swiper-slide").length > 1,
pagination: {
el: el.querySelector(".swiper-pagination"),
clickable: true,
},
});
});
scope.querySelectorAll("[data-post-thumb-video]").forEach(function (box) {
if (box.dataset.aksrtThumbVideoBound === "1") return;
box.dataset.aksrtThumbVideoBound = "1";
var video = box.querySelector("video");
if (!video) return;
function loadVideo() {
if (!video.getAttribute("src") && video.dataset.src) {
video.setAttribute("src", video.dataset.src);
video.load();
}
}
function playVideo() {
loadVideo();
var result = video.play();
var postItem = box.closest(".posts-item");
if (postItem) postItem.classList.add("thumb-dplayer-playing");
if (result && typeof result.catch === "function") result.catch(function () {});
}
function pauseVideo() {
video.pause();
var postItem = box.closest(".posts-item");
if (postItem) postItem.classList.remove("thumb-dplayer-playing");
}
var item = box.closest(".item-thumbnail") || box;
item.addEventListener("mouseenter", playVideo);
item.addEventListener("mouseleave", pauseVideo);
item.addEventListener("focusin", playVideo);
item.addEventListener("focusout", pauseVideo);
});
}
window.AksrtFrontend.register("aksrt-post-thumb-media", function (root) {
initPostThumbMedia(root);
initGradientBackgrounds(root);
});
function initRelatedSwiper() {
var el = document.querySelector(".related-swiper[data-swiper-config]");
if (!el || typeof Swiper === "undefined") return;
+28 -17
View File
@@ -9,7 +9,7 @@
}
function initAjaxPagination(root) {
var containers = (root || document).querySelectorAll(".aksrt-pagination-ajax, .ajax-pagination");
var containers = (root || document).querySelectorAll("[data-aksrt-pagination], .aksrt-comment-pagination");
if (!containers.length) return;
var triggerText = (window.aksrtData && aksrtData.ajaxTrigger) || "加载更多";
@@ -29,8 +29,9 @@
var commentOrder = container.dataset.commentOrder || "newest";
var loading = false;
var failed = false;
var loadMoreBtn = container.querySelector(".aksrt-load-more-btn, .ajax-next");
var indicator = container.querySelector(".aksrt-loading-indicator");
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)
@@ -68,13 +69,19 @@
function stopInfinite(markNomore) {
container.classList.remove("ias-pending");
if (markNomore && loadMoreBtn) {
loadMoreBtn.textContent = nomoreText;
loadMoreBtn.innerHTML = nomoreText;
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.classList.add("ajax-nomore");
var nextWrap = loadMoreBtn.closest(".next-page");
if (nextWrap) nextWrap.classList.add("no-more");
loadMoreBtn.style.pointerEvents = "none";
} else if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore")) {
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.textContent = failed ? errorText : triggerText;
if (failed) {
loadMoreBtn.textContent = errorText;
} else {
loadMoreBtn.innerHTML = triggerText;
}
loadMoreBtn.style.pointerEvents = "";
}
}
@@ -164,7 +171,7 @@
target.appendChild(newItems[0]);
}
}
if (isComment && window.AksrtFrontend) {
if (window.AksrtFrontend) {
AksrtFrontend.rehydrate(target, "ajax");
}
nextPage++;
@@ -191,13 +198,16 @@
if (indicator) indicator.style.display = "none";
if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore") && !failed) {
loadMoreBtn.classList.remove("is-loading");
loadMoreBtn.textContent = triggerText;
loadMoreBtn.innerHTML = triggerText;
if (mode === "infinite") {
var lazyTrigger = clickTarget.closest(".next-page") || clickTarget;
if (iasMax > 0 && successfulAutoLoads >= iasMax) {
stopInfinite(true);
container.classList.remove("ias-pending");
lazyTrigger.classList.remove("lazyload", "lazyloaded", "lazyloading");
lazyTrigger.removeAttribute("lazyload-action");
} else {
loadMoreBtn.classList.remove("lazyloaded", "lazyloading");
loadMoreBtn.classList.add("lazyload");
lazyTrigger.classList.remove("lazyloaded", "lazyloading");
lazyTrigger.classList.add("lazyload");
if (window.lazySizes && lazySizes.loader) {
lazySizes.loader.checkElems();
}
@@ -208,7 +218,7 @@
}
if (loadMoreBtn) {
loadMoreBtn.addEventListener("click", function(e) {
clickTarget.addEventListener("click", function(e) {
e.preventDefault();
if (loadMoreBtn.dataset.jumpComments === "1") {
var jumpInput = container.querySelector(".jump-input");
@@ -228,14 +238,14 @@
var archiveMax = parseInt(archiveJumpInput.dataset.maxPages || String(maxPages), 10) || maxPages;
archiveTargetPage = Math.max(1, Math.min(archiveMax, archiveTargetPage));
var archiveUrl = new URL(window.location.href);
archiveUrl.searchParams.set("paged", String(archiveTargetPage));
archiveUrl.searchParams.set(loadMoreBtn.dataset.pageVar || "paged", String(archiveTargetPage));
window.location.href = archiveUrl.toString();
return;
}
var fromAuto = loadMoreBtn.dataset.lazyAuto === "1";
delete loadMoreBtn.dataset.lazyAuto;
var fromAuto = clickTarget.dataset.lazyAuto === "1";
delete clickTarget.dataset.lazyAuto;
if (fromAuto && iasMax > 0 && successfulAutoLoads >= iasMax) {
stopInfinite(true);
container.classList.remove("ias-pending");
return;
}
// Manual click can recover from a previous auto-load failure.
@@ -246,8 +256,9 @@
if (mode === "infinite") {
if ((isComment && window.aksrtData && aksrtData.commentIasAuto === false) || !hasAjaxConfig()) {
loadMoreBtn.classList.remove("lazyload");
loadMoreBtn.removeAttribute("lazyload-action");
var autoTrigger = clickTarget.closest(".next-page") || clickTarget;
autoTrigger.classList.remove("lazyload");
autoTrigger.removeAttribute("lazyload-action");
return;
}
container.classList.add("ias-pending");
+1
View File
@@ -0,0 +1 @@
(function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Grade=e()}})(function(){return function e(t,n,r){function i(o,s){if(!n[o]){if(!t[o]){var u="function"==typeof require&&require;if(!s&&u)return u(o,!0);if(a)return a(o,!0);var c=new Error("Cannot find module '"+o+"'");throw c.code="MODULE_NOT_FOUND",c}var g=n[o]={exports:{}};t[o][0].call(g.exports,function(e){var n=t[o][1][e];return i(n||e)},g,g.exports,e,t,n,r)}return n[o].exports}for(var a="function"==typeof require&&require,o=0;o<r.length;o++)i(r[o]);return i}({1:[function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=["webkit"],o=function(){function e(t,n,i){r(this,e),this.callback=i||null,this.container=t;var a=this.container.querySelector(n||"img");if(this.gradientData=[],a&&this.container){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.imageData=[];var o=this;o.image=new Image,o.image.crossOrigin="Anonymous",o.image.src=a.getAttribute("data-src")||a.getAttribute("src"),o.image.onload=function(){o.readImage()}}}return i(e,[{key:"readImage",value:function(){this.imageDimensions={width:100,height:100},this.render()}},{key:"getImageData",value:function(){var e=this.ctx.getImageData(0,0,this.imageDimensions.width,this.imageDimensions.height).data;this.imageData=Array.from(e)}},{key:"getChunkedImageData",value:function(){var e=4,t=this.imageData.reduce(function(t,n,r){var i=Math.floor(r/e);return t[i]||(t[i]=[]),t[i].push(n),t},[]),n=t.filter(function(e){var t=e[0],n=e[1],r=e[2],i=Math.max(Math.abs(t-n),Math.abs(t-r),Math.abs(n-r));return i>20});return(!n||n.length<2)&&(n=t.filter(function(e){return e.slice(0,2).every(function(e){return e<245})&&e.slice(0,2).every(function(e){return e>10})})),n}},{key:"getRGBAGradientValues",value:function(e){return e.map(function(e,t){return"rgb("+e.rgba.slice(0,3).join(",")+") "+(0==t?"0%":"75%")}).join(",")}},{key:"getCSSGradientProperty",value:function(e){var t=this.getRGBAGradientValues(e);return a.map(function(e){return"background-image: -"+e+"-linear-gradient(\n 135deg,\n "+t+"\n )"}).concat(["background-image: linear-gradient(\n 135deg,\n "+t+"\n )"]).join(";")}},{key:"getMiddleRGB",value:function(e,t){var n=0,r=(n+1)/2,i=1-r,a=[parseInt(e[0]*r+t[0]*i),parseInt(e[1]*r+t[1]*i),parseInt(e[2]*r+t[2]*i)];return a}},{key:"getSortedValues",value:function(e){var t=Object.keys(e).map(function(t){var n=t,r=t.split("|"),i=(299*r[0]+587*r[1]+114*r[2])/1e3;return{rgba:n.split("|"),occurs:e[t],brightness:i}}).sort(function(e,t){return e.occurs-t.occurs}).reverse().slice(0,10);return t.sort(function(e,t){return e.brightness-t.brightness}).reverse()}},{key:"getTextProperty",value:function(e){var t=this.getMiddleRGB(e[0].rgba.slice(0,3),e[1].rgba.slice(0,3)),n=Math.round((299*parseInt(t[0])+587*parseInt(t[1])+114*parseInt(t[2]))/1e3);return n>125?"color: #000":"color: #fff"}},{key:"getTopValues",value:function(e){var t=this.getSortedValues(e);return[t[0],t[t.length-1]]}},{key:"getUniqValues",value:function(e){return e.reduce(function(e,t){var n=t.join("|");return e[n]?(e[n]=++e[n],e):(e[n]=1,e)},{})}},{key:"renderGradient",value:function(){var e=window.localStorage,t="grade-"+this.image.getAttribute("src"),n=null;if(e&&e.getItem(t)&&(n=JSON.parse(e.getItem(t))),!n||!n[0]){var r=this.getChunkedImageData();n=this.getTopValues(this.getUniqValues(r)),e&&e.setItem(t,JSON.stringify(n))}if(this.callback)return this.gradientData=n,void this.callback([{element:this.container,gradientData:n}]);var i=this.getCSSGradientProperty(n),a=this.getTextProperty(n),o=(this.container.getAttribute("style")||"")+"; "+i+"; "+a;this.container.setAttribute("style",o)}},{key:"render",value:function(){this.canvas.width=this.imageDimensions.width,this.canvas.height=this.imageDimensions.height,this.ctx.drawImage(this.image,0,0,this.imageDimensions.width,this.imageDimensions.height),this.getImageData(),this.renderGradient()}}]),e}();t.exports=function(e,t,n){var r=function(e,t,n){var r=new o(e,t,n),i=r.gradientData;return i.length?{element:e,gradientData:i}:null},i=(NodeList.prototype.isPrototypeOf(e)?Array.from(e).map(function(e){return r(e,t,n)}):[r(e,t,n)]).filter(Boolean);if(i.length)return n(i)}},{}]},{},[1])(1)});
+5 -110
View File
@@ -1,7 +1,7 @@
/**
* Homepage Fixed - Interactive Layer (v2.0 Zibll-aligned)
*
* Unified AJAX protocol for homepage tabs, sort, pagination, and view toggle.
* Unified AJAX protocol for homepage tabs, sort, and pagination.
* Uses Zibll-style ajaxpager DOM conventions and custom event flow:
* post_ajax.before → fetch → post_ajax.ed → aksrt:posts:rendered
*
@@ -11,34 +11,18 @@
(function () {
'use strict';
var STORAGE_KEY = 'aksrt_homepage_view_mode';
var SORT_QUERY_KEY = 'home_sort';
var DEFAULT_SORT = 'modified';
var DEFAULT_VIEW = 'list';
var REST_PATH = '/wp-json/aksrt/v1/homepage/tab-posts';
/* ============================================================
* Utilities
* ============================================================ */
function safeLocalStorage() {
try { return window.localStorage; } catch (e) { return null; }
}
function getViewMode() {
var store = safeLocalStorage();
if (store) {
var saved = store.getItem(STORAGE_KEY);
if (saved === 'card' || saved === 'list') return saved;
}
return getDefaultView();
}
function setViewMode(mode) {
var store = safeLocalStorage();
if (store) { try { store.setItem(STORAGE_KEY, mode); } catch (e) { /* */ } }
}
function getRenderedPostCount(scope) {
if (!scope) return 0;
return scope.querySelectorAll('.posts-item, .posts-mini').length;
@@ -63,8 +47,8 @@
}
function getDefaultView() {
var configured = window.aksrtData && aksrtData.homepageDefaultView;
return configured === 'card' || configured === 'list' ? configured : DEFAULT_VIEW;
var panel = document.querySelector('[data-home-tab-panel][data-view]');
return panel && panel.getAttribute('data-view') === 'card' ? 'card' : 'list';
}
function isSortAjaxEnabled(sortbar) {
@@ -119,8 +103,8 @@
}
function getStreamViewMode(stream) {
var activeBtn = stream.querySelector('.aksrt-homepage__view-btn.is-active');
return (activeBtn && activeBtn.getAttribute('data-view-mode')) || getViewMode();
var panel = getActivePanel(stream);
return panel && panel.getAttribute('data-view') === 'card' ? 'card' : 'list';
}
function getActivePanel(stream) {
@@ -153,7 +137,6 @@
'&page=' + encodeURIComponent(options.page || 1) +
'&per_page=' + encodeURIComponent(options.perPage || 10) +
'&sort=' + encodeURIComponent(options.sort || getDefaultSort()) +
'&view_mode=' + encodeURIComponent(options.viewMode || getDefaultView()) +
'&page_url=' + encodeURIComponent(options.pageUrl || window.location.href) +
'&panel=' + encodeURIComponent(options.panel || 'latest') +
'&source=' + encodeURIComponent(options.source || 'home') +
@@ -731,93 +714,6 @@
});
}
/* ============================================================
* View Mode Toggle
* ============================================================ */
function applyViewMode(buttons, postsContainers, mode) {
buttons.forEach(function (btn) {
var btnMode = btn.getAttribute('data-view-mode');
var isActive = btnMode === mode;
btn.classList.toggle('is-active', isActive);
btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
});
Array.prototype.forEach.call(postsContainers, function (container) {
container.setAttribute('data-view', mode);
container.querySelectorAll('.posts-item').forEach(function (item) {
item.classList.toggle('card', mode === 'card');
item.classList.toggle('list', mode === 'list');
});
});
}
function initViewToggle() {
var toggles = document.querySelectorAll('[data-aksrt-view-toggle]');
toggles.forEach(function (toggle) {
var buttons = toggle.querySelectorAll('.aksrt-homepage__view-btn');
var stream = toggle.closest('.aksrt-homepage__stream');
if (!stream) return;
function getPostsContainers() {
return stream.querySelectorAll('[data-home-tab-panel]');
}
function getActiveMode() {
var activeBtn = toggle.querySelector('.aksrt-homepage__view-btn.is-active');
return (activeBtn && activeBtn.getAttribute('data-view-mode')) || getViewMode();
}
var initialMode = getViewMode();
var activePanel = getActivePanel(stream);
var renderedMode = activePanel ? activePanel.getAttribute('data-view') : '';
applyViewMode(buttons, getPostsContainers(), initialMode);
// The persisted preference may differ from the server-rendered mode.
// Class toggling alone leaves list-only markup and its `.flex` utility in
// place, which forces a supposed card to occupy a full row. Fetch the
// matching renderer immediately so DOM and visual mode stay atomic.
if (activePanel && renderedMode !== initialMode) {
requestHomepagePanel(activePanel, {
termId: getPanelTermId(activePanel),
page: 1,
perPage: getHomepagePerPage(activePanel),
sort: getCurrentSort(stream),
viewMode: initialMode,
panel: activePanel.getAttribute('data-home-tab-panel') || 'latest',
source: 'home',
tabOrderby: getPanelTabOrderby(activePanel)
});
}
buttons.forEach(function (btn) {
btn.addEventListener('click', function () {
var mode = btn.getAttribute('data-view-mode') || getDefaultView();
var activePanel = getActivePanel(stream);
if (!activePanel || mode === getActiveMode()) return;
setViewMode(mode);
applyViewMode(buttons, getPostsContainers(), mode);
requestHomepagePanel(activePanel, {
termId: getPanelTermId(activePanel),
page: 1,
perPage: getHomepagePerPage(activePanel),
sort: getCurrentSort(stream),
viewMode: mode,
panel: activePanel.getAttribute('data-home-tab-panel') || 'latest',
source: 'home',
tabOrderby: getPanelTabOrderby(activePanel)
});
});
});
// Re-apply view mode after AJAX content renders
stream.addEventListener('aksrt:posts:rendered', function () {
applyViewMode(buttons, getPostsContainers(), getActiveMode());
});
});
}
/* ============================================================
* Init
* ============================================================ */
@@ -827,7 +723,6 @@
initSortbarDropdown();
initSortbar();
initStickyTabs();
initViewToggle();
}
if (document.readyState === 'loading') {