Eleventy 글로벌 데이터 파일

작성자: Mike Neumegen

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

이 마지막 수업에서 우리는 지금까지 배운 모든 것을 주머니쥐를 발견할 수 있는 최고의 장소를 나열하는 하나의 멋진 페이지에 담을 것입니다.

전역 데이터 파일이란 무엇입니까?

글로벌 데이터 파일을 사용하면 .json 또는 .js 파일을 _data라는 디렉토리에 넣을 수 있으며 데이터는 모든 템플릿/콘텐츠 파일에서 사용할 수 있습니다. .js 파일은 빌드 시 실행되며 외부 소스에서 데이터를 가져오거나 다른 계산을 수행하여 데이터 세트를 생성하는 좋은 방법입니다.

첫 번째 데이터 파일 만들기

먼저, 상위 opossum 명소가 포함된 글로벌 데이터 파일을 생성합니다. 사이트의 루트와 내부_data에 다음 내용으로 디렉터리locations.json를 만듭니다.

    [
      {
        "name": "Kentucky Ridge State Forest",
        "latitude": "36.736700",
        "longitude": "-83.762480"
      },
      {
        "name": "Amity Park",
        "latitude": "35.932640",
        "longitude": "-82.006000"
      },
      {
        "name": "Mill Creek Park",
        "latitude": "40.030819",
        "longitude": "-122.115387"
      },
        {
        "name": "Willamette National Forest",
        "latitude": "44.058990",
        "longitude": "-122.484970"
      },
        {
        "name": "The Mound",
        "latitude": "32.490819",
        "longitude": "-80.320408"
      }
    ]

지도 포함

우리 사이트에 마커가 있는 지도를 넣는 것과 마커 배열을 전달하고 플롯할 수 있는 재사용 가능한 구성 요소를 만드는 것은 또 다른 일입니다. 후자를 사용하면 지도에 마커 목록을 표시하고 싶을 때마다 이 지도 구성요소를 재사용할 수 있습니다.

이것을 재사용 가능한 구성 요소로 만들기 위해 배열이 전달될 것으로 예상하는 부분을 생성합니다. 다음 콘텐츠로 생성/_includes/_map.html:

    <div id="map"></div>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""></script>
    <script>
      let markers = {{ markers | json }};
    </script>
    <script src="/assets/map.js"></script>

여기에서 많은 일이 일어나고 있습니다. 설명하겠습니다.

먼저 지도를 담을 지도 요소가 있습니다.

그런 다음 지도에 멋진 핀과 팝업을 만드는 데 도움이 되는 Leaflet용 스타일시트를 로드합니다.

다음은 전단지 JavaScript 파일입니다.

그런 다음 마커 목록을 JSON으로 출력합니다.

마지막으로 곧 생성할 /assets/map.js를 참조합니다. 지도 초기화 및 마커 추가를 담당합니다.

JavaScript를 추가하여 지도를 초기화하고 마커를 추가해 보겠습니다. 다음 콘텐츠로 생성/assets/map.js:

const map = L.map('map'); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
    .addTo(map);

let bounds = [];
for (let i = 0; i < markers.length; i++ ) {
    const marker = L.marker([markers[i].latitude, markers[i].longitude]).addTo(map);
    marker.bindPopup(markers[i].name);
    bounds.push([markers[i].latitude, markers[i].longitude]);
    }

    map.fitBounds(bounds);

우리는 자바스크립트를 배우기 위해 여기에 있는 것이 아니므로 이것을 해독(또는 해독)하도록 남겨두겠습니다.

마지막 단계는 실제로 포함을 사용하는 것입니다. /about.md를 열고 다음을 추가합니다.

    {% include "_map.html" markers:locations %}

이것은 우리가 이전에 생성한 위치 글로벌 데이터 파일을 맵 부분으로 전달합니다.

브라우저를 실행하고 정보 페이지로 이동하여 모든 노력에 감탄하십시오.

무엇 향후 계획?

이것은 Eleventy 여정의 시작일 뿐입니다. 이제 기본 Eleventy 사이트를 구축할 수 있는 기술이 있습니다. 여정을 계속하기 위해 제가 추천하는 몇 가지 리소스가 있습니다.

Eleventy documentation은 Eleventy가 제공하는 모든 것을 배울 수 있는 훌륭한 리소스입니다

.

Eleventy Discord은 지원을 받고 커뮤니티와 연결할 수 있는 좋은 장소입니다.

마지막으로 간단히 언급하고 싶습니다CloudCannon. Eleventy를 최고 수준으로 지원하는 콘텐츠 관리 시스템입니다. Git 리포지토리와 직접 동기화되므로 콘텐츠 팀이 사이트의 콘텐츠를 관리하는 동안 개발 팀이 Eleventy에서 계속 작업할 수 있습니다. 그것은 두 세계의 최고입니다.

읽어 주셔서 감사합니다. Eleventy와 함께 계속 발전해 나가세요!