网站地图 - Nuxt 内容

需要完整的网站地图解决方案？查看Nuxt Simple Sitemap，它与 Nuxt Content 的文档驱动模式和前置 matter 集成。

否则，您可以随意使用以下指南实施自己的网站地图。

添加依赖项

这可以通过利用 sitemap 库来创建，该库可以按如下方式安装

pnpm add sitemap

服务器路由

我们将利用 Nuxt 中提供的服务器路由，为此，您需要在网站根目录中直接创建 server/ 目录。

完成后，在此目录中创建一个 routes/ 目录，并添加一个 sitemap.xml.ts 文件，这将转换为 /sitemap.xml。

您需要添加以下内容

server/routes/sitemap.xml.ts

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

export default defineEventHandler(async (event) => {
  // Fetch all documents
  const docs = await serverQueryContent(event).find()
  const sitemap = new SitemapStream({
    hostname: 'https://example.com'
  })

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

  return streamToPromise(sitemap)
})

现在，当用户访问 https://example.com/sitemap.xml 时，您会找到包含所有页面的生成的 XML 文件。

在使用 nuxt generate 时，您可能希望预渲染网站地图，因为服务器路由无法在静态托管上运行。

您可以使用 nuxt.config 中的 nitro.prerender 选项来执行此操作

nuxt.config.ts

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

转换器

转换器负责解析和操作 Nuxt 内容中的内容。

介绍

使用 @nuxt/content 模块增强您的 NuxtJS 应用程序：在 content/ 目录中编写，并通过类似 MongoDB 的 API 获取您的 Markdown、JSON、YAML 和 CSV 文件，充当基于 Git 的无头 CMS。