feat: 移除 Swup 相关功能，添加 PJAX 导航支持

Signed-off-by: wangsimiao1 <wangsimiao1@xiaomi.com>

Author: WangSimiao2000

_javascript/commons.js

@@ -1,6 +1,6 @@
-import { basic, initSidebar, initTopbar, initSwup } from './modules/layouts';
+import { basic, initSidebar, initTopbar, initPjax } from './modules/layouts';
 
 initSidebar();
 initTopbar();
 basic();
-initSwup();
+initPjax();

_javascript/modules/layouts.js

@@ -1,4 +1,4 @@
 export { basic } from './layouts/basic';
 export { initSidebar } from './layouts/sidebar';
 export { initTopbar } from './layouts/topbar';
-export { initSwup } from './layouts/swup-setup';
+export { initPjax } from './layouts/pjax';

_javascript/modules/layouts/pjax.js

@@ -0,0 +1,114 @@
+/**
+ * Lightweight PJAX-like navigation
+ * Intercepts internal link clicks, fetches new page via AJAX,
+ * replaces only the #swup container content, and updates title/URL.
+ */
+
+const CONTAINER_ID = 'swup';
+const TRANSITION_DURATION = 150; // ms
+
+let isNavigating = false;
+
+function shouldIntercept(el) {
+  // Only intercept internal same-origin links
+  if (!el || el.tagName !== 'A') return false;
+  if (el.target === '_blank' || el.hasAttribute('download')) return false;
+  if (el.origin !== window.location.origin) return false;
+  // Skip anchor links on same page
+  if (el.pathname === window.location.pathname && el.hash) return false;
+  return true;
+}
+
+function updateActiveNav(path) {
+  document.querySelectorAll('#sidebar .nav-item').forEach((item) => {
+    const link = item.querySelector('a');
+    if (!link) return;
+    const href = link.getAttribute('href');
+    const isActive =
+      (href === '/' && path === '/') ||
+      (href !== '/' && path.startsWith(href));
+    item.classList.toggle('active', isActive);
+  });
+}
+
+async function navigate(url, pushState = true) {
+  if (isNavigating) return;
+  isNavigating = true;
+
+  const container = document.getElementById(CONTAINER_ID);
+  if (!container) {
+    // Fallback to normal navigation
+    window.location.href = url;
+    return;
+  }
+
+  try {
+    // Fade out
+    container.style.opacity = '0';
+
+    // Fetch new page
+    const response = await fetch(url);
+    if (!response.ok) {
+      window.location.href = url;
+      return;
+    }
+
+    const html = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    const newContainer = doc.getElementById(CONTAINER_ID);
+    if (!newContainer) {
+      window.location.href = url;
+      return;
+    }
+
+    // Wait for fade out to finish
+    await new Promise((r) => setTimeout(r, TRANSITION_DURATION));
+
+    // Replace content
+    container.innerHTML = newContainer.innerHTML;
+
+    // Update title
+    document.title = doc.title;
+
+    // Update URL
+    if (pushState) {
+      history.pushState({}, '', url);
+    }
+
+    // Update sidebar active state
+    updateActiveNav(new URL(url, window.location.origin).pathname);
+
+    // Scroll to top
+    window.scrollTo({ top: 0 });
+
+    // Fade in
+    container.style.opacity = '1';
+  } catch (e) {
+    // On any error, fall back to normal navigation
+    window.location.href = url;
+  } finally {
+    isNavigating = false;
+  }
+}
+
+export function initPjax() {
+  // Intercept clicks on internal links
+  document.addEventListener('click', (e) => {
+    const link = e.target.closest('a');
+    if (!shouldIntercept(link)) return;
+
+    e.preventDefault();
+
+    // Skip if same page
+    if (link.href === window.location.href) return;
+
+    navigate(link.href);
+  });
+
+  // Handle browser back/forward
+  window.addEventListener('popstate', () => {
+    navigate(window.location.href, false);
+  });
+}

_javascript/modules/layouts/swup-setup.js

@@ -23,7 +23,7 @@
       <div class="container d-flex flex-column px-xxl-5">
         {% include topbar.html lang=lang %}
 
-        <div id="swup" class="swup-transition-main">
+        <div id="swup">
           <div class="row flex-grow-1">
             <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
               {% if layout.layout == 'default' %}

_layouts/default.html

@@ -1,9 +1,5 @@
-/* Swup page transition */
-.swup-transition-main {
+/* PJAX page transition */
+#swup {
   opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}
-
-html.is-changing .swup-transition-main {
-  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
 }

_sass/components/_swup.scss

@@ -24,8 +24,6 @@
     "rollup": "^4.12.0"
   },
   "dependencies": {
-    "@swup/head-plugin": "^2.3.1",
-    "bootstrap": "^5.3.3",
-    "swup": "^4.8.3"
+    "bootstrap": "^5.3.3"
   }
 }