跳至主要內容
進階 SvelteKit Hooks handle

SvelteKit 提供了幾個 hooks — 攔截和覆寫框架預設行為的方法。

最基本的 hook 是 handle，它位於 src/hooks.server.js 中。它接收一個 event 物件和一個 resolve 函式，並返回一個 Response。

resolve 是魔法發生的地方：SvelteKit 將傳入的請求 URL 與你的應用程式的路由進行匹配，匯入相關的程式碼（+page.server.js 和 +page.svelte 檔案等等），載入路由所需的資料，並產生回應。

預設的 handle hook 看起來像這樣

src/hooks.server
export async function handle({ event, resolve }) {
	return await resolve(event);
}

對於頁面（而不是 API 路由），你可以使用 transformPageChunk 修改產生的 HTML

src/hooks.server
export async function handle({ event, resolve }) {
	return await resolve(event, {
		transformPageChunk: ({ html }) => html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

你也可以建立全新的路由

src/hooks.server
export async function handle({ event, resolve }) {
	if (event.url.pathname === '/ping') {
		return new Response('pong');
	}

	return await resolve(event, {
		transformPageChunk: ({ html }) => html.replace(
			'<body',
			'<body style="color: hotpink"'
		)
	});
}

在 GitHub 上編輯此頁面

上一頁 下一頁
重新導向
1
2
<h1>hello world</h1>
<a href="/ping">ping</a>