마크다운 리믹스 개요 페이지

이제 Markdown powered page이 작동하므로 일종의 개요 페이지를 추가하는 방법을 살펴보겠습니다.

이것은 최신 기사를 보여주기 위해 홈페이지에 있을 수도 있고 단순히 블로그 개요 페이지일 수도 있습니다.

Note: While doing research, I could not find an automated way, so this article might get updated once I do.

마크다운 파일 로드

Markdown 파일은 Remix에서 개별적으로 로드해야 합니다. 글을 쓰는 시점에서 자동화된 방법이 있는지 100% 확신할 수 없습니다.

찾으면 이 기사를 업데이트하겠습니다 🙌.

시작하자!

이 예에서는 블로그 개요 페이지를 만들 것이므로 index.tsx 디렉토리 안에 blog 파일을 추가해 보겠습니다.

이제 표시하려는 마크다운 파일을 로드하여 시작할 수 있습니다.

import * as firstArticle from './my-first-article.md';
import * as secondArticle from './mdx-sample.mdx';

그런 다음 Markdown 파일의 메타데이터(Frontmatter 섹션)만 로드하려고 합니다.
따라서 전체 파일이 아닌 해당 정보만 추출하는 함수를 만들어 보겠습니다.

function postFromModule(mod) {
  return {
    slug: mod.filename.replace(/\.mdx?$/, ''),
    ...mod.attributes.meta,
  };
}

이 함수는 슬러그와 파일의 모든 앞부분을 반환합니다.
frontmatter 섹션은 파일 맨 위에 있는 세 개의 대시 안에 있는 모든 것입니다.

그런 다음 Remix 로더를 사용하여 이러한 페이지를 실제로 로드할 수 있습니다.

export async function loader() {
  return json([postFromModule(firstArticle), postFromModule(secondArticle)]);
}

이제 페이지 내에서 이 데이터에 액세스할 수 있습니다.

export default function Index() {
  const posts = useLoaderData();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link to={post.slug}>{post.title}</Link>
          {post.description ? <p>{post.description}</p> : null}
        </li>
      ))}
    </ul>
  );
}

그리고 그게 다야. Remix는 가져오기에서 정의한 게시물을 반복하고 실제 페이지에 대한 링크와 함께 제목과 설명을 표시합니다.



전체 코드를 보려면 여기GitHub repo를 확인하십시오.

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

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