Jekyll의 데이터 파일

작성자: Farrel Burns

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

여기서 배울 내용:

대체 데이터베이스로 사용할 Jekyll 데이터 파일 생성

데이터 파일을 사용하여 Google 지도 채우기

    # Starting repo
    git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git

    # Starting branch:
    git checkout data-intro-start

    # Finished branch:
    git checkout data-intro-finish

Jekyll 데이터 파일이 무엇인가요?

때로는 페이지에서 사용할 추가 데이터가 필요하지만 데이터베이스나 API와 같이 자체 페이지로는 필요하지 않습니다. Jekyll을 사용하면 컬렉션처럼 데이터 파일을 만들고 전역적으로 액세스할 수 있습니다. 이 방법으로 자신의 미니 데이터베이스를 유지 관리할 수 있지만 설정이 거의 필요하지 않습니다. JSON, YAML, CSV(쉼표로 구분된 값) 및 TSV(탭으로 구분된 값)를 비롯한 다양한 파일 형식이 지원됩니다.

이 예에서는 Google 지도를 사용하는 페이지를 만듭니다. 그런 다음 데이터 파일을 사용하여 멸종 위기에 처한 놀라운 조류의 실제 위치로 지도를 채웁니다. 데이터 파일에 대해 자세히 알아보십시오on Jekyll’s official site.

데이터 파일 생성

먼저 일반적인 규칙을 따르겠습니다. 아직 추측하지 못했다면 파일을 위한 _data 폴더를 만들어야 합니다. 그런 다음 데이터로 <filename>.yml 파일을 만들 수 있습니다. 편의를 위해 프로젝트 루트에 locations.yml (새의 좌표 및 지원 정보 포함) 및 staff.yml 와 함께 data.zip이 추가되었습니다. 이 파일을 _data에 압축을 풀기만 하면 됩니다.

데이터 사용 사례 1 - 위치 지도

이제 데이터 파일이 있으므로 locations.yml ~ site.data.locations 에 간단히 액세스할 수 있습니다. 컬렉션과 달리 _config.yml에서 더 이상 설정할 필요가 없습니다.

작업을 더 쉽게 하기 위해 이 강의의 초점이 아닌 몇 가지 사항이 이미 설정되어 있습니다.

js/map.js (개발) Google 지도 작업에 필요한 JavaScript 코드 포함(Google 지도 설정에 익숙하지 않거나 마커 설정을 보고 싶은 경우 자유롭게 살펴보세요).

locations.html 스크립트 태그가 map.js를 연결하고 지도를 초기화합니다.

우리가 해야 할 일은 jsonify 필터를 사용하여 JSON으로 변환할 수 있는 데이터를 사용하는 것뿐입니다. locations.html의 마지막 스크립트 태그에 다음을 추가하기만 하면 됩니다.

    <script>
      let markers = {{ site.data.locations | jsonify }};
      google.maps.event.addDomListener(window, 'load', initializeMap);
    </script>

브라우저에서 페이지를 볼 때 이제 모든 마커가 표시되어야 합니다. 데이터 파일에 더 많은 마커를 추가할 수 있으며 다음 Jekyll 빌드에서 채워집니다.

데이터 사용 사례 2 - 직원 목록

데이터의 또 다른 유용한 용도는 작업이나 연락처와 같은 사람에 대한 간단한 정보입니다.

여기에서 이해할 수 있는 한 가지는 희귀 조류 관찰을 위해 직원 연락처 정보를 제공하는 것입니다. 그런 다음 직원에게 연락하여 locations.yml 파일을 업데이트할 수 있습니다. staff.yml 폴더에는 이미 _data가 있으며 몇 가지 간단한 콘텐츠(임의로 생성된 이름 및 자리 표시자 이미지)가 있습니다.

이제 지도 아래 locations.html에 새 블록을 추가하기만 하면 됩니다.

    <div class="contact">
      <h2 class="contact__heading">Report a sighting</h2>
      <p>If you think you've spotted an endangered species, please contact one of our friendly staff to let them know.</p>
    </div>
    <div class="staff">
      {% for person in site.data.staff %}
        <div class="staff-member">
          <img class="staff-member__image" src="{{ person.image }}" alt="Image of {{ person.name }}">
          <div>
            <p class="staff-member__name">{{ person.name }}</p>
            <p>Contact options: </p>
            <ul class="staff-member__contacts">
              <li><a class="option" href="#">Email</a></li>
              <li><a class="option" href="#">Facebook</a></li>
              <li><a class="option" href="#">Twitter</a></li>
            </ul>
          </div>
        </div>
      {% endfor %}
    </div>

이렇게 하면 이름, 이미지, 이메일/소셜 미디어에 대한 링크(지금은 홈페이지만)를 포함한 모든 직원 정보가 출력됩니다. 더 많은 정보나 직원을 추가하려는 경우 이제 관리하기가 더 쉬워졌습니다.

무엇 향후 계획?

Jekyll 초급 튜토리얼의 끝입니다. 우리는 Jekyll의 모든 주요 주제를 다루었고 기본적이지만 괜찮아 보이는 사이트를 만들었습니다. 이제 쉽게 유지 관리할 수 있는 정적 사이트를 구성하는 데 자신감을 가지기를 바랍니다.

물론 Jekyll은 CMS가 아닙니다. 사이트를 더 넓은 세상에 배포하고 다른 사람들, 특히 비기술적인 콘텐츠 편집자가 사이트에 기여하도록 하려는 경우 CloudCannon은 사용하기 쉽고 beautiful CMS solution .