로컬 마크다운 블로그 게시물 로드 - 12부

이제 포트폴리오를 설정하고 스타일을 지정했으므로 동적 데이터를 로드할 차례입니다.

다음 문서에서는 다양한 데이터 로드 방법을 살펴보겠습니다.
이 특정 항목에서는 로컬 마크다운 파일에서 블로그 게시물을 로드하는 방법을 살펴보겠습니다.

로컬 마크다운 블로그 게시물 로드 중

posts라는 새 폴더를 만들어 시작하겠습니다. 이것은 모든 블로그 게시물의 출처가 됩니다.

내부에는 몇 개의 블로그 게시물을 추가하여 시작합니다. 이것은 내가 blog-post-one.md라고 부르는 예제입니다.

---
title: 'Blog post one'
description: 'A short description about this post'
image: /images/post-1.jpg
date: '2021-09-22'
tags:
  - tag1
  - tag2
---

# The main content

여기에서 기존 페이지 구조를 이동해야 합니다. 지금까지는 블로그 페이지가 하나만 있었지만 개별 페이지도 지원할 예정이므로 구조가 잘못되었습니다.

이 문제를 해결하려면 페이지 폴더 내에 blog라는 새 폴더를 만듭니다.
그런 다음 기존 blog.js 파일을 이 블로그 폴더로 이동하고 이름을 index.js 로 바꿉니다.

즉, /blog 페이지가 여전히 의도한 대로 작동합니다.

그러나 여전히 목업 데이터만 표시합니다.
마크다운 블로그 게시물을 로드하려면 어떻게 해야 할까요?

여기에서 Next.js 초능력을 사용하고 페이지에 로더를 추가할 수 있습니다.blog/index.js 파일을 열고 다음과 같이 정적 소품 함수를 추가합니다.

export async function getStaticProps() {
  // Get all posts

  return {
    props: {
      posts,
    },
  };
}

반환하는 모든 게시물을 가져와야 합니다.
이 파일의 주요 구성 요소는 소품에서 이러한 게시물을 검색할 수 있습니다.

export default function Home({ posts })

하지만 게시물을 로드하는 방법을 살펴보겠습니다.
우리 게시물이 마크다운인 것을 보면 마크다운을 읽을 수 있는 방법을 찾아야 합니다.

이를 위해 matter npm package 을 사용합니다.

npm i gray-matter

그런 다음 정적 소품을 수정하여 로컬 파일 시스템에서 읽고 모든 게시물을 가져올 수 있습니다.
우리는 이 포스트와 frontmatter 부분에 대한 슬러그를 반환합니다.

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

  const posts = files.map((fileName) => {
    const slug = fileName.replace('.md', '');
    const readFile = fs.readFileSync(`posts/${fileName}`, 'utf-8');
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      ...frontmatter,
    };
  });

  return {
    props: {
      posts,
    },
  };
}

이제 기본 기능을 수정하고 다음과 같이 얻은 결과를 기록하면 다음과 같습니다.

export default function Blog({ posts }) {
    console.log(posts);
});

다음과 같은 응답이 표시되어야 합니다.



완성된 것 같으며 반환된 기사를 수정할 수 있습니다.

{
  posts.map((post) => (
    <Article key={post.slug} className='border-b-2' post={post} />
  ));
}

이것은 여전히 ​​목업 기사를 반환하지만 걱정하지 마십시오. 이제 변경하겠습니다.

기사 구성 요소 수정

기사 구성 요소를 동적으로 만들고자 하므로 수락된 매개 변수를 허용하도록 몇 가지 수정을 가해 보겠습니다.
article.js 구성 요소를 열고 다음을 소품으로 추가합니다.

export default function Article({post, className = 'rounded-lg'})

이렇게 하면 게시물 개체를 이 기사에 전달할 수 있습니다.
이제 이 게시물을 사용하도록 구성 요소를 변경해 보겠습니다.

import Link from 'next/link';

export default function Article({ post, className = 'rounded-lg' }) {
  return (
    <article className={`bg-white p-4 ${className}`}>
      <Link href={`blog/${post.slug}`}>
        <h3 className='text-2xl mb-2 font-medium hover:text-red-400 cursor-pointer'>
          {post.title}
        </h3>
      </Link>
      <span className='text-gray-600 mb-4 block'>
        <date>{post.date}</date> | {post.tags.map((tag) => tag).join(', ')}
      </span>
      <p>{post.description}</p>
    </article>
  );
}

이제 페이지를 다시 렌더링하면 동적 블로그 기사를 볼 수 있습니다.



여기에서 더 많은 블로그 기사를 추가할 수 있습니다.

다음 기사에서는 블로그 페이지가 작동하는지 확인하고 홈페이지에 표시된 블로그 게시물을 수정합니다.

다음GitHub branch에서 오늘의 코드를 찾을 수 있습니다.

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

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