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( )에서 저에게 연락해 주세요.