Nuxt js에서 정적 및 동적(여러 API 끝점에서)에 대한 Sitemap XML 생성

이 기사에서는 API의 단일 또는 다중 엔드포인트에서 정적 및 동적 사이트맵 URL을 구축하는 방법에 대해 설명합니다.

우선 @nuxtjs/sitemap 패키지를 다음과 같이 설치해야 합니다.

npm i @nuxtjs/sitemap

@nuxtjs/sitemap
그런 다음 nuxt.config.js에서 다음과 같이 이 모듈을 추가해야 합니다.

modules: [
    //other modules....
    '@nuxtjs/sitemap'
  ],

전체 코드는 다음과 같습니다.

const axios = require('axios')
export default{

.......
sitemap: [
    {
      path: '/public/product/sitemap_index.xml',
      exclude: [
        '/admin/**',
        '/admin',
        '/checkout',
        '/previous-order'
      ],

      routes: async () => {
        let { data } = await axios.get('https://www.openmediabd.com/api/product/')
        let product =  data.results
        let watchPages = product.map((product) => {
          return{
            url:`/${product.product_slug}`,
            changefreq:'daily',
            priority:0.8,
            lastmod: product.updated
          }
        })

        let { data:data2 } = await axios.get('https://www.openmediabd.com/api/category/')
        let category =  data2.data
        let watchPages2 = category.map((category) => {
          return{
            url:`category/${category.title}`,
            changefreq:'daily',
            priority:0.9,
            lastmod: category.updated

          }
        })
        return [{
          url:'/',
          changefreq:'daily',
          priority:1,

        },
        {
          url:'/login',
          changefreq:'weekly',
          priority:0.6,
        },
        {
          url:'/register',
          changefreq:'weekly',
          priority:0.6,
        },
          ...watchPages,
          ...watchPages2
        ]
      },
    },

  ],
}

설명

다음은 xml 파일이 생성될 경로입니다.

path: '/public/product/sitemap_index.xml',

해당 경로는 xml 파일에 포함되지 않습니다.

exclude: [
        '/admin/**',
        '/admin',
        '/checkout',
        '/previous-order'
      ],

그리고 내 XML에서 2개의 다른 비동기 경로에서 URL을 생성하고 싶습니다. 그러나 두 경로에 대해 두 개의 서로 다른 xml 파일을 생성할 수도 있습니다.

routes: async () => {
        let { data } = await axios.get('https://www.openmediabd.com/api/product/')
        let product =  data.results
        let watchPages = product.map((product) => {
          return{
            url:`/${product.product_slug}`,
            changefreq:'daily',
            priority:0.8,
            lastmod: product.updated
          }
        })

        let { data:data2 } = await axios.get('https://www.openmediabd.com/api/category/')
        let category =  data2.data
        let watchPages2 = category.map((category) => {
          return{
            url:`category/${category.title}`,
            changefreq:'daily',
            priority:0.9,
            lastmod: category.updated

          }
        })

정적 URL의 경우 다음과 같이 할 수 있습니다.

 return [{
          url:'/',
          changefreq:'daily',
          priority:1,

        },
        {
          url:'/login',
          changefreq:'weekly',
          priority:0.6,
        },
        {
          url:'/register',
          changefreq:'weekly',
          priority:0.6,
        },
          ...watchPages, //dynamic routes along with static route
          ...watchPages2
        ]

This guy is awesome, check that out 👉🏼

감사합니다 👨‍🍳