SEO 친화적인 블로그 구축: Nuxt에서 Markdown 및 Front Matter 사용

이 시리즈의 이전 기사에서는 Nuxt로 정적 생성 사이트를 만드는 기본 사항을 다루었습니다. 오늘의 기사에서는 Markdown과 Front Matter를 사용하여 블로그를 위한 풍부한 콘텐츠를 개발하는 방법을 보여 드리겠습니다.

코드를 작성하기 전에 먼저 마크다운을 위한 webpack 로더를 설치해야 합니다. 터미널에서 프로젝트 디렉토리에 있는 동안 npm i frontmatter-markdown-loader를 실행하여 이 종속성을 package.json 파일에 추가합니다. 다음으로 마크다운 파일을 로드하는 방법을 알기 위해 Nuxt를 구성해야 합니다. 루트 디렉토리에 nuxt.config.js라는 파일을 생성하고 다음 코드를 추가하여 webpack을 확장합니다.

export default {
  target: 'static',
  build: {
    extend (config, ctx) {
      config.module.rules.push({
        test: /\.md$/,
        use: [{
          loader: 'frontmatter-markdown-loader'
        }]
      })
    }
  }
}

마크다운과 함께 작동하도록 프로젝트를 구성했으므로 이제 첫 번째 기사를 만들 수 있습니다. 루트 디렉터리 바로 아래에 articles 라는 디렉터리를 만듭니다. 이 디렉토리 안에 dogs.md 라는 마크다운 파일을 만듭니다.

---
slug: dogs
title: 'Dogs are the Best Animal - Fight Me'
date: '2020-09-25'
tags: dogs,doggo,pupper,floofer,woofters
description: "Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong."
---

# Dogs are the Best Animal - Fight Me

Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong.

All doggos are a heckin' good fren. Anyone who disagrees is a monster.

마크다운 파일의 시작 부분에 약간의 YAML 코드가 있음을 알 수 있습니다. 이를 front matter 이라고 하며 마크다운 콘텐츠에 메타데이터를 포함하는 방법입니다.

다음 단계는 URL 매개변수를 기반으로 슬러그가 올바른 마크다운 파일을 가져오도록 하는 것입니다. 일반적으로 JavaScript 코드에 종속성을 동적으로 요구하지 않는 것이 좋지만 여기에서는 마크다운 파일을 사용하여 안전하게 수행할 수 있습니다. 우리는 이 코드가 생성 시 실행된다는 것을 알고 있으므로 누락된 파일이 있으면 빌드 프로세스 중에 해당 파일을 포착합니다.
slug.vue 내부에서 asyncData 함수를 다음과 같이 업데이트합니다.

asyncData ({route}) {
  const { params: { slug } } = route
  const markdown = require(`~/articles/${slug}.md`)
  return {
    markdown
  }
}

이 함수는 URL의 매개변수를 잡고, 일치하는 마크다운 파일이 필요하며, 마크다운 파일의 결과를 템플릿에서 사용할 수 있도록 합니다. 결과는 html 및 attributes 두 개의 키가 있는 객체입니다. html 키는 소리입니다. 마크다운 파일의 HTML 표현입니다. attributes 키는 서문에 포함된 모든 메타데이터의 키/값 쌍의 개체입니다.

이것을 연결하는 마지막 부분은 템플릿에 추가하는 것입니다. 우리는 이것을 하기 위해 v-html를 사용할 것이지만 이것은 당신이 주의해서 사용하길 원하는 Nuxt의 기능입니다. 이 기능은 제공된 HTML을 페이지에 삽입하므로 XSS 공격에 취약할 수 있습니다. 사용자 생성 콘텐츠를 렌더링하는 데 v-html를 사용하지 마십시오. 이 기능은 신뢰할 수 있는 콘텐츠에만 사용해야 합니다.

기사의 내용을 렌더링하려면 템플릿을 다음 코드로 업데이트하세요.

<template>
  <article>
    <div v-html="markdown.html" />
  </article>
</template>

npm run dev 명령을 실행하고 http://localhost/blog/dogs 로 이동하면 기사 내용이 표시되어야 합니다.

이제 마크다운 파일을 기반으로 기사 목록을 동적으로 생성하도록 랜딩 페이지를 업데이트하겠습니다. Webpack은 컨텍스트를 통해 파일을 요구할 수 있습니다. 즉, 특정 패턴과 일치하는 모든 파일을 요구할 수 있습니다. 이것은 각 파일을 개별적으로 수동으로 요구하지 않고 작성한 모든 기사에 대한 데이터를 얻을 수 있기 때문에 우리의 경우에 매우 유용합니다.
index.vue 파일에서 파일 맨 아래에 다음을 추가하십시오.

<script>
export default {
  asyncData () {
    const articles = []
    const r = require.context('~/articles', false, /\.md/)
    r.keys().forEach((key) => {
      articles.push(r(key))
    })
    return {
      articles
    }
  }
}
</script>

이 스크립트는 모든 기사를 로드하여 배열에 넣고 페이지 템플릿에서 사용할 수 있도록 합니다. 기사의 메타데이터에 slug 매개변수를 포함했으므로 이를 사용하여 랜딩 페이지에 기사 목록을 출력할 수 있습니다. 다음은 템플릿의 새 코드입니다.

<template>
  <div>
    <h1>Articles</h1>
    <ul>
      <li v-for="(article, index) in articles" :key="index">
        <nuxt-link :to="`/blog/${article.attributes.slug}`">{{ article.attributes.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

http://localhost:3000로 이동하면 우리가 작성한 기사에 대한 단일 링크가 표시됩니다. 기사 디렉토리에 다른 기사를 추가하면 여기에도 표시됩니다.

이 부분은 여기까지입니다! 이 시리즈의 다음 부분과 마지막 부분에서는 검색 엔진에 우리 기사에 대한 더 많은 컨텍스트를 제공하기 위해 앞에 설정한 속성을 사용하는 방법에 대해 설명합니다.

원래 게시 날짜jessie.codes