Google 시트와 Eleventy로 편집 가능한 사이트를 만듭니다

이 튜토리얼은 Google Sheets와 Eleventy를 사용하여 편집 가능한 웹 사이트를 구축하는 것을 보여줍니다. 우리는 Eleventy의 정적 사이트 생성 기능을 활용하여 빌드 프로세스 중에 데이터를 가져 오면 로딩 시간이 빠르고 보안이 향상됩니다. 이렇게하면 클라이언트 측 JavaScript가 모든 페이지보기에서 데이터를 가져올 필요가 없습니다.

문제 : 지속적인 고객 개정

개발자는 종종 현장 출시 후에도 고객의 끝없는 컨텐츠 개정의 도전에 직면합니다. 이 반복 과정은 시간이 많이 걸리고 파괴적 일 수 있습니다.

이 솔루션은 고객이 친숙한 도구 인 Google 시트를 사용하여 콘텐츠를 독립적으로 업데이트 할 수 있도록합니다.

Eleventy 소개

이전 기사는 Tabletop.js를 사용하여 Google 시트와 상호 작용했지만이 접근법은 정적 사이트 생성기 인 Eleventy를 통합합니다. Eleventy는 사이트를 순수한 정적 사이트로 렌더링하여 데이터 처리를위한 클라이언트 측 JavaScript를 포함 할 필요가 없습니다. 빌드 프로세스 중에 컨텐츠가 가져와 고도로 최적화 된 index.html 파일을 만듭니다. 이 정적 접근 방식은 페이지로드 속도 및 보안을 향상시킵니다.

Google 시트 설정

Google 시트는 데이터 저장소 역할을합니다. 열 헤더를 사용하여 데이터를 참조로 구성하는 새 스프레드 시트를 작성하십시오 (예 : "헤더", "바디"). 이 헤더는 JavaScript 코드에서 참조됩니다. 콘텐츠로 시트를 채우십시오.

다음으로 시트를 웹에 게시하십시오 (파일 → 웹에 게시). 생성 된 링크는 직접 사용되지 않지만이 단계는 스프레드 시트 데이터에 공개적으로 액세스 할 수 있도록합니다. URL의 고유 한 시트 ID에 유의하십시오. 나중에 필요합니다.

node.js 및 프로젝트 설정

node.js가 필요합니다. 간소화 된 설정의 경우 제공된 저장소를 복제하고 실행하십시오.

 NPM 설치
NPM 러닝 시드
NPM Run Dev

npm run seed 명령은 중요합니다. Google 시트의 데이터와 함께 로컬 JSON 파일 ( src/site/_data/dev/sheet.json )을 미리 인과하여 개발 중에 반복 된 API 호출이 필요하지 않습니다.

데이터 가져 오기 및 변환 (src/site/_data/prod/sheet.js)

핵심 논리는 src/site/_data/prod/sheet.js 에 있습니다. 이 스크립트는 Axios를 사용하여 Google 시트의 데이터를 가져오고이를 사용 가능한 JavaScript 객체로 변환하며 개발을 위해 로컬 JSON 사본을 저장합니다. sheetID 시트의 고유 한 ID로 교체해야합니다.

 module.exports = () => {
  새로운 약속을 반환합니다 ((결의, 거부) => {
    Console.log (`$ {GOOGLESHEETURL}`)에서 컨텐츠 요청;
    axios.get (googlesheeturl)
      . 그런데 (응답 => {
        var data = {content : []};
        response.data.feed.entry.foreach (item => {
          data.content.push ({
            헤더 : item.gsx $ 헤더. $ t,
            header2 : item.gsx $ header2. $ t,
            // ... 다른 필드 ...
          });
        });
        seed (json.stringify (data),`$ {__ dirname} /../ dev/sheet.json`);
        해결 (데이터);
      })
      .catch (error => {
        console.log ( 'error :', error);
        거부 (오류);
      });
  });
};

스크립트는 forEach 사용하여 시트의 항목을 통해 반복하고 열 헤더를 객체 속성에 매핑합니다. seed 기능은 데이터를 JSON으로 저장합니다.

nunjucks (또는 선호하는 엔진)로 템플릿

변환 된 JSON 데이터는 Nunjucks와 같은 템플릿 엔진으로 쉽게 사용할 수 있습니다. 예를 들어:

<div>
  {% - Sheet.Content의 항목 -%}
    <h1 id="item-header">{{item.header}}</h1>
  {% -endfor-%}
</div>

선택한 템플릿 엔진 및 데이터 구조에 적응하십시오.

건축 및 배치

사이트 구축 :

 NPM 실행 빌드

이것은 dist 폴더에서 정적 사이트를 생성합니다. Google 시트 업데이트 후 자동 배포의 경우 Zapier를 통합하여 Google Sheets와 호스팅 플랫폼 (예 : NetLify)을 연결하십시오. 새 또는 업데이트 된 행이 Google 시트에 추가 될 때마다 NetLify 배포를 트리거하도록 ZAP를 구성하십시오. 이로 인해 완벽한 자동 워크 플로가 생성됩니다.

이 포괄적 인 접근 방식은 자동화 된 배포가있는 성능의 편집 가능한 웹 사이트를 제공하여 개발 워크 플로 및 클라이언트 협업을 크게 향상시킵니다.

위 내용은 Google 시트와 Eleventy로 편집 가능한 사이트를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!