11ty Second 11ty: 전역 데이터 파일(JS 및 JSON)

6881 단어 11tyjamstackjavascript
이 두 동영상에서는 각각 110초씩 11ty의 글로벌 데이터 파일을 사용하여 JSON으로 정적 데이터를 가져오고 JavaScript로 동적(빌드 시) 데이터를 가져오는 방법을 논의합니다.

110개의 JSON 데이터 파일




이번 에피소드에서는 글로벌 데이터 파일에 대해 이야기하겠습니다. 특히 JSON 데이터 파일. 자, 110초, 가자!

11ty는 the data cascade 이라는 개념을 가지고 있고, 이 영상에서는 자세히 다루지 않겠지만 글로벌 데이터 파일이 가장 낮은 우선순위라는 점을 언급할 필요가 있습니다. 구성 API를 사용하면 API가 해당 데이터를 덮어씁니다.

시작하려면 베어본 11ty 사이트가 있습니다. 우리가 가진 것은 색인 파일뿐입니다. 전역 데이터를 추가하려면 파일을 저장할 디렉터리가 필요합니다. 기본값은 _data 디렉토리입니다.

우리는 그것과 json 데이터 파일을 만들 것입니다. 파일 이름은 템플릿의 데이터에 액세스하는 데 사용할 키가 됩니다. 이 경우 이름을 siteSetting.json 로 지정합니다.

우리는 매우 간단한 사이트 설정 데이터 파일을 만들 것입니다. 나중에 여러 템플릿에서 원할 수 있는 전역 정보입니다.

그런 다음 여기에 몇 가지 데이터와 함께 JSON 개체를 넣습니다. 여기서는 개체를 사용하고 있지만 유효한 JSON은 배열을 포함하여 작동합니다.

{
  “name”: “Data Example”,
  “description”: “A data example site for 11ty second 11ty”
}


이것이 저장되면 인덱스 템플릿(또는 다른 템플릿... 전역적입니다. 그렇죠?)에서 액세스할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>11ty Second 11ty: Data Example</h1>
    {{ siteSetting.name }}
    {{ siteSetting.description }}
</body>
</html>


11ty JS 데이터 파일로 빌드 시 동적 콘텐츠





이제 이것은 정적 콘텐츠에 대해 작동하지만 빌드당 일부 동적 콘텐츠를 추가하려면 어떻게 해야 합니까? 바닥글에 저작권 날짜를 말하십시오.

Javascript 데이터 파일로 그렇게 할 수 있습니다.
siteSetting.json 파일을 복사하여 settings.js 파일로 이동해 보겠습니다.

여기에서 module.exports를 사용하도록 다시 포맷하고 이 개체를 내보냅니다.

이제 JavaScript의 내장 Date 메서드를 사용하여 간단한 저작권 속성을 추가하겠습니다. 전체 날짜 시간을 생성하고 템플릿에서 형식을 지정합니다.

module.exports = {
  "name": "settings",
  "description": "Settings for the bot",
  "date": new Date(),
}


그런 다음 이것을 index.html 파일에 추가합니다.

<body>
  <h1>11ty Second 11ty: Data Example</h1>
  {{ siteSetting.name }}
  {{ siteSetting.description }}

  {{ settings.date | date: "%Y" }}

</body>


날짜는 괜찮지만 다른 API를 눌러 콘텐츠를 얻으려면 어떻게 해야 할까요? JS 데이터 파일은 간단한 경우에도 잘 작동합니다.

먼저 새 데이터 파일을 만듭니다: pokemon.js
여기서는 학습 목적으로 아주 간단한 API인 PokeAPI에 API 호출을 할 것입니다. 이 경우 Axios(설치되어 있는지 확인)를 사용하지만 node-fetch 또는 최신 노드 내장 가져오기도 작동합니다.

이번에는 함수를 내보내고 액세스하려는 항목의 배열을 반환합니다. 이 경우. 응답에는 data 배열이 있는 results 개체가 있습니다.

const axios = require('axios');

module.exports = async function () {
    // pokemon api call
    const response = await axios.get('https://pokeapi.co/api/v2/pokemon/?limit=151');
    const pokemon = response.data.results;

    return pokemon
}




<ol>
  {% for pokemon in pokemon %}
      <li>{{ pokemon.name }}</li>
  {% endfor %}
</ol>


이것은 데이터 파일 사용의 기본 사항일 뿐입니다. 배열, 중첩, 외부 API 호출, 데이터 변환 등 JSON 또는 자바스크립트에서 수행할 수 있는 모든 작업을 이러한 파일에서 수행할 수 있습니다.
pytorch3d 동작 확인시 메모
관련 게시물의 외부 소스 이미지 표시 수정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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