При создании карты сайта для сайта Nuxt файлы в модуле контента не включаются автоматически. Давайте узнаем, как мы можем это решить!

При запуске моего нового сайта (https://jackwhiting.co.uk) я решил использовать Nuxt Content для управления сообщениями в блоге, работами и любым другим контентом. Во время создания карты сайта я заметил, что любой контент, созданный из @nuxt/content, не добавлялся в мою карту сайта, и для этого требовалось исправление. В этой статье мы рассмотрим, как решить эту проблему и составить список всех ваших записей.

Настраивать

Прежде чем мы сможем что-либо сделать, нам нужно убедиться, что у нас установлен модуль @nuxtjs/sitemap. Откройте свой проект в терминале и запустите следующее.

yarn add @nuxtjs/sitemap

В вашем nuxt.config.js добавьте карту сайта к вашим модулям.

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

Это всегда должно идти после любых других модулей, которые вы включили, чтобы гарантировать перехват всех маршрутов.

Затем добавьте некоторые значения по умолчанию для конфигурации карты сайта - добавьте hostname и настройте пустую функцию, которую мы будем использовать позже для получения и возврата путей к нашему контенту.

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

Полный список опций карты сайта вы можете найти в readme.

Добавление ваших маршрутов

То, как вы настроили структуру контента, может быть уникальным, вы можете использовать уникальные URL-адреса, у вас может быть несколько папок или вы хотите включить только одну папку. Каждый из них может изменить способ определения маршрутов, поэтому я привел несколько примеров ниже, которые позволят вам настроить и запустить.

Добавление маршрутов из одного каталога

routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}

Добавление маршрутов из нескольких каталогов

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))
}

Расширение маршрутов с дополнительной информацией

Иногда вы можете захотеть добавить 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
}

Тестирование всего

После добавления маршрутов в файл nuxt.config.js вы можете запустить yarn dev в своем терминале. Как только все начнет компилироваться, посетите http: // localhost: 3000 / sitemap.xml в своем браузере, вы должны увидеть все перечисленные записи содержимого.

Если вы не хотите компилировать sitemap.xml каждый раз при запуске yarn dev, вы можете заключить функцию в условное выражение.

routes: async () => {
  if (process.env.NODE_ENV !== 'production') return

  // rest of the function here
}

Надеюсь, эта статья вам помогла. Если вы обнаружили какие-либо проблемы с контентом, напишите мне в Twitter (@jackabox).

Первоначально опубликовано на https://jackwhiting.co.uk 20 августа 2020 г.