SvelteKit 자습서: Svelte MDSveX 블로그 사이트 만들기

🧑🏽‍🎓 SvelteKit 자습서
SvelteKit 튜토리얼: SvelteKit가 유행하면서 SvelteKit를 사용하여 접근 가능하고 빠르며 안전한 Svelte 블로그를 만드는 방법을 소개합니다.우리의 게시물은 스웰트가 마크다운(MDSveX)에서 지원할 것입니다.본질적으로 말하자면, 이 새로운 프로젝트는 우리looked at the SvelteKit MDsveX Blog starter의 최근 블로그 글의 연장선상이다.이번에 우리는 더욱 실제적인 방법을 채택하여 사이트를 맞춤형으로 만들었고 블로그 게시물에 MDSveX를 추가했다.만약 이것이 네가 흥분할 수 있는 일처럼 들린다면, 우리 시작합시다.

🚀 우리 시작합시다!
우리는 MDsvex Blog Starter를 사용하여 지면 운행을 실현할 것이다.그래서 우리가 해야 할 첫 번째 일은 복제하는 것이다.패키지 관리자로 pnpm을 사용하지만, 만약 pnpm을 더 좋아한다면, 모든 pnpm 명령에서 첫 번째 p를 삭제하십시오.repo를 복제하고 명령줄에서 설정하려면 다음과 같이 하십시오.

git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-tutorial
cd sveltekit-tutorial
pnpm install
cp .env.EXAMPLE .env
pnpm run dev

만약 당신이 처음으로 SvelteKit를 사용한다면, SvelteKit의 입문에 관한 게시물을 훑어보는 것이 매우 유용하다는 것을 발견할 수 있을 것이다.단, 만약 무슨 분명하지 않은 곳이 있으면 연락하세요(자세한 내용은 아래 글 참조). 왜냐하면 이것은 내가 언급하는 것을 잊어버린 것일 수도 있기 때문입니다!현재 브라우저에서localhost:3000으로 이동합니다.
사이트를 연 후 페이지를 보십시오.너는 안에 이미 약간의 시범 내용이 있는 것을 보게 될 것이다.이 문서에서는 다음을 다룹니다.

업데이트 스타일

글꼴 변경

새 날씬한 구성 요소를 추가하여 MDSveX 블로그 글에서 사용합니다.

만약 네가 나처럼 열중한다면, 다음 부분으로 넘어가서, 네가 어떻게 오프닝의 스타일을 갱신하는지 보자.

💄 스타일링
우리는 식욕을 돋우는 요리에서SCS를 사용하여 스타일링을 한다.대부분의 스타일은 두 파일의 변수로 설정됩니다: src/lib/styles/styles.scss 와 src/lib/styles/variables.scss.풍격은 그곳에서 전 세계로 전파된다.이것은 사이트의 양식을 갱신하는 것을 매우 쉽게 만들었다.우리 먼저 색깔을 바꾸자.편집src/lib/styles/variables.scss:

// Colours
$color-theme-1: #e63946; // imperial red
$color-theme-2: #a8dadc; // powder blue
$color-theme-3: #457b9d; // celadon blue
$color-theme-4: #1d3557; // prussian blue

$color-primary: #005b99;
$color-text: #0d1821; // rich black FOGRA 29
$color-heading: $color-theme-4;
$color-heading-black: $color-theme-4;
$color-accent: #f1faee; // honeydew
$color-success: #2ec4b6; // tiffany blue
$color-danger: #e71d36; // rose madder

'색깔'이라는 단어의 철자가 일치하지 않는 것을 용서해 주십시오!다른 비미국인들도 이렇게 할까요, 아니면 저만요?
그런 다음 레벨 1 머리글의 기울임꼴 스타일을 삭제하고 행을 삭제하여 src/lib/styles/styles.scss처럼 보입니다.

h1 {
  margin-top: 0;
  font-weight: $font-weight-black;
  font-size: $font-size-6;
  color: $color-heading-black;
}

우리 완성되기 전에 훔쳐보지 마!다음으로는 BlogPostSummary 및 Card 구성 요소를 변경합니다.

      ...
    <span id={idString} aria-hidden="true" class="read-more-text">Read more {H_ELLIPSIS_ENTITY}</span>
  </div>
</div>

 .content {
    width: 100%;
    border-radius: $spacing-2;
    margin: $spacing-0 auto;
    padding: $spacing-4 $spacing-0;

    h3 {
      margin: $spacing-0 $spacing-2;
    }
    p {
      color: $color-theme-3;
      font-size: $mobile-font-size-2;
      margin: $spacing-2;
    }
    .read-more-text {
      margin: $spacing-2;
    }
  }

  .content:hover {
    h3 {
      color: $color-accent;
    }
    p {
      color: $color-theme-2;
    }

  .content {
    width: 100%;
    background-color: $color-theme-2;
    border-radius: $spacing-1;
    margin: $spacing-0 auto;
    padding: $spacing-4;
  }

마지막으로 홈페이지를 정리해 봅시다. 홈페이지의 코드는src/routes/index.svelte입니다.제목을 변경하고 내 정보 카드를 다시 나열하고 있습니다.

<header>
  <h1>My Film Photography Blog</h1>
</header>
<Card>
  <div class="card">
    <h2><span>About me</span></h2>
    <p>
      I live and breathe analogue photography. I show you my favourite analogue film cameras on this
      site. Hopefully if you are not into analogue photography yet, some of my enthusiasm will rub off
      onto you.
    </p>
  </div>
</Card>
<BlogRoll {posts} />

<style lang="scss">
  .card h2 { margin-top: $spacing-0; }
</style>

네, 지금 브라우저에서 볼 수 있습니다.당신은 어떻게 생각합니까?만약 그것이 아직 네가 좋아하는 차가 아니라면, 좀 더 바꾸어라!당신이 계속할 준비가 되었을 때, 우리는 글씨체를 변경할 것입니다.

🖋 글꼴
초보자는 셀프 트랜잭션 글씨체를 사용한다.이렇게 하면 페이지를 더욱 빨리 불러오고 사용자 체험을 개선할 수 있다.네가 기억해야 할 것은 글씨체를 바꿀 때 새 글씨체를 설치하는 것이다.명령줄에서 사용할 필요가 없는 초보자 글꼴을 먼저 제거합니다.

pnpm uninstall @fontsource/lora @fontsource/source-sans-pro 

다음에 예상한 대로 대체 글꼴을 설치합니다.

pnpm install @fontsource/slabo-27px

Lato도 사용하지만 이미 설치되어 있습니다.제목에는 Slabo 27px, 다른 요소에는 Lato가 사용됩니다.대부분의 무료 글꼴에는 Fontsource 패키지가 있습니다. 자세한 내용은 Fontsource 사이트를 방문하십시오.선택한 글꼴이 어떤 권중과 스타일을 지원하는지 확인하십시오.
현재 글꼴이 설치되어 있습니다. 가져오고 SCSS 변수 파일에서 선택한 글꼴로 설정해야 합니다.변수 파일부터 시작합니다.

// Fonts
$font-family-serif: 'Lato', 'Lustria', 'Noto Serif', 'Merriweather', 'Georgia', 'Cambria',
  'Times New Roman', 'Times', serif;
$font-body: $font-family-serif;
$font-heading: 'Slabo 27px', $font-family-serif;

우리 마지막까지 계속합시다.글꼴을 가져옵니다.모든 페이지가 글로벌 레이아웃 파일(src/routes/__layout.svelte을 사용하기 때문에 글꼴을 가져오고 원래 가져오기를 삭제합니다.

<script>
    // Lato - supported variants:
    // weights: [100, 300, 400, 700, 900]
    // styles: [italic, normal]
    import '@fontsource/lato/400.css';

    // Slabo 27px - supported variants:
    // weights: [400]
    // styles: [normal]
    import '@fontsource/slabo-27px/400.css'
    ...

⚓️ 앵커 제목으로 스크롤
유감스럽게도 우리는 곧 끝난다.다음 단계로 넘어갑시다.나는 우리가 새로운 날씬한 구성 요소를 만들고 아웃 블로그 게시물 표시에 추가할 것을 약속합니다.우리는 지금 이렇게 해야 한다.우리는 롤러 닻을 실현할 것이다.마우스를 제목에 걸면 작은 링크 아이콘이 나타나는 사이트를 방문했을 수도 있다.다른 곳에서 인용할 수 있도록 이 링크를 복사하거나, 누르기만 하면 읽는 부분이 화면 위로 굴러갑니다.이것이 바로 우리가 지금 설치해야 할 것이다.새 Heading 구성 요소를 만드는 것부터 시작합시다.src/lib/components/Heading.svelte에 새 파일을 생성합니다.

<script>
    import LinkIcon from '$lib/components/Icons/Link.svelte';

    export let id;

    $: showLink = false;

    const handleMouseEnter = (event) => {
        showLink = true;
    }

    const handleMouseLeave = (event) => {
        showLink = false;
    }
</script>

<h2
    {id}
    on:mouseenter={handleMouseEnter}
    on:mouseleave={handleMouseLeave}
>
    <slot />
    {#if showLink}
    <a href={\`#\${id}\`}>
        <LinkIcon />
    </a>
    {/if}
</h2>

그 코드는 날씬함으로 가득 차 있다.이 안에 너무 많아요.It's worth checking the Svelte tutorial for explanations하지만 제가 도울 수 있다면 언제든지 연락할 수 있습니다.기본 브라우저 비헤이비어를 사용하여 스크롤합니다.부품 전력 소모 부품이 제공될 것이다id.우리는 그것으로 제목을 표시한다. id따라서 닻 요소id를 지정할 때 브라우저는 어디에서 굴러갈지 알 수 있습니다.
이것은 MDSveX를 보여 주는 기본 버전입니다.네가 자신의 사이트에서 그것을 실현할 때, 너는 이곳에서 시내에 들어갈 수 있다.예를 들어, ID를 자동으로 생성하거나 사용자 정의 제목 수준을 가질 수 있습니다.너는 이 작은 원소로 많은 일을 할 수 있다.
링크 아이콘을 가져왔습니다. 프로젝트에 이 아이콘을 추가해야 합니다.시작하자.

링크 아이콘src/lib/components/Icons/Link.svelte에 새 파일을 생성하고 해당 깃털 아이콘을 가져올 수 있는 내용을 제공합니다.

<script>
  import { DEFAULT_ICON_SIZE } from './index.js';
  import LinkIcon from 'svelte-feather-icons/src/icons/LinkIcon.svelte';
  export let size = DEFAULT_ICON_SIZE;
</script>

<LinkIcon {size} />

우리의 마지막 단계는 블로그 글에서 구성 요소를 가져와 사용하는 것입니다.문을 열다src/routes/best-medium-format-camera-for-starting-out/index.md.이 파일은 약간 어지럽다. Netlify 어댑터에 임시 해결 방안이 있기 때문에 앞의 일이 매우 많다.그 외에도 Heading 요소를 가져오고 사용하도록 하겠습니다.

<script>
  import ExternalLink from '$lib/components/ExternalLink.svelte';
  import Heading from '$lib/components/Heading.svelte';
  import Link from '$lib/components/Link.svelte';
</script>

<Heading id="whatIsAMediumFormatCamera">What is a Medium Format Camera? </Heading>
...

현재 브라우저에 들어가서 마우스를 링크에 걸면 링크 아이콘이 나타납니다. anchor로 스크롤하려면 누르십시오.마우스를 링크에서 이동하면 마우스가 사라질 것입니다.모든 것이 순조롭기를 바랍니다.당신은 어떻게 생각합니까?

🙌🏽 SvelteKit 자습서: Wrapup
지금 이대로보통 저도 Axe를 사용하여 Cypress에서 자동 접근성 테스트를 실행합니다.불행히도 Cypress is not currently compatible with SvelteKit out of the box, though there are a few workarounds you can try.또는 Axe 브라우저 로드 항목을 설치하고 브라우저 개발 도구에서 Axe를 열 수 있습니다.
나는 너희들이 어떻게 우리의 이곳에서의 운영을 확대할 것인지 매우 알고 싶다.당신은 어떤 블로그를 쓸 줄 압니까?

Sveltekit 자습서:피드백
피드백 주세요!너는 이 댓글이 유용하다고 생각하니?다른 주제의 댓글을 보고 싶으세요?새 게시물에 연락할 생각.그 밖에 만약에 제 작문 스타일을 좋아하신다면 저에게 연락을 주십시오. 만약에 제가 상담을 바탕으로 귀사 사이트를 위해 댓글을 쓸 수 있다면.계속 읽고 연락할 방법을 찾으세요. 자세한 것은 아래 문장을 보십시오.유사한 게시물을 지원하고 달러, 루피, 유로화, 파운드를 몇 달러 절약할 수 있다면 consider supporting me through Buy me a Coffee.
마지막으로, 당신의 소셜 미디어 계정에 이 글을 마음대로 공유해서, 당신의 모든 관심자들이 이 글을 매우 유용하게 생각하도록 하세요.아래에 댓글을 남기는 것 외에 트위터와askRodney on Telegram로 연락할 수 있다.관련 항목further ways to get in touch with Rodney Lab도 참조하십시오.나는 SvelteKit와Gatsby JS 등의 주제에 자주 글을 쓴다.그리고 subscribe to the newsletter to keep up-to-date 우리의 최신 프로젝트.