При создании карты сайта для сайта 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 г.