지킬 서론 및 YAML

7323 단어 jamstackbeginnerstutorialjekyll
작성자: Farrel Burns

Jekyll용 Git 기반 CMS인 CloudCannon에서 가져왔습니다.

**Clone:** git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git

**Starter branch:** git checkout front-matter-intro-start

**Finished lesson:** git checkout front-matter-intro-finish


여기서 배울 내용:


  • Jekyll에서 머리말을 사용하는 방법
  • YAML의 기초
  • 고유한 YAML 데이터 구조를 만드는 방법
  • YAML로 여러 줄 텍스트를 관리하는 방법

    • 서두란 무엇입니까?



    이전 수업에서 우리는 "머리말"에 대해 언급했습니다. 그러나 정확히 무엇이며 왜 사용해야합니까? 머리말은 HTML/Markdown 문서의 맨 위에 있는 영역으로, 페이지에 대한 변수와 콘텐츠를 작성할 수 있습니다. 간단하고 친숙한 직렬화 언어인 YAML을 사용하며 Liquid와 함께 잘 작동합니다. 머리말on Jekyll’s official site에 대해 자세히 알아보십시오.

    머리말 및 YAML 기본 사항



    간단한 YAML 변수를 작성하려면 콜론과 함께 key: value 표기법을 사용하십시오. 값 자체는 4, 4.1, "4", 참/거짓 등 원하는 모든 것이 될 수 있습니다.

    또한 YAML의 주석(처리되지 않는 유용한 메모)도 "#"기호로 가능하므로 매우 유용할 수 있습니다.

    페이지 제목에 대한 변수를 사용하여 index.html 페이지에 머리말을 추가하여 시작하겠습니다.

        ---
    # the title that will appear in the HTML head tag
    title: Home
    ---


    이것이 우리가 정말로 시작해야 할 전부입니다. 텍스트에 인용 부호가 필요하지 않습니다. 이제 이에 액세스하기 위해 Liquid를 사용하고 "점 표기법"(즉, page.title )으로 "페이지"개체를 참조할 수 있습니다. 여기에서 제목 변수가 있으면 제목 태그에 출력합니다. 그렇지 않으면 간단히 CawCannon로 설정합니다.

        <head>
    … rest of head
    {% if page.title %}
      <title>CawCannon | {{ page.title }}</title>
    {% else %}
      <title>CawCannon</title>
    {% endif %}
      <link rel="stylesheet" href="css/style.css">
    </head>


    데이터 구조



    특정 방식으로 정보를 정렬하려면 YAML의 몇 가지 옵션을 알아두는 것이 좋습니다. 이렇게 하면 페이지가 데이터베이스처럼 작동할 수 있지만 훨씬 더 간단하고 친근하게 작동할 수 있습니다. 데이터 구조를 세로 또는 인라인으로 작성할 수 있습니다. 둘 다 유효합니다.

    어레이



    지난 강의에서 눈치채셨겠지만, Liquid에서 배열을 생성하는 것은 쉽지 않습니다. 그러나 앞 문제는 매우 간단합니다. 배열은 대시를 사용하여 세로로 표시하거나 대괄호를 사용하여 인라인으로 표시할 수 있으며 액세스하기 쉽도록 이름("키")을 지정하는 것이 일반적입니다.

        # vertical
    birds_vertical:
      - Tui
      - Kea
      - Pukeko
      - Piwakawaka
      - Kereru
      - Weka
    # inline
    birds_inline: [Kiwi, Tui, Kea, Karakiri, Weka]




        <!-- Display on page -->
    {% for bird in page.birds_vertical %}
      {{ bird }}
    {% endfor %}


    사물



    더 많은 키-값 쌍을 "중첩"하여 배열을 확장하여 제품이나 사람 목록과 같은 실제 아이디어를 나타내는 "객체"를 만들 수 있습니다. 이름으로 액세스하려는 더 복잡한 데이터가 필요할 때 유용합니다.

    각 새가 고유한 키-값 쌍을 포함하는 개체가 되도록 이전부터 배열을 확장해 보겠습니다. 그런 다음 각 새에 대해 키로 데이터를 반복하고 HTML에서 해당 값을 사용할 수 있습니다.

        ---
    birds:
      - name: Tui
        description: Striking songbird
        image: https://dam-cdn.cloudcannon.com/community/images/tui.jpg
        image_alt: Striking songbird in a tree.
      - name: Kea
        description: Alpine parrot
        image: https://dam-cdn.cloudcannon.com/community/images/kea.jpg
        image_alt: Parrot sitting in an alpine tree.
      - name: Kaka
        description: Loud, social forest parrot
        image: https://dam-cdn.cloudcannon.com/community/images/kaka.jpg
        image_alt: Kaka parrot in a thick forest.
      - name: Pukeko
        description: Colourful swamp hen
        image: https://dam-cdn.cloudcannon.com/community/images/pukeko.jpg
        image_alt: Pukeko bird rustling in a swamp.
      - name: Piwakawaka
        description: Small and energetic
        image: https://dam-cdn.cloudcannon.com/community/images/piwakawaka.jpg
        image_alt: Piwakaka with its tail feathers fanned sitting in a tree.
      - name: Kereru
        description: Mute yet loud pigeon
        image_alt: Kereru sitting in a tree eating berries.
        image: https://dam-cdn.cloudcannon.com/community/images/kereru.jpg
    ---
    <div class="image-grid">
    {% for bird in page.birds %}
      <div class="item">
        <img src="{{ bird.image }}" alt="{{ bird.image_alt }}">
        <p>Bird name: {{ bird.name }}</p>
        <p>Description: {{ bird.description }}</p>
      </div>
    {% endfor %}
    </div>


    YAML/머리말의 여러 줄 텍스트



    발생할 수 있는 문제는 여러 줄에 걸쳐 있는 텍스트를 작성하는 것입니다. 한 가지 옵션은 텍스트가 너무 길어지면 단순히 따옴표로 텍스트를 묶는 것입니다. 그러나 특히 줄 바꿈을 인식하는 경우 더 많은 제어 기능을 제공하는 추가 옵션이 있습니다.

    YAML/머리말에서 이를 수행하기 위한 두 가지 기본 형식이 있습니다.
  • 새 줄이 중요하지 않은 경우(예: 긴 문장 하나) 접힌 스타일을 사용합니다.

    •     Kea: >-  
      The kea is the world’s only alpine parrot and native to New Zealand, 
      with high intelligence and curiosity - which also extends to its eating habits.


  • 새 줄이 중요한 경우(즉, 단락) 리터럴 스타일을 사용하십시오.

    •     kakapo: |-  
      The kakapo is another parrot native to New Zealand
      Unlike the kea, it is a nocturnal, flightless herbivore, and the heaviest parrot in the world.
      Unfortunately, these traits have led to it being critically endangered.


    리터럴 스타일에 대해 알아야 할 두 가지 주요 단점이 있습니다.
  • 리터럴 스타일에서 새 줄을 나타내려면 줄 끝에 두 개의 공백이 있어야 합니다.
  • HTML 머리말에서 리터럴 스타일을 사용하는 경우 문서 본문에 markdownify 필터가 필요합니다(예: {{ multiline_text | markdownify }} ). 그렇지 않으면 텍스트가 자동으로 접히고 여러 줄 출력이 표시되지 않습니다.

    • 형식을 훨씬 더 조정할 수 있지만 이는 이 단원의 범위를 벗어납니다(자세한 내용은 https://yaml-multiline.info/ 참조).

    무엇 향후 계획?



    페이지를 개선하는 데 유용한 Jekyll의 머리말과 YAML을 간단히 살펴봤습니다. 그러나 다음 주제인 레이아웃을 통해 페이지에 대해 잠금 해제할 수 있는 훨씬 더 많은 기능이 있습니다.
    Jekyll의 데이터 파일
    지킬에 포함

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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