SvelteKit의 템플릿

작성자: Mike Neumegen

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

이 자습서에서는 기본 SvelteKit 템플릿 개념을 살펴보고 사이트에서 템플릿을 사용하는 방법을 살펴봅니다.

Svelte는 페이지와 구성 요소가 렌더링되는 방식을 완벽하게 제어할 수 있게 해줍니다. 콘텐츠, 출력 변수를 반복하거나 논리 문을 실행하거나 외부 소스에서 데이터를 가져올 수 있습니다. 이전 레슨에서 className을 출력하기 위한 중괄호{ }와 같은 몇 가지 템플릿을 이미 접했습니다.

SvelteKit에서 템플릿을 어떻게 사용합니까?

템플릿 작성은 SvelteKit에서 수행하게 될 가장 일반적인 작업 중 하나이므로 작동 방식을 보여주기 위해 몇 가지 예를 살펴보겠습니다.

문자열 출력

    <p>You can write normal HTML, and when you want to switch to Svelte, 
    you can use single curly braces like this: { "Hello!" }</p>

출력 소품 값

    <script>
      export let favorite_treat = 'bone';
    </script>

    <p>My favorite treat is a { favorite_treat }</p>

정황

    <script>
      export let goodBoy = true;
    </script>

    {#if goodBoy}
      <p>One treat please.</p>
    {:else}
      <p>No treats for me.</p>
    {/if}

루핑

    <script>
      export let whoLetTheDogsOut = [
        'Bryan',
        'Sally',
        'Garry'
      ];
    </script>

    <ul>
    {#each whoLetTheDogsOut as name}
      <li>{name}</li>
    {/each}
    </ul>

인터랙티브 요소

    <script>
      let count = 0;

      function handleClick() {
        count += 1;
      }
    </script>

    <button on:click={handleClick}>
      clicks: {count}
    </button>

    <!-- When you click the button it will run the handleClick function
    and live update {count} -->

그것은 당신에게 놀 수있는 몇 가지 기본 도구를 제공합니다. SvelteKit 여정을 통해 이러한 개념을 계속해서 사용하게 될 것입니다.

함께 모아서

우리는 여기에서 많은 다른 개념을 보았습니다. 페이지가 렌더링된 날짜와 시간을 웹사이트에 바닥글을 추가하여 실제로 적용해 보겠습니다.

먼저 바닥글에 대한 구성 요소를 만듭니다. 다음 콘텐츠로 생성/src/lib/Footer.svelte:

    <script>
      let now = new Date();
    </script>

    <footer>
      Website was generated { today }
    </footer>

이전에 했던 것처럼 이제 Footer를 레이아웃으로 가져오고 구성 요소를 렌더링할 수 있습니다.

    <script>
      import Nav from '$lib/Nav.svelte';
      import Footer from '$lib/Footer.svelte';
    </script>

    <h1>Svelte's space</h1>
    <Nav className="alt" />

    <slot></slot>

    <Footer />

    <style lang="scss">
        :global(body) {
        width: 400px;
        margin: 0 auto;
        font-family: sans-serif;
      }
    </style>

무엇 향후 계획?

블로그를 만들어 템플릿 지식을 시험해 봅시다.