11ty Second 11ty: 템플릿 필터 만들기
5141 단어 11tywebdevjamstackjavascript
내장 필터 사용
기본 제공 필터를 사용하려면 선택한 언어로 변수 또는 표현식을 작성하십시오. 페이지에 "hi there"라는 문자열을 표시하는 액체 템플릿이 있습니다.
<body>
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" }}</h2>
</body>
그런 다음 파이프 문자와 필터 이름을 추가하십시오. 이 경우 내장 slugify 필터는 문자열을 URL에 적합한 문자열로 변환합니다.
<body>
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" | slugify }}</h2>
</body>
<!-- Outputs: <h2>hi-there</h2>
맞춤 필터 만들기
다음으로 사용자 지정 필터를 만들려면 구성 파일이 있어야 합니다. 프로젝트 루트에
.eleventy.js를 생성합니다.거기에서
eleventyConfig 개체가 있는 함수를 내보내고 해당 개체에 addFilter 메서드를 사용합니다.이 메서드는 템플릿에서 사용할 필터 이름과 데이터를 변경하는 데 사용할 함수라는 두 가지 속성을 사용합니다.
이 경우 대문자 필터를 만들어 문자열을 모두 대문자로 변환합니다. 우리가 만들 함수는 필터가 적용되는 문자열의 첫 번째 인수를 취합니다. 이 경우 Javascript에서
string.toUpperCase()를 사용하여 변경된 문자열을 반환합니다.module.exports = function(eleventyConfig) {
eleventyConfig.addFilter("uppercase", function(string) {
return string.toUpperCase();
})
}
그런 다음 템플릿에서 이것을 사용할 수 있습니다.
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" | uppercase }}</h2>
문자열 주변의 마크업도 조정할 수 있습니다. 이 경우 필터에서 문자열의 색상을 조정하는 나쁜 생각을 할 것입니다. 필터에서 첫 번째 이후의 모든 인수는 필터에 전달할 수 있는 옵션입니다. 이 경우 색상 문자열입니다. 문자열을 범위로 감싸고 색상을 인라인으로 설정할 수 있습니다.
module.exports = function(eleventyConfig) {
eleventyConfig.addFilter("uppercase", function(string) {
return string.toUpperCase();
})
eleventyConfig.addFilter("color", function(string, color) {
return `<span style="color: ${color}">${string}</span>`;
})
}
그런 다음 템플릿에서 이것을 사용할 수 있습니다.
<h1>11ty Second 11ty: Filter Example</h1>
<h2>{{ "hi there" | color: "red" }}</h2>
그리고 더!
필터는 11ty 빌드의 매우 강력한 부분이 될 수 있습니다. 소스에 관계없이 즉석에서 데이터를 변경할 수 있습니다. Javascript에서 수행할 수 있는 모든 작업은 필터에서 수행할 수 있으므로 Nunjucks(Liquid에서만 사용 가능)에 대한 날짜 문자열 필터 생성, 배열 재정렬 또는 일반적인 사용 사례를 위한 강력한 HTML 템플릿 세트 생성과 같은 작업을 수행해 보십시오. 마크업 또는 마크다운.
Reference
이 문제에 관하여(11ty Second 11ty: 템플릿 필터 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brob/11ty-second-11ty-creating-template-filters-40k1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
