Nuxt/Content 및 Tailwind Typography로 스타일을 사용하여 Vue에 Markdown 가져오기

의 연속입니다.

Nuxt/Content에 Markdown 파일 추가

다음 위치에 Nuxt/Content 모듈을 추가했습니다.

NuxtJS / 콘텐츠 모듈 시작하기

Adam Miedema ・ 1월 12일 ・ 3분 읽기

#nuxt #vue #node #tutorial

이제 이 세그먼트에서 일부 Markdown 파일을 추가한 다음 Nuxt/Content가 Markdown을 HTML로 변환하고 페이지에 게시하는 동적 Nuxt 페이지로 가져옵니다.

먼저 프로젝트의 루트 디렉터리에 content라는 새 폴더를 추가해야 합니다.

Nuxt/Content는 이 디렉토리에서 Markdown 파일을 찾아 가져옵니다.
content 디렉토리 내에 'documentation'이라는 다른 디렉토리를 추가하겠습니다. 그 이유는 Algolia 계정에 다른 색인으로 포함하고 정리된 상태로 유지하려는 다양한 유형의 파일이 있을 가능성이 매우 높기 때문입니다.

예를 들어 docs.cleavr.io 의 경우 검색 결과 내에서 별도로 그룹화할 뿐만 아니라 서로 별도로 유지하는 문서 섹션과 가이드 섹션이 있습니다.
documentation 폴더 내에서 임의의 콘텐츠와 YAML 페이지 메타 데이터가 포함된 doc-example.md 마크다운 파일을 상단에 추가하겠습니다.

동적 페이지 만들기

pages 디렉토리에 동적 페이지를 추가합니다. 이는 Nuxt가 기반으로 동적 경로를 생성하는 페이지 템플릿입니다.
pages 폴더에 _doc.vue이라는 제목의 페이지를 추가하겠습니다.

페이지는 밑줄 "_"문자로 시작합니다. 이를 통해 Nuxt는 이 페이지의 경로가 동적으로 생성될 것임을 알 수 있습니다.

이 동적 경로 기능을 사용하여 Nuxt가 각 마크다운 콘텐츠 페이지에 대한 페이지를 자동으로 생성하도록 할 것입니다. 이렇게 하면 마크다운 파일을 content/documentation 에 추가하거나 제거할 때 문서용 html 페이지 생성에 대해 걱정할 필요가 없습니다. 이 방법을 사용하여 동적으로 생성됩니다.
_doc.vue의 내용은 매우 간단합니다.

<template>
  <div>
    <h1 class="text-3xl font-semibold text-gray-9000 pb-8">
      {{ doc.title }}
    </h1>
    <NuxtContent :document="doc" />
  </div>
</template>

<script>
export default {
  async asyncData( { $content, params } ) {
    const doc = await $content('documentation', params.doc ).fetch()
    return { doc }
  }
}
</script>

async 함수에 주목하십시오.

async asyncData( { $content, params } ) {
    const doc = await $content('documentation', params.doc ).fetch()
    return { doc }
  }

여기에서 documentation와 일치하는 모든 파일에 대해 params.doc 디렉토리를 볼 콘텐츠 모듈을 호출합니다. 이는 URI를 기반으로 끌어오는 경로 이름입니다.

예를 들어 URL이 example.com/doc-example 인 경우 params.doc 값은 doc-example 와 같습니다. Nuxt/content는 content/documentation 디렉토리에 해당 이름의 파일이 있는지 확인합니다. 있는 경우 doc 데이터가 <NuxtContent :document="doc" /> 섹션에서 호출되는 <template> 구성 요소로 전달됩니다.

마크다운 파일에서 생성된 html에 일부 스타일을 추가합니다.

Nuxt/Content는 마크다운 파일을 구문 분석하여 생성하는 html 주위에 일부 클래스를 래핑합니다. 그러나 기본적으로 보기에 예쁜 것은 없습니다...

적용된 클래스를 활용하고 CSS 마법을 사용하도록 선택할 수 있습니다.

또는 게으른 접근 방식을 취하고 Tailwind Typography를 설치하여 스타일을 지정할 수 있습니다. 물론 이것은 내가 선택한 길이다. 😉

package.json에 Tailwind 타이포그래피 종속성 추가

package.json 파일에서 다음 종속성을 추가합니다.

"dependencies": {
    "@tailwindcss/typography": "^0.2.0"
  },

그런 다음 프로젝트 루트 디렉터리 아래의 터미널에서 다음 명령을 실행합니다.

yarn install

이렇게 하면 방금 추가한 종속성이 설치됩니다.

tailwind.config.js 파일 추가

프로젝트의 루트에서 새 파일tailwind.config.js을 추가합니다.

파일 내에서 추가

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    typography: {
      default: {
        css: {
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          },
        },
      },
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require(`@tailwindcss/typography`)
  ]
}

@tailwindcss/typography 에 대한 플러그인이 필요합니다.

code::before/after 부분에 대해 궁금할 수도 있습니다. 마크다운에서 백틱을 사용하여 코드 스니펫을 표시하고 백틱을 제거하는 경우입니다. 백틱이 있어도 상관없다면 이 부분을 제거할 수 있습니다.

변환된 마크다운에 'prose' 클래스 추가

Tailwind Typography를 적용하려면 NuxtContent 파일의 _doc.vue 구성 요소에 prose 클래스를 추가하기만 하면 됩니다.

<NuxtContent :document="doc" class="prose" />

짜잔!

우리의 변환된 마크다운이 잘 정리되었습니다! 😍


팔로우? 이 튜토리얼의 코드를 보려면 GitHub Repo - phase 3을 보십시오.

YouTube에서 전체 동영상을 볼 수도 있습니다.

VPS 서버 및 앱 배포를 관리할 도구를 찾고 계십니까? cleavr.io에서 확인하세요.