为nuxt内容生成站点地图条目

Whilst launching my new site (https://jackwhiting.co.uk) - I chose to use Nuxt Content for managing my blog posts, works, and any other content. Whilst generating the sitemap I noticed that any content created from @nuxt/content was not being added to my sitemap and needed a fix for that. In this article, we are going to look at how to solve this and get all of your entries listed.

在启动新网站( https://jackwhiting.co.uk )的同时，我选择使用Nuxt Content来管理我的博客文章，作品和任何其他内容。 在生成站点地图时，我注意到从@nuxt/content content创建的任何内容均未添加到我的站点地图中，因此需要修复。 在本文中，我们将研究如何解决此问题并列出所有条目。

建立 (Setup)

Before we can do anything we need to make sure we have the @nuxtjs/sitemap module installed. Open up your project in the terminal and run the following.

在执行任何操作之前，我们需要确保已安装@nuxtjs/sitemap模块。 在终端中打开您的项目，然后运行以下命令。

yarn add @nuxtjs/sitemap

In your nuxt.config.js add the sitemap to your modules.

在您的nuxt.config.js将站点地图添加到模块中。

export default {
  modules: ['@nuxt/content', '@nuxtjs/sitemap']
}

This should always go after any other modules you’ve included to ensure all routes are caught.

这应该始终放在您包含的任何其他模块之后，以确保捕获所有路由。

Next, add some defaults for the sitemap configuration — add a hostname and set up an empty function which we will use later to fetch and return the paths of our content.

接下来，为站点地图配置添加一些默认值-添加hostname并设置一个空函数，稍后我们将使用该函数来获取并返回内容的路径。

export default {
  sitemap: {
    hostname: process.env.BASE_URL || 'YOURSITEURL',
    routes: async () => {}
  }
}

For a full list of sitemap options, you can check out the readme.

有关站点地图选项的完整列表，您可以查看自述文件 。

添加路线 (Adding Your Routes)

The way you have set up your content structure may be unique, you may use unique URLs, you may have multiple folders or only want to include one folder. Each of these may change how you need to define your routes, so I have included a few examples below which should let you get set up and run.

设置内容结构的方式可以是唯一的，可以使用唯一的URL，可以有多个文件夹，或者只想包含一个文件夹。 这些可能都会改变您定义路线的方式，因此下面提供了一些示例，可以让您进行设置和运行。

从一个目录添加路由 (Adding Routes From One Directory)

routes: async () => {
  const { $content } = require('@nuxt/content')
  const posts = await $content('posts')
    .only(['path'])
    .fetch()
  return posts.map((p) => p.path)
}

从多个目录添加路由 (Adding Routes From Multiple Directories)

routes: async () => {
  const { $content } = require('@nuxt/content')
  const posts = await $content('posts')
    .only(['path'])
    .fetch()
  const works = await $content('works')
    .only(['path'])
    .fetch()// Map and concatenate the routes and return the array.
  return []
    .concat(...works.map((w) => w.path))
    .concat(...posts.map((p) => p.path))
}

使用更多信息扩展路线 (Expanding Routes With More Information)

Sometimes you may want to add lastmod, priority, or other details to your sitemap - we can expand on our included routes by looping around them and adding additional properties.

有时您可能想在站点地图中添加lastmod ， priority或其他详细信息-我们可以通过在所包含的路线上循环并添加其他属性来对其进行扩展。

routes: async () => {
  const { $content } = require('@nuxt/content')
  const posts = await $content('posts').fetch()
  const works = await $content('works').fetch()// Setup an empty array we will push to.
  const routes = []// Add an entry for the item including lastmod and priorty
  works.forEach((w) =>
    routes.push({
      url: w.path,
      priority: 0.8,
      lastmod: w.updatedAt
    })
  )
  posts.forEach((p) =>
    routes.push({
      url: p.path,
      priority: 0.8,
      lastmod: p.updatedAt
    })
  )// return all routes
  return routes
}

测试一切 (Testing Everything Out)

After adding your routes to the nuxt.config.js file you can run yarn dev in your terminal. Once everything starts to compile, visit http://localhost:3000/sitemap.xml in your browser you should see all of the content entries listed.

将路由添加到nuxt.config.js文件后，您可以在终端中运行yarn dev 。 一切开始编译之后，请在浏览器中访问http：// localhost：3000 / sitemap.xml，您应该会看到列出的所有内容条目。

If you don’t want to compile your sitemap.xml every time you run yarn dev you can wrap the function in a conditional.

如果您不想在每次运行yarn dev时都编译sitemap.xml ，则可以将该函数包装为有条件的。

routes: async () => {
  if (process.env.NODE_ENV !== 'production') return// rest of the function here
}

I hope this article helped you. If you’ve found any issues with the content feel free to reach out to me on Twitter (@jackabox).

希望本文对您有所帮助。 如果您发现内容有任何问题，请随时通过Twitter( @jackabox )与我联系 。

Originally published at https://jackwhiting.co.uk on August 20, 2020.

最初于 2020年8月20日 在 https://jackwhiting.co.uk 上 发布 。

翻译自: https://medium.com/javascript-in-plain-english/generating-sitemap-entries-for-nuxt-content-f7eb7b5fdb3b