110초 110: 렌더 플러그인 1부
3344 단어 11tyjamstackjavascript
플러그인을 시작하려면 플러그인을 요구한 다음 초기화하여
.eleventy.js 구성 파일에 플러그인을 설치해야 합니다.const { EleventyRenderPlugin } = require("@11ty/eleventy");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(EleventyRenderPlugin);
}
프로젝트에 추가하는 두 개의 단축 코드는
renderTemplate 및 renderFile 입니다.이 부분에서는
renderTemplate를 다룰 것입니다.renderTemplate 일치하는 두 개의 단축 코드 사이에 문자열을 넣고 해당 문자열을 현재 템플릿과 다른 템플릿 언어로 렌더링할 수 있습니다.renderTemplate 태그 사용
<!-- ...head, etc. -->
<body>
<p>The date is: {{ today | date: "%B %d, %y" }}</p>
</body>
여기에 Nunjucks 색인 페이지가 있습니다. 이 페이지에는 날짜 시간이 있습니다. 인간을 위해 읽는 것은 좋지 않습니다. 템플릿에서 필터를 사용하여 형식을 다시 지정하고 싶지만 Nunjucks에는 날짜 필터가 없습니다! 이제 내 프로젝트에 renderTemplate 쌍 단축 코드가 있으므로 작업을 시작할 수 있습니다.
{% renderTemplate "liquid", settings %}
<p>The date is: {{ today | date: "%B %d, %y" }}</p>
{% endrenderTemplate %}
renderTemplate 태그는 두 가지 인수를 허용합니다. 사용하려는 템플릿 언어(
html,liquid,ejs,md,hbs,mustache,haml,pug,njk,11ty.js와 같이 EleventyConfig가 허용하는 임의의 template string) 및 선택적 데이터 세트입니다.이 경우 Liquid로 문자열을 렌더링하고 현재 날짜를 생성하는 설정 전역 JavaScript 데이터 파일에서 변수를 가져오고 싶습니다.
renderTemplate와 endRenderTemplate 사이의 항목은 Nunjucks 대신 Liquid로 렌더링됩니다.이를 통해 액체의 강력한 날짜 필터를 사용하여 JS 데이터 파일(settings.js)로 생성된 날짜 시간 문자열의 형식을 지정할 수 있습니다.
또는 더 간단한 사용 사례의 경우 때때로 Markdown을 작성하는 것이 HTML을 작성하는 것보다 더 인체공학적이므로 HTML에 약간의 Markdown을 포함하는 것이 좋습니다.
{% renderTemplate "liquid,md" %}
# I am a title
* I am a list
* I am a list
1. I am an ordered list
1. i'm actually second in an ordered list test
{% endrenderTemplate %}
템플릿 엔진이 완전히 다운되었습니다!
이 플러그인은 많은 새로운 가능성의 문을 열어줍니다. 모든 템플릿 언어는 모든 페이지 또는 템플릿에 포함될 수 있습니다! 11ty: 끝까지 템플릿입니다!
코드만 원하십니까? 11ty Second 11ty repo에서 이것과 다른 것들을 확인하세요!
Reference
이 문제에 관하여(110초 110: 렌더 플러그인 1부), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brob/11ty-second-11ty-the-render-plugin-part-1-4p9m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
