SvelteKit의 레이아웃

5109 단어 beginnerstutorialjamstacksvelte
작성자: Mike Neumegen

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

레이아웃이 SvelteKit 사이트의 기본 구조를 설정하고 재사용하는 데 어떻게 도움이 되는지 알아보세요.

이전 강의에서 설정한 Skeleton 웹사이트에는 앞에서 본 색인 페이지가 있습니다. 이 페이지의 콘텐츠를 업데이트하여 우리만의 방식을 적용해 보겠습니다. /src/routes/index.svelte의 내용을 다음으로 바꿉니다.

<svelte:head>
   <title>Svelte's Homepage</title>
</svelte:head>

<p>Hello, my name's Svelte. I'm a dog and this is my homepage.</p>


그 동안 사이트에 다른 페이지를 추가해 보겠습니다. 다음 콘텐츠로 생성/src/routes/about.svelte:

<svelte:head>
   <title>About Svelte</title>
</svelte:head>

<p>This is my about page. I'm a pup exploring the world of SvelteKit.</p>


그<svelte:head> 태그는 일반 HTML처럼 보이지 않습니다. 저게 뭐에요?
src/app.html 를 볼 때 이 파일에서 %sveltekit.head% 및 %sveltekit.body% 라는 익숙하지 않은 두 태그를 발견했을 수 있습니다. 레이아웃 및 페이지의 콘텐츠로 대체될 자리 표시자입니다. <svelte:head>는 짐작하셨겠지만 Svelte 태그입니다. 태그 사이의 모든 항목은 사이트의 %sveltekit.head% 섹션인 <head>로 이동합니다.

브라우저를 열고 http://localhost:3000/about으로 직접 이동하면 새 페이지가 표시됩니다.

첫 번째 레이아웃



모든 페이지에 사이트 제목과 함께 <h1>를 추가해 보겠습니다. <h1>를 모든 페이지에 수동으로 추가할 수 있지만 변경해야 한다면 어떻게 될까요? 대신 페이지가 상속하는 레이아웃을 만들어 보겠습니다.

먼저 __layout.svelte 디렉토리에 routes(처음에 두 개의 밑줄)를 만들고 다음 콘텐츠를 추가합니다.

<h1>Svelte's space</h1>
<slot />


저 <slot> 태그는 무엇입니까? 이것은 페이지(또는 중첩된 레이아웃)의 본문 콘텐츠가 들어가는 곳입니다. 그게 우리가 해야 할 전부입니다. 레이아웃은 그것이 상주하는 디렉토리(및 하위 디렉토리)의 모든 경로에 적용됩니다.

스타일 추가



좀 더 심미적으로 보기 좋게 만들기 위해 사이트에 약간의 스타일을 지정해 보겠습니다. Svelte는 스타일 범위를 개별 구성 요소로 자동 지정합니다.

작동 방식은 원하는 CSS로 구성 요소에 <style> 태그를 추가하는 것입니다. Svelte는 자동으로 구성 요소에 클래스를 추가하고 다른 구성 요소와 충돌하지 않도록 스타일을 지정합니다. 만약 당신이 바닐라 HTML과 CSS에서 온다면 이것은 당신에게 약간 마법처럼 보일 수 있습니다. 워크플로를 수용해 보십시오. 분리된 구성 요소를 사용하면 향후 유지 관리가 훨씬 쉬워집니다.

Sass는 바닐라 CSS에 비해 많은 추가 이점이 있으므로 Svelte Preprocess 라이브러리와 Sass 라이브러리를 사이트에 추가하는 것으로 시작하겠습니다.

터미널에서 다음을 실행합니다.

npm i -D svelte-preprocess sass


그런 다음 전처리기를 사용하도록 SvelteKit을 구성합니다. svelte.config.js를 열고 다음과 같이 구성에 전처리기를 추가합니다.

    const config = {
      preprocess: preprocessor(),
      kit: {
        adapter: adapter()
      }
    };

<body> 에 몇 가지 전역 스타일을 추가하는 것으로 시작하겠습니다. 이전에 생성한 __layout.svelte에 다음을 추가합니다.

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


SCSS lang 태그를 추가하면 SvelteKit이 이 블록에서 Sass 컴파일을 실행하도록 지시합니다. 이것은 CSS 범위 지정을 원하지 않는 한 가지 예이므로 선택기에 :global를 추가했습니다. 다음 단원에서는 일반적으로 스타일을 추가하는 방법을 볼 수 있는 범위가 지정된 스타일이 있는 탐색 구성 요소를 추가합니다.

이제 브라우저에서 your site을 보면 매우 기본적인 스타일을 볼 수 있습니다.

무엇 향후 계획?



현재 정보 페이지로 이동하는 유일한 방법은 브라우저에 주소를 입력하는 것입니다. 다음 강의에서는 사이트에 탐색 구성 요소를 추가합니다.
Valtio와 반응: Leaflet.js를 사용한 지리적 위치 API
ContOS7에 yum에서 jenkins를 넣는 Dockerfile [추기:privileged 없음]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage