개별 마크다운 블로그 페이지 만들기 - 13부

이전 기사에서 우리는 blog post to be loaded from local markdown files 을 변경했습니다.

이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다!

이 기사를 따르려면 following branch을 시작점으로 사용하십시오.

개별 블로그 페이지 만들기

블로그 개요에서 개별 페이지의 URL을 /blog/${slug} 로 설정했습니다. 여기서 슬러그는 파일 이름입니다.
blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다.
이 파일[slug].js을 호출할 수 있습니다. Next.js의 이 동적 형식을 사용하면 임의의 슬러그가 유효한 파일이 될 수 있습니다.

이 파일은 getStaticPaths 및 getStaticProps 함수를 모두 사용해야 합니다. 이것이 그들이 하는 일입니다:

getStaticPaths : 각 게시물에 대해 가능한 모든 슬러그 옵션을 생성합니다

.

getStaticProps : 이 특정 문서에 대한 자세한 내용이 포함된 적극적으로 요청된 페이지를 가져옵니다

.

따라서 첫 번째는 사용 가능한 모든 블로그 게시물을 유효한 옵션으로 생성하는 것이고 두 번째는 이 블로그에 대한 세부 정보를 가져오는 것입니다.

파일 구조는 다음과 같습니다.

export async function getStaticPaths() {}

export async function getStaticProps({ params: { slug } }) {}

export default function PostPage({ frontmatter, content }) {}

정적 경로 함수를 생성하여 시작하겠습니다.

import fs from 'fs';

export async function getStaticPaths() {
  const files = fs.readdirSync('./posts');

  const paths = files.map((fileName) => ({
    params: {
      slug: fileName.replace('.md', ''),
    },
  }));
  return {
    paths,
    fallback: false,
  };
}

블로그 개요 페이지와 마찬가지로 게시물 디렉토리에서 모든 파일을 읽어야 합니다.
그런 다음 파일 이름으로 매핑합니다. 즉, 슬러그가 있는 경로는 각 파일에 대해 유효합니다.

개별 요청의 경우 머리말 부분과 페이지의 실제 콘텐츠를 모두 추출해야 합니다.

import fs from 'fs';
import matter from 'gray-matter';

export async function getStaticProps({ params: { slug } }) {
  const fileName = fs.readFileSync(`./posts/${slug}.md`, 'utf-8');
  const { data: frontmatter, content } = matter(fileName);
  return {
    props: {
      frontmatter,
      content,
    },
  };
}

이제 렌더링 기능을 조정하여 요청된 파일의 콘텐츠를 반환할 수 있습니다.

export default function PostPage({ frontmatter, content }) {
  return (
    <section className='px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <div className='prose mx-auto'>
          <h1>{frontmatter.title}</h1>
          <div>{content}</div>
        </div>
      </div>
    </section>
  );
}

이제 이것이 어떻게 렌더링되는지 살펴보겠습니다.



따라서 모든 것이 있는 것처럼 보이지만 두 가지 문제가 있습니다.

마크다운이 HTML로 렌더링되지 않음

페이지가 스타일을 적용하지 않음

첫 번째 부분에서는 마크다운을 HTML로 변환하는 매우 멋진 NPM 패키지를 활용할 수 있습니다.

패키지를 설치하여 시작하십시오.

npm install markdown-it

이제 [slug].js 페이지에서 이 패키지를 가져오고 렌더링할 콘텐츠를 설정합니다.

import md from 'markdown-it';

export default function PostPage({ frontmatter, content }) {
  return (
    <section className='px-6'>
      <div className='max-w-4xl mx-auto py-12'>
        <div className='prose mx-auto'>
          <h1>{frontmatter.title}</h1>
          <div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
        </div>
      </div>
    </section>
  );
}

dangerouslySetInnerHTML 함수를 사용해야 합니다. 그러나 콘텐츠는 서버에서 소유하고 있으므로 이 정도면 충분히 안전합니다.

이제 새로 고치면 #가 제목으로 렌더링되는 것을 볼 수 있지만 여전히 모두 동일하게 보입니다.

다행스럽게도 자동 스타일링을 처리하는 Tailwind 플러그인이 있습니다. 즉, 각 요소에 클래스를 추가할 필요가 없습니다.

먼저 플러그인을 설치하십시오.

npm install -D @tailwindcss/typography

그런 다음 tailwind.config.js 파일을 열고 플러그인을 추가합니다.

plugins: [require('@tailwindcss/typography')];

서버를 다시 시작하고 페이지를 다시 여세요!
이제 스타일이 지정된 웹사이트가 표시되어야 합니다. 계속해서 페이지에 몇 가지 마크다운을 추가하여 작동하는지 확인하세요.



GitHub에서 이 문서의 완성된 코드를 찾을 수도 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나