일레븐티 파셜

2562 단어 eleventytutorialbeginnersjamstack
작성자: Mike Neumegen

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

부분은 반복을 줄이거나 복잡성을 숨기기 위해 레이아웃에 코드 스니펫을 포함하는 방법입니다. 이 강의에서는 부분을 사용하여 사이트에 내비게이션 바를 추가합니다. 기존 레이아웃에 탐색 표시줄을 추가할 수 있지만 수천 줄의 파일을 확장하는 것보다 작은 구성 요소로 세분화된 사이트를 유지 관리하는 것이 더 쉽습니다.

첫 번째 부분



부분은 우리가 이미 만든 _includes 디렉토리에 있으며 일반적으로 레이아웃과 구별하기 위해 파일 이름을 밑줄로 시작하는 규칙이 있습니다. 다음 내용으로 생성/_includes/_nav.html:

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>


내비게이션의 전부입니다. 이제 레이아웃에 포함할 수 있습니다. /_includes/page.html를 열고 아래에 다음을 추가합니다</body>.

    {% include '_nav.html' %}


페이지를 렌더링하고 새로운 내비게이션에 감탄하십시오.

두 번째 부분



부분의 또 다른 훌륭한 용도는 복잡성을 숨기는 것입니다. 일반적으로 <head>에는 모든 종류의 자산 참조, SEO 태그, 소셜 태그 및 분석 스크립트가 포함됩니다. 저는 이 모든 HTML을 일부로 가져와서 레이아웃을 단순화하고 태그를 더 쉽게 찾을 수 있도록 하고 싶습니다.

다음 내용으로 생성/_includes/_meta.html:

    <meta charset="utf-8">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/assets/main.css">


그리고 <head>에 있는 /_includes/page.html의 내용을 include로 바꿉니다.

    {% include '_meta.html' %}


렌더링된 사이트는 정확히 동일하게 보여야 하지만 이번에는 유지 관리가 조금 더 쉬워졌습니다.

무엇 향후 계획?



다음 강의에서는 Eleventy에서 Liquid를 사용하는 기본 템플릿을 살펴보겠습니다.
Eleventy의 블로깅
Eleventy의 템플릿

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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