동기 부여

이 게시물을 작성한 날짜는 NuxtJS에서 @nuxtjs/sitemap을 사용하여 동적 경로를 동적으로 생성하는 것이 불가능합니다.

모듈의 documentation에서 알 수 있듯이 sitemap.xml의 routes 객체의 sitemap 배열에 모든 동적 경로를 수동으로 입력했습니다.

// nuxt.config.js
{
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/secret',
      '/admin/**'
    ],
    routes: [
      'dynamic-route-one',
      'dynamic-route-two',
    ]
  }
}

백엔드 서버에 대한 모든 API 호출을 수행한 다음 nuxt.config.js의 sitemap 개체가 소비할 경로 배열을 생성하는 스크립트를 만드는 또 다른 방법이 있습니다. 더 자세한 내용은 직접 검색하거나 이 문서article를 참조하십시오.

하지만 다른 방법이 있는지 너무 궁금했습니다. 모든 동적 경로를 수동으로 입력하거나 많은 API 호출을 수행하는 것이 골칫거리일 수 있기 때문입니다.

부인 성명

이 게시물을 읽은 후 이러한 생성 방법을 생각할 수 있습니다.
동적 경로에 대한 사이트맵은 약간 해키입니다. 그리고 당신은 절대적으로 사실입니다. 이를 수행하는 공식적인 방법은 하나뿐입니다. 자신의 책임하에 사용하십시오.

희석된 이론

Nuxt v2.13부터 nuxt.config.js의 새 옵션을 사용할 수 있습니다.

// nuxt.config.js
export default {
  generate: {
    crawler: false // default - true
  }
}

문서에서 인용:

As of Nuxt >= v2.13 Nuxt.js comes with a crawler installed that will crawl your relative links and generate your dynamic links based on these links. If you want to disable this feature you can set the value to false.

동적 경로와 정적 경로가 모두 있는 repository을 생성했으며 터미널에서 nuxt.config.js를 실행하면 동적 경로가 개별 html 파일로 생성되는 것을 볼 수 있습니다.



그러나 동적 경로에 대한 경로가 터미널에 인쇄되는 것을 볼 수도 있습니다. - npm run generate . 따라서 인쇄된 경우 어딘가에 저장되어 얻을 수 있거나 인쇄되는 동안 캡처하여 저장할 수 있습니다.

코딩 부분

터미널에 다음을 입력하여 @nuxtjs/sitemap 모듈을 빠르게 설치할 수 있습니다.
Generated route "/users/10"또는npm install @nuxtjs/sitemap
그런 다음 다음과 같이 yarn add @nuxtjs/sitemap에 추가하십시오.

// nuxt.config.js
modules: [
    // your other modules
    '@nuxtjs/sitemap'
  ],

다음과 같이 구성하십시오.

// nuxt.config.js
sitemap: {
    hostname: 'https://my-host.com',
    gzip: true,
    exclude: [
      '/exclude-one',
      '/exclude-two'
    ],
    defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date()
    }
  },

터미널에서 nuxt.config.js를 다시 실행하여 동적 경로가 생성되지만 npm run generate에 추가되지 않도록 할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
      <loc>https://my-host.com/albums</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/todos</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
</urlset>

이렇게 생성된 경로 경로를 얻기 위해 NuxtJShooks에서 사용할 수 있는 NuxtJSmodules를 사용합니다.

모듈을 만들려면 프로젝트 디렉토리에 sitemap.xml 폴더를 만들고 내부에 modules라는 파일이 있습니다.

Note: I am using TypeScript here, if you are using vanilla JavaScript it should be generator.js

귀하의 generator.ts를 generator.ts에 등록하십시오.

// nuxt.config.js
 buildModules: [
    // other build modules
    '@/modules/generator'
  ],

nuxt.config.js 안에 다음 코드를 붙여넣고 조금 생각해보자.

import { Module } from '@nuxt/types'

const generator: Module = function () {
  this.nuxt.hook('generate:done', async (context: any) => {
    const routesToExclude: string[] =
    process.env.NUXT_ENV_EXCLUDE_ROUTES
      ? process.env.NUXT_ENV_EXCLUDE_ROUTES.split(',') : []
    const allRoutes: string[] = await Array.from(context.generatedRoutes)
    const routes: string[] = await allRoutes.filter((route: string) => !routesToExclude.includes(route))
    this.nuxt.options.sitemap.routes = await [...routes]
  })
}

export default generator

1) NuxtJS에 내보내지고 삽입될 generator.ts 함수를 정의했습니다.
2) 우리는 generator 후크를 구독했으며 후크가 완료되면 함수 내부의 코드가 실행됩니다.
3) 살펴보면here 특정 컨텍스트가 후크에 의해 반환되는 것을 볼 수 있습니다. 모듈 내에서 해당 컨텍스트generate:done가 표시되면 console.log Set이 표시됩니다.
4) 내부generatedRoutes 내 routesToExclude 환경 변수에 일부 데이터가 있는지 확인하기 위해 삼항 연산자를 사용합니다.

// .env
NUXT_ENV_EXCLUDE_ROUTES = '/exclude-one,/exclude-two'

그런 다음 NUXT_ENV_EXCLUDE_ROUTES 메서드를 사용하여 내 문자열을 하위 문자열로 나누어 문자열 배열이 됩니다.
5) 내부 .split allRoutes 메서드를 사용하여 Set을 Array로 변환합니다.
6) Array.from에서 filter 메서드를 사용하여 제외하려는 모든 경로를 필터링합니다.
7) 그리고 마지막으로 필터링된 경로를 routes 객체의 routes 속성으로 펼칩니다: sitemap
이제 this.nuxt.options.sitemap.routes = await [...routes]를 다시 실행하면 npm run generate에 동적 경로가 표시됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
      <loc>https://my-host.com/albums</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/todos</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/1</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/2</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/3</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/4</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/5</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/6</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/7</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/8</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/9</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/10</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
</urlset>

TypeScript에 익숙하지 않은 분들을 위해

아래에 댓글을 남겨주시거나 DM을 주시면 도와드리겠습니다.

연결

라이브 미리보기는 여기에서 찾을 수 있습니다 - https://andynoir.github.io/article-nuxt-dynamic-sitemap/
사이트맵은 여기https://andynoir.github.io/article-nuxt-dynamic-sitemap/sitemap.xml
여기 GitHub 저장소 - https://github.com/andynoir/article-nuxt-dynamic-sitemap