Commit fa0f8e9
Changed files (4)
src/layouts/GlobalLayout.astro
@@ -96,6 +96,41 @@ const favicons: Favicon[] =
</body>
</html>
+{/* 初始化 Swup */}
+<script>
+ import SwupHeadPlugin from '@swup/head-plugin';
+ import SwupParallelPlugin from '@swup/parallel-plugin';
+ import SwupPreloadPlugin from '@swup/preload-plugin';
+ import SwupProgressPlugin from '@swup/progress-plugin';
+ import SwupScriptsPlugin from '@swup/scripts-plugin';
+ import SwupScrollPlugin from '@swup/scroll-plugin';
+ import Swup from 'swup';
+
+ import { siteConfig } from '@/config';
+
+ window.swup = new Swup({
+ containers: ['main', ...(siteConfig.banner === false ? [] : ['#banner-img'])],
+ animationSelector: '[class*="swup-transition-"]',
+ plugins: [
+ new SwupHeadPlugin(),
+ new SwupParallelPlugin({
+ containers: [...(siteConfig.banner === false ? [] : ['#banner-img'])],
+ }),
+ new SwupPreloadPlugin(),
+ new SwupProgressPlugin({
+ delay: 2000,
+ }),
+ new SwupScriptsPlugin(),
+ new SwupScrollPlugin(),
+ ],
+ });
+
+ const dispatch = (name: string) => document.dispatchEvent(new Event(name));
+ window.swup.hooks.before('content:replace', () => dispatch('astro:before-swap'));
+ window.swup.hooks.on('content:replace', () => dispatch('astro:after-swap'));
+ window.swup.hooks.on('page:view', () => dispatch('astro:page-load'));
+</script>
+
<script>
import { convertTimeToRelative } from '@scripts/utils';
import mediumZoom from 'medium-zoom/dist/pure';
src/global.d.ts
@@ -1,4 +1,4 @@
-import type { Swup } from '@swup/astro/client';
+import type { Swup } from 'swup';
declare global {
interface Window {
astro.config.mjs
@@ -11,7 +11,6 @@ import { wrapCode } from './src/plugins/shiki-transformers.ts';
import { rehypeHeadingIds } from '@astrojs/markdown-remark';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
-import swup from '@swup/astro';
// import { transformerNotationDiff } from '@shikijs/transformers';
// import { transformerNotationHighlight } from '@shikijs/transformers';
import tailwindcss from '@tailwindcss/vite';
@@ -33,15 +32,6 @@ export default defineConfig({
sitemap({ filter: (page) => !page.includes('/archives/') && !page.includes('/about/') }),
pagefind(),
mdx(),
- swup({
- theme: false,
- containers: ['main', '#banner-img'],
- animationClass: 'swup-transition-',
- globalInstance: true,
- smoothScrolling: true,
- progress: true,
- parallel: ['#banner-img'],
- }),
],
markdown: {
shikiConfig: {
package.json
@@ -21,7 +21,12 @@
"@iconify-json/material-symbols": "^1.2.14",
"@iconify-json/mdi": "^1.2.3",
"@shikijs/transformers": "^2.3.2",
- "@swup/astro": "^1.5.0",
+ "@swup/head-plugin": "^2.3.1",
+ "@swup/parallel-plugin": "^0.4.0",
+ "@swup/preload-plugin": "^3.2.11",
+ "@swup/progress-plugin": "^3.2.0",
+ "@swup/scripts-plugin": "^2.1.0",
+ "@swup/scroll-plugin": "^3.3.2",
"@tailwindcss/vite": "^4.0.6",
"astro": "^5.3.0",
"astro-compress": "2.3.5",
@@ -44,6 +49,7 @@
"sanitize-html": "^2.14.0",
"sharp": "^0.33.5",
"shiki": "^2.3.2",
+ "swup": "^4.8.1",
"tailwindcss": "^4.0.6",
"typescript": "^5.7.3",
"unist-util-visit": "^5.0.0"