面试题：SvelteKit中如何配置动态路由以提升SEO友好性

路由文件结构：
- 在SvelteKit项目中，在 src/routes 目录下创建 blog 目录。
- 在 blog 目录中创建 [slug].svelte 文件。这里的 [slug] 是动态路由参数，代表文章的唯一标识（slug）。例如：

src/
└── routes/
    └── blog/
        └── [slug].svelte

SvelteKit特性：
- 页面元数据：
  - 在 [slug].svelte 文件中，可以使用SvelteKit的 context 对象来设置页面的元数据，例如标题、描述等，这些元数据对于搜索引擎索引很重要。
  - 示例代码如下：

<script context="module">
    export async function load({ params, fetch }) {
        const article = await fetch(`/api/articles/${params.slug}`).then(res => res.json());
        return {
            title: article.title,
            description: article.excerpt
        };
    }
</script>

<script>
    export let data;
    document.title = data.title;
    const meta = document.createElement('meta');
    meta.name = 'description';
    meta.content = data.description;
    document.head.appendChild(meta);
</script>

{#if data}
    <h1>{data.title}</h1>
    <p>{data.content}</p>
{/if}

预渲染：
- SvelteKit支持静态站点生成（SSG）和服务器端渲染（SSR）。对于博客文章，可以使用静态站点生成（在 [slug].svelte 对应的 load 函数中返回静态数据），这样搜索引擎爬虫访问时可以直接获取到完整的HTML内容。
- 例如，在 load 函数中可以从CMS或本地数据文件中获取文章内容并返回：

<script context="module">
    export async function load({ params }) {
        const articles = import.meta.glob('/data/articles/*.md');
        const article = await articles[`/data/articles/${params.slug}.md`]();
        return {
            content: article.default
        };
    }
</script>

<script>
    export let data;
</script>

{#if data}
    <div>{@html data.content}</div>
{/if}

XML Sitemap：
- 可以生成一个XML sitemap，列出所有博客文章的URL。在SvelteKit项目中，可以通过编写一个服务器端路由（例如 src/routes/sitemap.xml.js）来动态生成sitemap。
- 示例代码如下：

import { SitemapStream, streamToPromise } from'sitemap';
import { getAllArticleSlugs } from '$lib/api/articles';

export async function GET() {
    const slugs = await getAllArticleSlugs();
    const sitemap = new SitemapStream({ hostname: 'https://yourblog.com' });
    slugs.forEach(slug => {
        sitemap.write({
            url: `/blog/${slug}`,
            changefreq: 'weekly',
            priority: 0.8
        });
    });
    sitemap.end();
    const xml = await streamToPromise(sitemap).then(data => data.toString());
    return new Response(xml, {
        headers: {
            'Content-Type': 'application/xml'
        }
    });
}

这样，搜索引擎可以通过访问 /sitemap.xml 来获取所有博客文章的URL，从而更好地索引页面。

星途面试题库

面试题：SvelteKit中如何配置动态路由以提升SEO友好性

知识考点

面试题答案