헤드 없는 WordPress에서 11ty 사용 방법
headless-wordpress-11ty.netlify.app Netlify에서 위탁 관리한 최종 프로젝트를 보거나, 튜토리얼을 완전히 건너뛰거나 github.com/thedavedavies/Headless-WordPress-11ty Git repo를 볼 수 있습니다.우리 시작합시다!
Eleventy란 무엇입니까?
Eleventy(또는 11ty)는 정적 사이트 생성기로서WordPress 게시물과 페이지를 가져와 구축할 때 데이터를 컴파일할 수 있습니다.이를 통해 WordPress를 헤드 없는 CMS로 사용하고 완전히 정적이며 가벼운 사이트를 Netlify에 배치할 수 있습니다.WordPress REST API 또는 WPGraphQL 엔드포인트를 사용하여 WordPress에서 이러한 데이터를 가져올 수 있습니다.이 자습서에서는 WordPress REST API를 사용합니다.
11ty를 헤드 없는 WordPress와 결합한 이유는 무엇입니까?
현재 매우 좋은 헤더 콘텐츠 관리 시스템(CMS)과 정적 사이트 생성기(SSG)를 선택할 수 있는 것이 많은데, 왜 다른 것이 아니라WordPress를 선택하는가?저는 Word Press에서 10년 넘게 일했고 많은 사이트에서 이 데이터를 사용하고 싶습니다.그 중 일부 사이트는 별도의 기능을 필요로 하지 않기 때문에 완전히 정적 HTML 페이지는 완벽한 해결 방안이다.
Word Press는 또한 활발하고 지원하는 커뮤니티를 가지고 있으며 수천 개의 플러그인으로 어떤 유형의 사이트를 만들 수 있습니다.추가 기능이 필요한 사이트에서도 사용할 수 있습니다.
WordPress를 사용하여 API 가져오기
만약 당신이 이전에 Eleventy를 사용한 적이 없다면, https://www.11ty.dev 에는 대량의 자원이 있다.동시에 새 프로젝트를 만들고 코드 편집기에서 이 프로젝트를 엽니다. (저는 VS 코드를 사용합니다.)
Eleventy를 프로젝트에 설치하려면
package.json 파일이 필요합니다.npm init -y로 만듭니다.-y 매개 변수는 npm에 모든 문제를 건너뛰고 기본값만 사용하라고 알려 줍니다.npm init -y
npm install --save-dev @11ty/eleventy node-fetch
WordPress REST API에서 데이터를 가져올 11ty 프로젝트 준비
Eleventy와 node fetch 패키지를 설치한 후 프로젝트의 루트 디렉터리에 data라는 새 디렉터리를 만들고 이 새 data 폴더에posts라는 파일을 만듭니다.js. 데이터 디렉터리는 우리의 모든 글로벌 데이터를 제어하는 곳이다.예를 들어 WordPress REST API를 사용하여 우리의 단점을 방문하고 우리의 댓글과 페이지를 가져오는 것을 의미합니다.
루트 디렉토리로 돌아가서 layouts라는 새 디렉토리를 생성하고 layouts 내부에 layouts라는 새 파일을 생성합니다.njk.
What's with the .njk file extension?
The .njk file extension means that we're using Nunjucks as a templating language. You can easily use 10 different templating languages in 11ty (or a mixture of them all) so whilst we're using Nunjucks, if there's a different template language you're more comfortable using, then go ahead and use that.
마지막으로, 다시 루트 디렉터리로 돌아가서 index라는 새 파일을 만듭니다.njk와posts.njk.
새 디렉토리와 파일을 추가하면 항목이 다음 화면 캡처와 비슷해야 합니다.
Creating a .gitignore file
While a .gitignore file isn't essential to testing out the WordPress REST API with 11ty, it's highly recommended for when you want to deploy your site. Here's the .gitignore settings I'm using for this project:
_site/
_tmp/
.DS_Store
node_modules/
package-lock.json
.env*
1단계: WordPress REST API에서 post 데이터 가져오기
현재 우리는 이미 기초를 갖추고 있으며, 우리의 기초 프로젝트를 세웠다. 우리는 코드를 작성해서WordPress로부터 우리의 댓글을 얻기 시작할 것이다.
당신의 데이터/댓글로 가세요.js 파일에서 다음 코드를 추가합니다.
const fetch = require("node-fetch");
module.exports = async function () {
console.log("Fetching data...");
return fetch("https://fake-data.better-wordpress.dev/wp-json/wp/v2/posts")
.then((res) => res.json())
.then((json) => json);
};
브라우저 API만 사용할 수 있고 NodeJS에서fetch를 사용할 수 없습니다.node fetch 패키지를 사용하면 NodeJS에서fetch를 사용할 수 있습니다.그리고 우리는 비동기 함수를 설정할 것입니다. 이 함수는 약속이 되돌아오기를 기대합니다. 이것이 바로 우리가 실행할 때 발생한 일입니다.
단계 1.5: 잡기 테스트
그런 다음
return fetch("https://fake-data.better-wordpress.dev/wp-json/wp/v2/posts") 파일을 열고 스크립트 속성에 다음 두 개의 스크립트를 추가합니다."scripts": {
"start": "npx @11ty/eleventy --serve",
"build": "npx @11ty/eleventy"
},
패키지의 스크립트 속성입니다.json 파일에서 미리 정의된 스크립트를 실행할 수 있습니다.위의 시작 및 구축 스크립트가 추가되면, 핫 리셋된 로컬 웹 서버를 시작하고,
package.json 출력 폴더에 템플릿을 컴파일할 수 있습니다. (기본값 site)우리는 이번 사냥에서 무엇을 얻었습니까?
이전에 data/posts에서 작성한 비동기 함수입니다.js가 우리에게 JSON 대상을 되돌려주고 우리는 그것을 사용할 수 있습니다.WordPress REST API에서 데이터가 성공적으로 반환되었는지 확인하려면 함수의 final
npm run start을 anpm run build로 변경할 수 있습니다.return fetch("https://fake-data.better-wordpress.dev/wp-json/wp/v2/posts")
.then((res) => res.json())
.then((json) => console.log(json);
.then 스크립트를 실행합니다.만약 캡처 과정이 순조롭다면 아래 화면 캡처와 같은 출력을 보게 될 것입니다. JSON 데이터는 콘솔에 로그인됩니다.
2단계: 레이아웃 템플릿 만들기
이제 WordPress REST API에서 게시물을 성공적으로 얻었습니다. 이 데이터를 표시할 템플릿을 만들 수 있습니다.
If you changed your fetch function to
console.log(JSON)the JSON data, then make sure you now return it to how it was in Step 1.
당신의 포함/배치에 있습니다.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>{{ posts.title.rendered }}</title>
</head>
<body>
{{ content | safe }}
</body>
</html>
매우 간단합니다. 위의 코드는 우리가 데이터를 표시하는 데 사용하는 HTML을 구축했습니다.
console.log()는 우리가 JSON 대상에서 얻은 제목 대상이다.npm run start은 레이아웃 템플릿이 하위 템플릿의 내용으로 데이터를 채운다는 것을 의미한다.{{ posts.title.rendered }} 필터를 사용하면 이중 이스케이프 출력을 방지할 수 있습니다. (이것은 Nunjucks에 내장된 것입니다.)3단계: 색인 페이지 만들기
이제 브라우저에서 내용을 볼 수 있습니다!색인에 있습니다.njk 파일, 다음 코드 붙여넣기:
---
pagination:
data: posts
size: 2
layout: layout.njk
title: "Latest Posts"
---
<ol>
{%- for item in pagination.items %}
<li>
<a href="/posts/{{ item.title.rendered | slug }}">
{{ item.title.rendered }}</li>
</a>
{% endfor -%}
</ol>
<nav>
<ol>
<li>
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">Previous</a>
{% else %}Previous{% endif %}
</li>
{%- for pageEntry in pagination.pages %}
<li>
<a href="{{ pagination.hrefs[ loop.index0 ] }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page" {% endif %}>Page
{{ loop.index }}</a>
</li>
{%- endfor %}
<li>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">Next</a>
{% else %}Next{% endif %}
</li>
</ol>
</nav>
Nunjucks는 front matter를 사용하여 웹 사이트를 구축할 때 템플릿으로 처리합니다.그렇다면 이 전선은 어떤 작용을 하는가?
페이지를 나누어 데이터 집합을 훑어본 다음 하나의 데이터 블록에 페이지를 만듭니다.
데이터:posts에서 저희의 데이터/댓글을 가져오고 있습니다.js는 데이터 집합으로 되어 있습니다.데이터의 전단 값은 우리의 데이터 파일과 일치해야 합니다.따라서 파일 이름이 data/pages인 경우js, 그러면 우리의 가장 중요한 문제는 데이터: 페이지입니다.
{{ content | safe }}WordPress에서 저희가 미리 구축한 게시물의 페이지 목록을 볼 수 있습니다!
4단계: 개별 게시물에 대한 템플릿 만들기
Google 사이트를 시작하기 전에 마지막으로 해야 할 일은 Google 게시물의 템플릿을 만드는 것입니다.다음 코드를 게시물에 붙여넣습니다.njk:
--------
pagination:
data: posts
size: 1
alias: posts
permalink: "posts/{{ posts.title.rendered | slug }}/"
layout: layout.njk
--------
<h1>{{ posts.title.rendered }}</h1>
<div class="mainContent">
{{posts.content.rendered | safe}}
</div>
우리 부서의 최첨단 문제.njk 파일은 우리의 인덱스와 유사합니다.njk, 그러나 이번에 우리의 페이지 크기는 1에 불과합니다. 우리는 slug에서 하나를 사용했습니다alias.
11ty는 많은 필터를 제공합니다. 우리는 그것을 우리의 내용에 전달할 수 있습니다.여기서, 우리는 slug 필터를 사용하여 우리의 URL을 'slagify' 하고, WordPress REST API에서 되돌아오는 HTML을 다시 보안 필터로 보여 줍니다.
마지막으로, 우리는 완전히 구축(하지만 매우 유행에 뒤떨어지는) 사이트가 있는데, 이것은 우리의 기존의WordPress 사이트에서 채워진 것이다!우리의 마지막 임무는 이 사이트를 Netlify에 배치하는 것이다.
5단계: 11개 사이트를 Netlify로 호스팅
Netlify는 기능이 강한 무서버 위탁 관리 플랫폼으로git 기반의 작업 흐름과 매우 관대한 무료 층을 직관적으로 갖추고 있다.이것은 Git를 사용하면 Git Repo에 정적 11ty 사이트를 배치할 수 있음을 의미합니다. 제출할 때마다 복구를 터치할 수 있도록 Git Repo에 Netlify를 연결할 수 있습니다.
이때 가장 좋은 방법은 코드에서 API 끝점 URL을 제거하고 사용하는 것입니다.env 파일이 아니라따라서 설치dotenv 패키지를 통해 이 점을 실현할 수 있습니다:
content.다음에 하나를 만듭니다.프로젝트 루트 디렉터리의 env 파일입니다.모든 비밀 끝점 URL을 추가할 곳입니다.니가 하나 만들었으면gitignore 파일이 있는지 확인하십시오.파일의 env* 입니다.이것은git에게 모든 내용을 무시하라고 알려 줍니다.환경 파일.너의 문을 열어라.env 파일, WordPress REST API 단점에 붙여넣고 변수를 첨부하여 --e.e.:
safe에 링크다음은 11ty가 우리를 알고 있다는 것을 확보해야 한다.env 파일을 만듭니다.엘레빈티.js 파일(파일 시작점 참고) 및 다음 코드를 붙여넣습니다.
module.exports = function () {
require("dotenv").config();
};
저기요.엘레빈티.js 파일은 사용자 정의 사이트 범위의 모든 설정을 저장하지만, 현재 우리가 전달해야 할 것은 우리의dotenv 설정뿐입니다.할 수 있다read more about Eleventy configuration.
마지막으로 저희의 데이터/댓글에서.js 파일, 프로세스로 단점 URL을 바꿀 수 있습니다.환경WORDPRESS\u REST\u API\u URL.Git repo에 코드를 안전하게 전송할 수 있으며 기밀 엔드포인트 URL이나 기밀 유지 API 키를 공개할 필요가 없습니다.
Netlify는 이미 deploying your site에 매우 깊은 블로그 글을 발표했기 때문에 이 점을 따라 Netlify에 당신의 사이트를 구축하십시오.그러나 사이트를 배치하기 전에 '고급 구축 설정' 을 누르고 로컬 사이트에서 환경 키와 값을 추가하는 것이 우리가 하고자 하는 보충이다.env 파일 (아직 당신에게 제출하지 않은 환매 협의).
망했다!
우리 망했어!WordPress REST API에서 Google 게시물을 가져오고 Eleventy를 사용하여 정적 사이트로 구축한 다음 Netlify에 배치하는 아주 높은 개념 검증 프로젝트가 있습니다.
웹 사이트 스타일을 디자인하고WordPressREST API가 제공하는 다양한 페이지와 다른 데이터를 얻는 등 다양한 일을 할 수 있습니다.
Reference
이 문제에 관하여(헤드 없는 WordPress에서 11ty 사용 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thedavedavies/how-to-use-11ty-with-headless-wordpress-and-deploy-to-netlify-3i73텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
