文章详细页实现全局DOM加载
This commit is contained in:
kate522 committed
1 parent
65fbf97099
commit
b161d6e5c8
5 files changed
+267
-97
No files matched your search
+120
-44
@@ -476,13 +476,93 @@
|
||||
}
|
||||
|
||||
function getCurrentAuthorOnly() {
|
||||
var url = new URL(window.location.href);
|
||||
if (url.searchParams.get("aksrt_author_only") === "1") return true;
|
||||
var btn = document.querySelector("#comments .btn-only-author");
|
||||
return !!(btn && btn.classList.contains("active") && btn.dataset.authorOnly === "0");
|
||||
}
|
||||
|
||||
function applyFragmentPayload(commentsArea, data, urlState) {
|
||||
/* ====== 全局无参数加载：评论状态仅保存在客户端，地址栏不携带 ? 参数 ====== */
|
||||
var COMMENT_URL_PARAMS = ["cpage", "aksrt_comment_order", "aksrt_author_only"];
|
||||
var commentUrlStateCleaned = false;
|
||||
|
||||
function stripCommentUrlParams() {
|
||||
if (commentUrlStateCleaned || !window.history || typeof window.history.replaceState !== "function") return;
|
||||
commentUrlStateCleaned = true;
|
||||
var url = new URL(window.location.href);
|
||||
var changed = false;
|
||||
COMMENT_URL_PARAMS.forEach(function (key) {
|
||||
if (url.searchParams.has(key)) {
|
||||
url.searchParams.delete(key);
|
||||
changed = true;
|
||||
}
|
||||
});
|
||||
if (changed) {
|
||||
// 服务端首屏已按参数渲染完毕，落地后地址栏回到无参干净链接。
|
||||
window.history.replaceState(null, "", url.toString());
|
||||
}
|
||||
}
|
||||
|
||||
function getMaxCommentPages() {
|
||||
var pagenav = document.querySelector("#comments .pagenav[data-max-pages]");
|
||||
if (pagenav) {
|
||||
var max = parseInt(pagenav.dataset.maxPages, 10);
|
||||
if (max > 0) return max;
|
||||
}
|
||||
var jumpInput = document.querySelector("#comments .jump-input[max]");
|
||||
if (jumpInput) {
|
||||
var maxAttr = parseInt(jumpInput.getAttribute("max"), 10);
|
||||
if (maxAttr > 0) return maxAttr;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
function parseCommentPageFromHref(href) {
|
||||
if (!href || href === "#" || href.indexOf("javascript:") === 0) return 0;
|
||||
try {
|
||||
var url = new URL(href, window.location.href);
|
||||
var cpage = parseInt(url.searchParams.get("cpage"), 10);
|
||||
if (cpage > 0) return cpage;
|
||||
var match = url.pathname.match(/\/comment-page-([0-9]{1,})\/?$/);
|
||||
return match ? parseInt(match[1], 10) : 0;
|
||||
} catch (e) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollCommentsIntoView() {
|
||||
var commentsArea = document.getElementById("comments");
|
||||
if (!commentsArea || typeof commentsArea.scrollIntoView !== "function") return;
|
||||
var rect = commentsArea.getBoundingClientRect();
|
||||
if (rect.top >= 0 && rect.top < window.innerHeight * 0.6) return;
|
||||
commentsArea.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
|
||||
function loadCommentPage(page, opts) {
|
||||
opts = opts || {};
|
||||
var commentsArea = document.getElementById("comments");
|
||||
if (!commentsArea) {
|
||||
return Promise.reject(new Error("comments area missing"));
|
||||
}
|
||||
var maxPages = getMaxCommentPages();
|
||||
page = parseInt(page, 10) || 1;
|
||||
page = Math.max(1, page);
|
||||
if (maxPages > 1) page = Math.min(page, maxPages);
|
||||
|
||||
showListLoading(commentsArea);
|
||||
return fetchCommentFragment({
|
||||
order: getCurrentCommentOrder(),
|
||||
authorOnly: getCurrentAuthorOnly(),
|
||||
page: page
|
||||
}).then(function (json) {
|
||||
if (json && json.success && json.data) {
|
||||
applyFragmentPayload(commentsArea, json.data);
|
||||
if (!opts.noScroll) scrollCommentsIntoView();
|
||||
return true;
|
||||
}
|
||||
throw new Error("comment fragment failed");
|
||||
});
|
||||
}
|
||||
|
||||
function applyFragmentPayload(commentsArea, data) {
|
||||
if (!commentsArea || !data || !data.html) return;
|
||||
|
||||
// data.html 是完整的 <div id="postcomments">（含筛选、列表、分页）
|
||||
@@ -501,9 +581,6 @@
|
||||
var currentCount = commentsArea.querySelector(".title-theme small");
|
||||
if (currentCount && data.count_text) currentCount.textContent = data.count_text;
|
||||
|
||||
if (urlState && window.history && typeof window.history.replaceState === "function") {
|
||||
window.history.replaceState(null, "", urlState);
|
||||
}
|
||||
if (window.AksrtFrontend) AksrtFrontend.rehydrate(commentsArea, "ajax");
|
||||
}
|
||||
|
||||
@@ -548,24 +625,7 @@
|
||||
}
|
||||
|
||||
function reloadCommentList() {
|
||||
var commentsArea = document.getElementById('comments');
|
||||
if (!commentsArea) {
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
showListLoading(commentsArea);
|
||||
|
||||
fetchCommentFragment({
|
||||
order: getCurrentCommentOrder(),
|
||||
authorOnly: getCurrentAuthorOnly(),
|
||||
page: 1
|
||||
}).then(function (json) {
|
||||
if (json && json.success && json.data) {
|
||||
applyFragmentPayload(commentsArea, json.data, null);
|
||||
return;
|
||||
}
|
||||
throw new Error('fragment failed');
|
||||
}).catch(function (error) {
|
||||
loadCommentPage(1, { noScroll: true }).catch(function (error) {
|
||||
console.error('[AKSRT Comment] 刷新评论列表失败:', error);
|
||||
window.location.reload();
|
||||
});
|
||||
@@ -608,23 +668,19 @@
|
||||
}
|
||||
renderLoadingState();
|
||||
var authorOnly = getCurrentAuthorOnly();
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.set("aksrt_comment_order", order);
|
||||
url.searchParams.delete("cpage");
|
||||
if (authorOnly) url.searchParams.set("aksrt_author_only", "1");
|
||||
else url.searchParams.delete("aksrt_author_only");
|
||||
|
||||
fetchCommentFragment({ order: order, authorOnly: authorOnly, page: 1 })
|
||||
.then(function (json) {
|
||||
if (json && json.success && json.data) {
|
||||
applyFragmentPayload(commentsArea, json.data, url.toString());
|
||||
applyFragmentPayload(commentsArea, json.data);
|
||||
return;
|
||||
}
|
||||
throw new Error("order fragment failed");
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("[AKSRT Comment] 排序刷新失败:", error);
|
||||
window.location.href = url.toString();
|
||||
// 兜底整页刷新，地址栏保持无参。
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -632,23 +688,19 @@
|
||||
renderLoadingState();
|
||||
var authorOnly = authorOnlyFlag === "1" || authorOnlyFlag === 1 || authorOnlyFlag === true;
|
||||
var order = getCurrentCommentOrder();
|
||||
var url = new URL(window.location.href);
|
||||
if (authorOnly) url.searchParams.set("aksrt_author_only", "1");
|
||||
else url.searchParams.delete("aksrt_author_only");
|
||||
url.searchParams.delete("cpage");
|
||||
if (order) url.searchParams.set("aksrt_comment_order", order);
|
||||
|
||||
fetchCommentFragment({ order: order, authorOnly: authorOnly, page: 1 })
|
||||
.then(function (json) {
|
||||
if (json && json.success && json.data) {
|
||||
applyFragmentPayload(commentsArea, json.data, url.toString());
|
||||
applyFragmentPayload(commentsArea, json.data);
|
||||
return;
|
||||
}
|
||||
throw new Error("author fragment failed");
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("[AKSRT Comment] Author filter failed:", error);
|
||||
window.location.href = url.toString();
|
||||
// 兜底整页刷新，地址栏保持无参。
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -668,6 +720,21 @@
|
||||
if (orderBtn && commentsArea.contains(orderBtn)) {
|
||||
e.preventDefault();
|
||||
applyCommentOrder(orderBtn.getAttribute("data-order") || "newest");
|
||||
return;
|
||||
}
|
||||
|
||||
// 数字分页：本地 DOM 刷新，地址栏不携带参数（href 仅作无 JS 兜底）。
|
||||
var pageLink = target.closest(".pagenav a.page-numbers");
|
||||
if (pageLink && commentsArea.contains(pageLink) && !pageLink.classList.contains("pag-jump")) {
|
||||
var page = parseCommentPageFromHref(pageLink.getAttribute("href"));
|
||||
if (page > 0) {
|
||||
e.preventDefault();
|
||||
loadCommentPage(page).catch(function (error) {
|
||||
console.error("[AKSRT Comment] 分页刷新失败:", error);
|
||||
// AJAX 不可用时退回原始链接（pretty 链接本身无 ? 参数）。
|
||||
window.location.href = pageLink.href;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -675,11 +742,10 @@
|
||||
|
||||
/* ====== 数字分页跳页（legacy pag-jump） ====== */
|
||||
function jumpToCommentPage(page) {
|
||||
page = parseInt(page, 10) || 1;
|
||||
var url = new URL(window.location.href);
|
||||
url.searchParams.set("cpage", String(page));
|
||||
url.hash = "comments";
|
||||
window.location.href = url.toString();
|
||||
loadCommentPage(page).catch(function (error) {
|
||||
console.error("[AKSRT Comment] 跳页失败:", error);
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
function initCommentPageJump() {
|
||||
@@ -700,6 +766,16 @@
|
||||
});
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register("aksrt-comment-system", function () { initCommentSystem(); initCommentPageJump(); });
|
||||
window.AksrtFrontend.register("aksrt-comment-system", function () {
|
||||
stripCommentUrlParams();
|
||||
initCommentSystem();
|
||||
initCommentPageJump();
|
||||
});
|
||||
window.AksrtFrontend.register("aksrt-comment-order", function (root) { initCommentOrder(root); });
|
||||
|
||||
// 供 pagination.js 等模块复用：评论页码加载 / 列表刷新（局部 DOM，无 ? 参数）。
|
||||
window.AksrtComments = {
|
||||
loadPage: function (page, opts) { return loadCommentPage(page, opts); },
|
||||
reload: function () { reloadCommentList(); }
|
||||
};
|
||||
})();
|
||||
Reference in new issue
Block a user