如何在 Nuxt Content 中创建站点地图

Nuxt Content是一个令人惊叹的工具，它使在 Nuxt 项目上处理 Markdown 内容变得轻而易举。由于 Nuxt 服务器路由的强大功能，创建页面的站点地图非常容易。

我们来看一下代码。

import { SitemapStream, streamToPromise } from 'sitemap';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
    const docs = await serverQueryContent(event).find();

    const staticSites = [
        {
            _path: '/'
        },
        {
            _path: '/about'
        },
        {
            _path: '/open-source'
        }
    ];

    const sitemapElements = [...staticSites, ...docs];

    const sitemap = new SitemapStream({
        hostname: import.meta.env.VITE_BASE_URL as string
    });

    for (const doc of sitemapElements) {
        sitemap.write({
            url: doc._path,
            changefreq: 'monthly'
        });
    }

    sitemap.end();
    return streamToPromise(sitemap);
});

首先，让我们通过创建一个名为‘sitemap.ts’的新文件，在api/routes目录中创建一个新的 API 路由。因此，RRS 源将在your-domain.com/sitemap.xml上提供。

接下来，在我们的defineEventHandler中，我们必须使用serverQyeryContent来获取所有文章：

const docs = await serverQueryContent(event).find();

如果您有任何其他静态页面，例如联系或关于，您可以使用这些页面创建一个数组：

const staticSites = [
        {
            _path: '/'
        },
        {
            _path: '/about'
        },
        {
            _path: '/open-source'
        }
    ];

现在，我们可以将我们的文章与静态页面结合起来：

const sitemapElements = [...staticSites, ...docs];

接下来，让我们使用“sitemap”包中的实用程序函数创建一个站点地图流：

const sitemap = new SitemapStream({
    hostname: import.meta.env.VITE_BASE_URL as string
});

现在，当我们有了站点地图流时，我们可以迭代站点地图元素并将它们写入站点地图流：

for (const doc of sitemapElements) {
    sitemap.write({
        url: doc._path,
        changefreq: 'monthly'
    });
}

接下来，我们必须获取要包含在 RRS 源中的所有文档。我们可以使用“#content/server”中的serverQueryContent函数：

const docs = await serverQueryContent(event)
    .sort({ date: -1 })
    .where({ _partial: false })
    .find();

接下来，我们必须迭代我们的文档并将它们中的每一个放入我们之前创建的 feed 对象中：

for (const doc of docs) {
    feed.item({
        title: doc.title ?? '-',
        url: `${BASE_URL}${doc._path}`,
        date: doc.date,
        description: doc.description
    });
}

最后，我们必须使用“sitemap”包中的streamToPromise函数结束流并以Promise 形式返回站点地图流。

sitemap.end();
return streamToPromise(sitemap);

或者，如果您想预渲染站点地图，您只需在 nuxt 配置中指定预渲染路由即可：

export default defineNuxtConfig({
    // ...
    nitro: {
        prerender: {
            routes: ['/sitemap.xml']
        }
    },
});

就这样！我喜欢这个解决方案的简单性，这要归功于 Nuxt 服务器路由和硝基预渲染。