How to change page title dynamically in Sveltekit?

在 SvelteKit 中动态更改页面标题是一个非常实用的功能，尤其是在构建单页应用（SPA）时，因为它有助于改善用户体验和SEO优化。我将详细解释如何实现这一功能，并提供代码示例。

首先，我们需要理解 SvelteKit 应用中的页面是如何结构的。SvelteKit 使用文件系统作为路由，这意味着项目的目录结构直接决定了应用的路由结构。每个页面都可能有一个对应的 +page.svelte 文件，还可能有一个 +layout.svelte 文件用于定义该页面的布局。

步骤 1: 使用 +page.js 或 +page.ts 文件

要动态更改页面标题，我们可以在页面的 +page.js 或 +page.ts 文件中操作。这些文件用于定义页面的数据加载和逻辑处理。在这里，我们可以通过修改 document.title 来更改页面标题。

示例代码：

假设我们有一个关于产品详情的页面，我们希望根据产品的名称动态设置页面标题。

src/routes/products/[id]/+page.svelte:

svelte
<script>
  // 这里引入页面逻辑和数据
  export let product;
</script>

<h1>{product.name}</h1>
<p>{product.description}</p>

src/routes/products/[id]/+page.js:

javascript
export async function load({ fetch, params }) {
    const res = await fetch(`/api/products/${params.id}`);
    const product = await res.json();

    // 动态设置页面标题
    if (typeof document !== 'undefined') {
        document.title = `${product.name} - 产品详情`;
    }

    return {
        props: {
            product
        }
    };
}

步骤 2: 使用 SvelteKit 的头部管理功能

从 SvelteKit v1.0 开始，框架支持在 Svelte 文件中直接管理 HTML 头部（head）元素。这意味着你可以在 .svelte 文件中更方便地管理标题。

使用 <svelte:head> 标签设置标题：

svelte
<script>
  export let product;
</script>

<svelte:head>
    <title>{product.name} - 产品详情</title>
</svelte:head>

<h1>{product.name}</h1>
<p>{product.description}</p>

小结

以上两种方法都可以实现在 SvelteKit 中动态更改页面标题。第一种方法更适合在页面加载时就设定标题，而第二种方法则提供了一种更声明式的方式来处理标题和其他头部元素。使用哪种方法取决于具体的项目需求和开发者的偏好。