11ty를 배우자 1부: 설치 및 설정
Eleventy 작동 방식
Eleventy는 가능한 한 적은 자바스크립트를 제공하는 것을 목표로 합니다. 소스 파일을 html로 렌더링하고 해당 정적 파일을 제공함으로써 이를 수행합니다.
템플릿
템플릿은 Eleventy에서 다양한 페이지를 만드는 방법입니다. 3개 이상의 템플릿 언어를 지원합니다. 그들 중 일부는 특히:
이것이 의미하는 바는 사이트 작성 방법에 대한 몇 가지 옵션이 있다는 것입니다. 이 튜토리얼에서는 템플릿에 마크다운과 nunjucks를 사용할 것입니다.
요구 사항
이 단계에서는 3가지만 필요합니다.
노드가 설치되어 있는지 확인한 다음 이 자습서를 계속 진행하십시오.
설정
mkdir learneleventy
cd learneleventy
package.json 파일을 초기화합니다.npm init -y
npm install --save-dev @11ty/eleventy
프로젝트 구성
기본적으로 Eleventy는 프로젝트 루트 파일을 사용하여 사이트를 생성합니다. 여기에 모든 파일을 배치하면 작동합니다. 나는
src 폴더가 있는 보다 정렬된 접근 방식을 선호합니다. 다행스럽게도 Eleventy를 사용하면 소스 파일을 찾는 경로를 수정할 수 있습니다.프로젝트 루트에서
.eleventy.js라는 파일을 만들고 다음을 배치합니다.module.exports = function(eleventyConfig){
return {
dir: {
input: "src",
data: "_data",
includes: "_includes",
layouts: "_layouts"
}
};
}
이것은 우리 프로젝트의 구성 파일입니다. 여기에서 우리는 프로젝트가 어떻게 작동하기를 원하는지 정의합니다. 지금은:
src로 설정했습니다._includes - Eleventy가 이 폴더를 찾습니다_layouts로완료되면 루트에
src를 만들고 파일이 이동할 위치입니다. 나중에 사용할 src에 두 개의 폴더를 더 만들어 보겠습니다. _layouts 및 _includesindex.md의 루트에 src 파일을 만들고 더미 콘텐츠를 넣어봅시다.# My Eleventy Site
I am a site made with Eleventy
프로젝트 실행
사이트를 실행하려면 터미널에 이 명령을 입력하십시오.
npx eleventy --serve
귀하의 사이트는
http://localhost:8080/에서 개발 중입니다. 또한 _site 폴더가 생성된 것을 확인할 수 있습니다. 여기에 렌더링된 파일이 저장됩니다.
프로젝트를 실행할 때 항상 이것을 작성해야 하는 것은 원하지 않으므로
package.json에 스크립트를 추가해 보겠습니다. "scripts": {
"start": "eleventy --serve"
},
잡았다
If we were to change anything in our index.md, those changes would not show unless reloaded the page. Eleventy requires a valid html document structure to facilitate that.
첫 번째 템플릿
이제 Eleventy 프로젝트에서 템플릿을 구현해 보겠습니다.
src/_layouts에서 base.njk라는 파일을 만듭니다.<!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>My Eleventy Site</title>
</head>
<body>
{{content | safe}}
</body>
</html>
보시다시피 그것은 단지 html 문서입니다. 다른 점은
{{content | safe}} 입니다. 이것은 우리 기지에 의해 포장된 모든 콘텐츠가 갈 곳입니다.| safe 부분은 Eleventy에 콘텐츠를 렌더링해도 안전하다고 알려주는 필터입니다.그런 다음 색인을 다음과 같이 수정합니다.
---
layout: base
---
# My Eleventy Site
I am a site built with [Eleventy](https://www.11ty.io/).
YAML frontmatter를 추가하고 이 파일을 래핑할 레이아웃을 지정했습니다.
이제 소스 파일에 대한 모든 변경 사항이 자동으로 업데이트됩니다. 또한 이제 페이지에 제목이 있지만 아무 말도 하지 않습니다
localhost:8080.NOTE : You can override the template languages in your project if you want to use anything other than markdown an nunjucks.
템플릿에서 변수 사용
일반적으로 사이트의 각 페이지에는 고유한 제목이 있습니다. 제목을 하드코딩했습니다. 페이지 제목이 동적으로 적용되도록 개선해 보겠습니다.
이것으로 우리 기지를 수정하십시오
<title>My Eleventy Site - {{title}}</title>
그런 다음 index.md YAML과 thiis
---
layout: base
title: Home
---
이제 탭 위로 마우스를 가져가면 My Eleventy 사이트 - 홈이 표시됩니다.
결론
많은 것을 하지 않고 웹사이트를 구축했습니다. 지금은 보기에 좋지 않을 수 있지만 유효한 웹페이지입니다.
이 사이트에 더 많은 것을 추가하면 다음 부분에서 저와 함께 하십시오.
이 시리즈의 작업 저장소는 여기에서 찾을 수 있습니다.
https://github.com/Psypher1/learneleventy
Reference
이 문제에 관하여(11ty를 배우자 1부: 설치 및 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/psypher1/lets-learn-11ty-part-1-installation-setup-3c0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
