eleventy 11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy Let's Learn 11ty Part 2: 부분, 스타일링 및 이미지 지난 기사에서 우리는 우리 사이트의 기초를 설정했습니다. 이제 좀 더 멋지게 만들기 위해 더 추가할 예정입니다. 부분 파일은 탐색, 바닥글과 같이 많이 변경되지 않는 사이트 전체에서 반복되는 정보/데이터를 포함하는 파일입니다. 이제 사이트를 좀 더 잘 구성할 때입니다. 내비게이션을 먼저 만들어 봅시다 우리의 src 폴더에서 about.md 파일을 만들고 여기에 넣습니다. 이제 _include... ssgeleventywebdev 11ty를 배우자 6부: 플러그인 그러나 플러그인부터 시작하여 기능을 개선하기 위해 할 수 있는 일이 더 있습니다. 플러그인은 추가 기능을 구현하기 위해 Eleventy로 가져올 수 있는 외부 코드 조각입니다. Eleventy의 특성으로 인해 공식 플러그인(@11ty 접두어 아래)과 커뮤니티 기여 플러그인이 모두 있습니다. Edge: Eleventy 사이트에 콘텐츠를 동적으로 추가하기 위해 Edge 기능에서 Eleventy를... ssgtutorialeleventywebdev 11ty를 배우자 7부: 순풍 추가 이 기사는 내 작업 흐름에 따라 어제 올라갈 예정이었습니다. 그러나 기술적인 문제, 즉 내 ISP를 처리해야 했습니다. 내가 당신에게 말하는 재미없는 시간 ... You do not have to add Tailwind to your site. 시간 낭비하지 말고 바로 시작합시다. 터미널을 열고 다음 명령을 실행합니다. 프로젝트의 루트에서 다음을 사용하여 postcss.config.js를 만... ssgwebdeveleventytutorial Let's Learn 11ty Part 10: 모두 함께 가져오기 지난 기사에서 우리는 외부 데이터를 사용하여 사이트의 게시물을 렌더링했습니다. 알아차리셨다면 이전에 게시물 하단에 있던 멋진 이전/다음 게시물이 없습니다. 이것이 이 기사의 주요 초점입니다. 먼저 로컬 게시물을 사용하여 게시물 페이지 매기기가 이전에 어떻게 생겼는지 살펴보겠습니다. 위에서 우리는 Eleventy의 초석 중 하나인 컬렉션을 사용하고 있었습니다. 이 방법은 Hashnode에서 가... ssgtutorialeleventywebdev Eleventy - Codepen 삽입을 위한 단축 코드 Don't know what eleventy is? Before you read further, check out this amazing by to know more about and static site generators in general. Eleventy는 단축 코드를 사용하여 템플릿에 콘텐츠를 매우 간단하게 포함할 수 있도록 합니다. 단축 코드는 전달된 정보를 기반으로 일부 html... eleventywebdevbeginnersjavascript Eleventy 설정하기 Eleventy용 Git 기반 CMS인 에서 제공하는 초보자용 Eleventy 자습서에 오신 것을 환영합니다. 이 시리즈에서는 프레임워크 설치 방법 학습, 레이아웃, 페이지 및 블로그 게시물 작성, 데이터 파일 사용 소개부터 Eleventy의 기본 사항을 살펴보겠습니다. 처음부터 모든 것을 구축하고 진행하면서 Eleventy 개념을 설명하므로 사전 Eleventy 지식이 필요하지 않습니다. ... eleventytutorialbeginnersjamstack Eleventy의 템플릿 변수를 출력하고, 배열을 반복하고, 사용자 지정 플러그인을 실행하여 데이터를 생성할 수 있습니다. 이전에 사용했던 중괄호{{ }}는 유동 템플릿입니다. Liquid는 HTML 및 Markdown 파일의 기본 템플릿 언어이며 이 시리즈 전체에서 사용할 것입니다. Liquid가 보트를 띄우지 못하는 경우 Eleventy에는 , , , , 및 을 비롯한 다양한 템플릿 언어가 내장되어 있습니다. 또... eleventytutorialbeginnersjamstack 일레븐티 파셜 작성자: Eleventy용 Git 기반 CMS인 에서 제공했습니다. 부분은 반복을 줄이거나 복잡성을 숨기기 위해 레이아웃에 코드 스니펫을 포함하는 방법입니다. 이 강의에서는 부분을 사용하여 사이트에 내비게이션 바를 추가합니다. 기존 레이아웃에 탐색 표시줄을 추가할 수 있지만 수천 줄의 파일을 확장하는 것보다 작은 구성 요소로 세분화된 사이트를 유지 관리하는 것이 더 쉽습니다. 부분은 우리가 ... eleventytutorialbeginnersjamstack Eleventy의 블로깅 간단한 Eleventy 블로그는 두 가지 다른 페이지 유형으로 구성됩니다. 개별 블로그 게시물을 표시하는 페이지입니다. 이 강의에서는 이러한 페이지 유형이 함께 작동하여 고유한 블로그를 만드는 방법을 보여줍니다. 컬렉션은 콘텐츠를 그룹화하여 흥미로운 방식으로 나열, 페이지 매기기, 필터링을 수행할 수 있는 방법입니다. 블로그 목록 페이지 만들기 먼저 모든 블로그 게시물을 나열할 페이지를 만들... eleventytutorialbeginnersjamstack Eleventy 글로벌 데이터 파일 이 마지막 수업에서 우리는 지금까지 배운 모든 것을 주머니쥐를 발견할 수 있는 최고의 장소를 나열하는 하나의 멋진 페이지에 담을 것입니다. 글로벌 데이터 파일을 사용하면 .json 또는 .js 파일을 _data라는 디렉토리에 넣을 수 있으며 데이터는 모든 템플릿/콘텐츠 파일에서 사용할 수 있습니다. 먼저, 상위 opossum 명소가 포함된 글로벌 데이터 파일을 생성합니다. 우리 사이트에 마커... eleventybeginnerstutorialjamstack Eleventy의 캐시 무효화: Sass를 사용한 더 간단한 방법 2020년 말에 I Eleventy 사이트의 CSS에서 "캐시 무효화"를 수행하여 대부분의 웹 브라우저가 최신 스타일을 안정적으로 표시하도록 하는 방법에 대해 설명했습니다. 게다가 SSG의 내장된 자산 파이프라인인 을 통해 에서 수행할 수 있는 방법보다 훨씬 복잡합니다. : 및 에 의해 최근 도입된 두 가지 Eleventy 플러그인의 형태로 제공됩니다. 전자는 Sass-to-CSS 컴파일을 ... eleventycsscachesass Eleventy 프로그레시브 웹 앱 을 잡았습니다! 이 사이트의 대부분의 페이지는 로 "Four Hundos"점수를 매겼지만 최근에야 설치 가능 을 얻기 위해 서비스 작업자를 추가했습니다. Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with prog... 11tylighthousepwaeleventy Eleventy에 FaunaDB 연결 네, 데이터가 있습니다.많지는 않지만 충분히 보여줄 수 있다.어떻게 Eleventy에 들어갑니까?Eleventy의 더 재미있는 특징 중 하나는 입니다.이 파일들은 사이트의 나머지 부분에 데이터를 제공한다.예를 들어, 하드 인코딩된 제품을 만들어서 제품이라고 명명할 수 있습니다.json: 정적 데이터는 매우 유용할 수 있지만, 분명히 우리는 FaunaDB 데이터를 사용할 수 있기를 희망한다.일... staticsiteseleventyfaunada Eleventy 웹사이트에 생성기 메타 태그 추가 그들이 당신을 위해 생성한 HTML 코드를 본 적이 있습니까? 나는 실제로 그랬고 그들이 모든 HTML 페이지의 HEAD 블록에 다음과 같은 흥미로운 코드를 추가했던 것을 기억합니다. 이 태그는 실제로 페이지의 모양과 느낌에 아무런 영향을 미치지 않지만 호기심 많은 사람(예: HTML 코드에 숨어 있는 사람)에게 웹사이트를 생성하는 데 사용된 도구를 알려주는 데 사용됩니다. 그렇다면 Elev... staticsiteeleventyjamstackjavascript 11ty 및 Cloudinary가 있는 자동 개방형 그래픽 이미지 게시물 데이터, Cloudinary API, 소셜 공유에 사용되는 Eleventy (11ty) 를 사용하여 모든 블로그 게시물이나 노트에 유일한 OG 이미지를 자동으로 생성하는 방법을 찾고 싶습니다. 이 솔루션의 목적은 모든 게시물에 대해 수동으로 블로그 게시물 이미지를 만들지 않고 소셜 미디어 사이트(예를 들어 트위터)에서 블로그 게시물을 공유할 때 더욱 돋보이게 하는 시간을 절약하는 것이... 11tyeleventycloudinaryssg 11ty에서 웹 구성 요소 사용 이 글은 제 개인 블로그 를 구축하는 데 관련된 일을 묘사하고 더 많은 세부 사항과 현장 프레젠테이션을 마음대로 읽을 수 있습니다 . 나는 이 블로그를 통해 일을 기초로 되돌리고 인터넷 기초, 예를 들어 html과 css에 중점을 두고 싶다.이외에도 11ty를 사용하면 Markdown에서 창작을 할 수 있습니다. 우선, 나는 이 사이트에서 웹 구성 요소를 사용하는 방법을 토론하고 싶다.모든 ... 11tywebcomponentseleventyjavascript
11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy Let's Learn 11ty Part 2: 부분, 스타일링 및 이미지 지난 기사에서 우리는 우리 사이트의 기초를 설정했습니다. 이제 좀 더 멋지게 만들기 위해 더 추가할 예정입니다. 부분 파일은 탐색, 바닥글과 같이 많이 변경되지 않는 사이트 전체에서 반복되는 정보/데이터를 포함하는 파일입니다. 이제 사이트를 좀 더 잘 구성할 때입니다. 내비게이션을 먼저 만들어 봅시다 우리의 src 폴더에서 about.md 파일을 만들고 여기에 넣습니다. 이제 _include... ssgeleventywebdev 11ty를 배우자 6부: 플러그인 그러나 플러그인부터 시작하여 기능을 개선하기 위해 할 수 있는 일이 더 있습니다. 플러그인은 추가 기능을 구현하기 위해 Eleventy로 가져올 수 있는 외부 코드 조각입니다. Eleventy의 특성으로 인해 공식 플러그인(@11ty 접두어 아래)과 커뮤니티 기여 플러그인이 모두 있습니다. Edge: Eleventy 사이트에 콘텐츠를 동적으로 추가하기 위해 Edge 기능에서 Eleventy를... ssgtutorialeleventywebdev 11ty를 배우자 7부: 순풍 추가 이 기사는 내 작업 흐름에 따라 어제 올라갈 예정이었습니다. 그러나 기술적인 문제, 즉 내 ISP를 처리해야 했습니다. 내가 당신에게 말하는 재미없는 시간 ... You do not have to add Tailwind to your site. 시간 낭비하지 말고 바로 시작합시다. 터미널을 열고 다음 명령을 실행합니다. 프로젝트의 루트에서 다음을 사용하여 postcss.config.js를 만... ssgwebdeveleventytutorial Let's Learn 11ty Part 10: 모두 함께 가져오기 지난 기사에서 우리는 외부 데이터를 사용하여 사이트의 게시물을 렌더링했습니다. 알아차리셨다면 이전에 게시물 하단에 있던 멋진 이전/다음 게시물이 없습니다. 이것이 이 기사의 주요 초점입니다. 먼저 로컬 게시물을 사용하여 게시물 페이지 매기기가 이전에 어떻게 생겼는지 살펴보겠습니다. 위에서 우리는 Eleventy의 초석 중 하나인 컬렉션을 사용하고 있었습니다. 이 방법은 Hashnode에서 가... ssgtutorialeleventywebdev Eleventy - Codepen 삽입을 위한 단축 코드 Don't know what eleventy is? Before you read further, check out this amazing by to know more about and static site generators in general. Eleventy는 단축 코드를 사용하여 템플릿에 콘텐츠를 매우 간단하게 포함할 수 있도록 합니다. 단축 코드는 전달된 정보를 기반으로 일부 html... eleventywebdevbeginnersjavascript Eleventy 설정하기 Eleventy용 Git 기반 CMS인 에서 제공하는 초보자용 Eleventy 자습서에 오신 것을 환영합니다. 이 시리즈에서는 프레임워크 설치 방법 학습, 레이아웃, 페이지 및 블로그 게시물 작성, 데이터 파일 사용 소개부터 Eleventy의 기본 사항을 살펴보겠습니다. 처음부터 모든 것을 구축하고 진행하면서 Eleventy 개념을 설명하므로 사전 Eleventy 지식이 필요하지 않습니다. ... eleventytutorialbeginnersjamstack Eleventy의 템플릿 변수를 출력하고, 배열을 반복하고, 사용자 지정 플러그인을 실행하여 데이터를 생성할 수 있습니다. 이전에 사용했던 중괄호{{ }}는 유동 템플릿입니다. Liquid는 HTML 및 Markdown 파일의 기본 템플릿 언어이며 이 시리즈 전체에서 사용할 것입니다. Liquid가 보트를 띄우지 못하는 경우 Eleventy에는 , , , , 및 을 비롯한 다양한 템플릿 언어가 내장되어 있습니다. 또... eleventytutorialbeginnersjamstack 일레븐티 파셜 작성자: Eleventy용 Git 기반 CMS인 에서 제공했습니다. 부분은 반복을 줄이거나 복잡성을 숨기기 위해 레이아웃에 코드 스니펫을 포함하는 방법입니다. 이 강의에서는 부분을 사용하여 사이트에 내비게이션 바를 추가합니다. 기존 레이아웃에 탐색 표시줄을 추가할 수 있지만 수천 줄의 파일을 확장하는 것보다 작은 구성 요소로 세분화된 사이트를 유지 관리하는 것이 더 쉽습니다. 부분은 우리가 ... eleventytutorialbeginnersjamstack Eleventy의 블로깅 간단한 Eleventy 블로그는 두 가지 다른 페이지 유형으로 구성됩니다. 개별 블로그 게시물을 표시하는 페이지입니다. 이 강의에서는 이러한 페이지 유형이 함께 작동하여 고유한 블로그를 만드는 방법을 보여줍니다. 컬렉션은 콘텐츠를 그룹화하여 흥미로운 방식으로 나열, 페이지 매기기, 필터링을 수행할 수 있는 방법입니다. 블로그 목록 페이지 만들기 먼저 모든 블로그 게시물을 나열할 페이지를 만들... eleventytutorialbeginnersjamstack Eleventy 글로벌 데이터 파일 이 마지막 수업에서 우리는 지금까지 배운 모든 것을 주머니쥐를 발견할 수 있는 최고의 장소를 나열하는 하나의 멋진 페이지에 담을 것입니다. 글로벌 데이터 파일을 사용하면 .json 또는 .js 파일을 _data라는 디렉토리에 넣을 수 있으며 데이터는 모든 템플릿/콘텐츠 파일에서 사용할 수 있습니다. 먼저, 상위 opossum 명소가 포함된 글로벌 데이터 파일을 생성합니다. 우리 사이트에 마커... eleventybeginnerstutorialjamstack Eleventy의 캐시 무효화: Sass를 사용한 더 간단한 방법 2020년 말에 I Eleventy 사이트의 CSS에서 "캐시 무효화"를 수행하여 대부분의 웹 브라우저가 최신 스타일을 안정적으로 표시하도록 하는 방법에 대해 설명했습니다. 게다가 SSG의 내장된 자산 파이프라인인 을 통해 에서 수행할 수 있는 방법보다 훨씬 복잡합니다. : 및 에 의해 최근 도입된 두 가지 Eleventy 플러그인의 형태로 제공됩니다. 전자는 Sass-to-CSS 컴파일을 ... eleventycsscachesass Eleventy 프로그레시브 웹 앱 을 잡았습니다! 이 사이트의 대부분의 페이지는 로 "Four Hundos"점수를 매겼지만 최근에야 설치 가능 을 얻기 위해 서비스 작업자를 추가했습니다. Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with prog... 11tylighthousepwaeleventy Eleventy에 FaunaDB 연결 네, 데이터가 있습니다.많지는 않지만 충분히 보여줄 수 있다.어떻게 Eleventy에 들어갑니까?Eleventy의 더 재미있는 특징 중 하나는 입니다.이 파일들은 사이트의 나머지 부분에 데이터를 제공한다.예를 들어, 하드 인코딩된 제품을 만들어서 제품이라고 명명할 수 있습니다.json: 정적 데이터는 매우 유용할 수 있지만, 분명히 우리는 FaunaDB 데이터를 사용할 수 있기를 희망한다.일... staticsiteseleventyfaunada Eleventy 웹사이트에 생성기 메타 태그 추가 그들이 당신을 위해 생성한 HTML 코드를 본 적이 있습니까? 나는 실제로 그랬고 그들이 모든 HTML 페이지의 HEAD 블록에 다음과 같은 흥미로운 코드를 추가했던 것을 기억합니다. 이 태그는 실제로 페이지의 모양과 느낌에 아무런 영향을 미치지 않지만 호기심 많은 사람(예: HTML 코드에 숨어 있는 사람)에게 웹사이트를 생성하는 데 사용된 도구를 알려주는 데 사용됩니다. 그렇다면 Elev... staticsiteeleventyjamstackjavascript 11ty 및 Cloudinary가 있는 자동 개방형 그래픽 이미지 게시물 데이터, Cloudinary API, 소셜 공유에 사용되는 Eleventy (11ty) 를 사용하여 모든 블로그 게시물이나 노트에 유일한 OG 이미지를 자동으로 생성하는 방법을 찾고 싶습니다. 이 솔루션의 목적은 모든 게시물에 대해 수동으로 블로그 게시물 이미지를 만들지 않고 소셜 미디어 사이트(예를 들어 트위터)에서 블로그 게시물을 공유할 때 더욱 돋보이게 하는 시간을 절약하는 것이... 11tyeleventycloudinaryssg 11ty에서 웹 구성 요소 사용 이 글은 제 개인 블로그 를 구축하는 데 관련된 일을 묘사하고 더 많은 세부 사항과 현장 프레젠테이션을 마음대로 읽을 수 있습니다 . 나는 이 블로그를 통해 일을 기초로 되돌리고 인터넷 기초, 예를 들어 html과 css에 중점을 두고 싶다.이외에도 11ty를 사용하면 Markdown에서 창작을 할 수 있습니다. 우선, 나는 이 사이트에서 웹 구성 요소를 사용하는 방법을 토론하고 싶다.모든 ... 11tywebcomponentseleventyjavascript