Remix의 마크다운 파일에 대한 공유 레이아웃

이전 기사에서 각 블로그를 멋지게 렌더링하기 위해 Typography Tailwind plugin을 추가했습니다.
그러나 렌더링 목적으로 prose 클래스를 배치할 적절한 위치가 없었습니다.
root.tsx 파일에 산문을 설정했습니다.
이것은 작동하지만 문자 그대로 모든 렌더링된 페이지에 prose 클래스를 추가한다는 의미입니다.

좀 더 지속 가능하게 만들기 위해 shared layouts method을 사용하여 고유한 블로그 레이아웃을 만들 수 있습니다.

공유 마크다운 레이아웃 추가

markdown files in Remix을 설정할 때 blog 폴더를 전용으로 지정했습니다.

공유 레이아웃을 사용하기 위해 경로 디렉토리에 blog.tsx 파일을 생성하기만 하면 됩니다.

이 파일은 블로그 항목에 대한 특정 레이아웃을 렌더링하는 데 사용할 수 있습니다.

지금은 매우 간단하게 유지하겠습니다.

import { Outlet } from '@remix-run/react';

export default function Blog() {
  return (
    <div className='prose'>
      <h1>Welcome to the blog:</h1>
      <Outlet />
    </div>
  );
}

이제 각 블로그 항목에는 이 정적 제목 제목과 해당 마크다운이 출력 내부에 렌더링됩니다!

결과는 다음과 같습니다.



멋진 부분은 이 레이아웃을 원하는 만큼 확장할 수 있고 블로그 디렉토리의 모든 마크다운 파일에서 사용할 수 있다는 것입니다!

관심있으신 분들은 이 글의 코드를 이것GitHub repo에 올렸습니다.

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

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