SvelteKit의 블로깅

작성자: Mike Neumegen

SvelteKit용 Git 기반 CMS인 CloudCannon에서 제공했습니다.

이 자습서에서는 SvelteKit 콘텐츠 및 레이아웃으로 블로그를 만드는 방법을 배웁니다.

SvelteKit의 블로그는 모든 블로그 게시물을 나열하는 페이지와 게시물 날짜가 있는 일련의 콘텐츠 페이지로 구성됩니다. 그게 전부입니다.

mdsvex을 사용하여 Markdown 게시물을 렌더링할 것입니다. Markdown 사이에서 Svelte 템플릿 및 구성 요소를 사용할 수 있게 해주는 Svelte용 Markdown 전처리기입니다.

마크다운 구성

mdsvex를 설치하여 시작하겠습니다.

    npm i -D mdsvex

이제 .md에서 .svx 및 svelte.config.js 파일에 대해 mdsvex를 사용하도록 SvelteKit을 구성해야 합니다.

    import adapter from '@sveltejs/adapter-static';
    import preprocessor from 'svelte-preprocess';
    import {mdsvex} from 'mdsvex';

    /** @type {import('@sveltejs/kit').Config} */
    const config = {
        extensions: ['.svelte', '.md', '.svx'],
        preprocess: [
            preprocessor(),
            mdsvex({
                extensions: ['.md', '.svx'],
                layout: 'src/routes/blog/_post.svelte'
            })
        ],
        kit: {
            adapter: adapter()
        }
    };

    export default config;

포스트 레이아웃

위의 구성에서 흥미로운 한 줄은 레이아웃을 설정하는 위치입니다. 모든 .md 또는 .svx는 기본적으로 이 레이아웃을 사용합니다. 아직 존재하지 않으므로 생성해 봅시다. 다음을 사용하여 route 폴더 내부와 createblog 내부에 _post.svelte라는 디렉토리를 생성합니다.

    <script>
      export let title
      export let date
    </script>

    <svelte:head>
      <title>{ title }</title>
    </svelte:head>

    <h1>{title}</h1>

    <p>Published: {date}</p>

    <slot />

우리는 title 및 date에 대한 소품을 설정하고 있으며 이는 게시물의 머리말을 통해 설정됩니다(곧 다룰 예정입니다). 나머지는 첫 번째 레이아웃과 유사합니다. 페이지의 일부 요소인 <title> 를 설정한 다음 콘텐츠에 대해 <slot /> 를 호출합니다.

SvelteKit은 기본적으로 레이아웃을 중첩하므로 찾은 항목__layout.svelte을 적용하는 디렉토리 트리를 작업합니다. 따라서 SvelteKit은 다음 리소스를 사용하여 게시물 페이지를 렌더링합니다.

.md 파일

/src/routes/blog/_post.svelte

/src/routes/__layout.svelte

/app.html

게시물 작성

각 게시물은 Markdown 파일이며 이전에 만든 /src/routes/blog/ 디렉터리에 있습니다. 이제 세 개의 블로그 게시물을 작성해 보겠습니다.

    ---
    title: Dog's nose
    date: "2022-07-01"
    ---
    A dog's nose is unique, just like the finger prints of a human.

    ---
    title: Owner's bed
    date: "2022-07-02"
    ---
    45% of dogs in the US sleep on their owner's bed.

    ---
    title: Sniffing power
    date: "2022-07-03"
    ---
    A dog's smell is around 40x better than our own.

삼중 점선이 무엇인지 궁금할 것입니다. 페이지의 메타데이터를 설정하는 방법인 머리말을 나타냅니다. 자동으로 초기화되도록 이 메타데이터에 대한 게시물 레이아웃에 이미 소품을 설정했습니다.

마지막으로 모든 블로그 게시물을 나열하는 페이지를 만들어야 합니다. 다음을 사용하여 /src/routes/blog/index.svelte를 만듭니다.

    <script context="module">
      const blogPosts = import.meta.glob('./*.md');

      let body = [];

      for (let path in blogPosts) {
        body.push(
          blogPosts[path]().then(({ metadata }) => {
            path = path.replace(".md", "").replace(".svx", "");
            return { path, metadata };
          })
        );
      }

      export async function load({ url, params, fetch }) {
        const posts = await Promise.all(body);
        return {
          props: {
            posts
          }
        };
      }
    </script>

    <script>
      export let posts;
    </script>

    <h1>Blog</h1>

    <ul>
      {#each posts.reverse() as { path, metadata: { title, date }}}
        <li>
          <a rel="prefetch" href="blog/{path}">{title}</a> - { date }
        </li>
      {/each}
    </ul>

여기에서 많은 일이 일어나고 있으므로 분해하겠습니다.

먼저 현재 디렉터리에 있는 모든 게시물 모듈을 수집합니다.

    const blogPosts = import.meta.glob('./*.md');

그런 다음 각 블로그 게시물에서 메타데이터를 추출하는 일련의 약속을 만듭니다. 경로에는 게시물의 파일 확장자가 있지만 종료 URL에는 그렇지 않으므로 제거합니다.

    let body = [];

    for (let path in blogPosts) {
        body.push(
          blogPosts[path]().then(({ metadata }) => {
            path = path.replace(".md", "").replace(".svx", "");
            return { path, metadata };
          })
        );
    }

SvelteKit 구성 요소는 구성 요소가 로드되기 전에 실행되는 load function을 정의할 수 있습니다. 이 함수를 사용하여 모든 약속을 실행하고 결과를 페이지 소품에 저장합니다.

    export async function load({ url, params, fetch }) {
      const posts = await Promise.all(body);
      return {
        props: {
          posts
        }
      };
    }

마지막으로 게시물 목록을 출력하기 위해 posts 소품을 반복합니다.

    <ul>
      {#each posts.reverse() as { path, metadata: { title, date }}}
        <li>
          <a href="blog/{path}">{title}</a> - { date }
        </li>
      {/each}
    </ul>

브라우저에서 블로그를 보기 전에 탐색에 블로그를 추가하는 마지막 단계가 있습니다. Nav 구성 요소를 열고 블로그에 대한 링크를 추가합니다.

    <li><a href="/blog/">Blog</a></li>

그게 전부입니다! 브라우저에서 사이트를 열고 블로그를 탐색하십시오.

무엇 향후 계획?

마지막 강의에서는 생성된 JSON 파일을 사용하여 최고의 반려견 공원으로 지도를 채울 것입니다.