11ty 11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy 11ty 사이트의 RSS 피드 데이브 루퍼트 @davatron5000 RSS: 트위터와 비슷하지만 좋아하는 출판물에서 선택할 수 있는 좋은 기사가 너무 많아서 스트레스가 생기고 압도적인 파멸과 바보 같은 분위기에서 덜 스트레스를 받습니다. 오후 13:54 - 2020년 9월 22일 맞습니다. Really Simple Syndication 또는 은 사람들이 광고, 미끼 클릭 및 스팸의 포격을 받지 않고 자신이 선택한 RSS... xmlrss11ty 110초 110: 렌더 플러그인 1부 Render 플러그인은 Nunjucks, Liquid 또는 JS 템플릿에서 사용할 수 있는 두 개의 단축 코드로 구성됩니다. 기본 11ty NPM 패키지와 함께 번들로 제공되며 11ty를 설치하는 즉시 사용할 수 있는 플러그인입니다. 프로젝트에 추가하는 두 개의 단축 코드는 renderTemplate 및 renderFile 입니다. 이 부분에서는 renderTemplate를 다룰 것입니다. ... 11tyjamstackjavascript 11ty Second 11ty: 전역 데이터 파일(JS 및 JSON) 이 두 동영상에서는 각각 110초씩 11ty의 글로벌 데이터 파일을 사용하여 JSON으로 정적 데이터를 가져오고 JavaScript로 동적(빌드 시) 데이터를 가져오는 방법을 논의합니다. 이번 에피소드에서는 글로벌 데이터 파일에 대해 이야기하겠습니다. 특히 JSON 데이터 파일. 11ty는 이라는 개념을 가지고 있고, 이 영상에서는 자세히 다루지 않겠지만 글로벌 데이터 파일이 가장 낮은 우선... 11tyjamstackjavascript 11ty Second 11ty: 템플릿 필터 만들기 11ty 템플릿 필터는 선택한 템플릿 언어로 변수 태그의 데이터를 조작하는 방법입니다. 각 템플릿 언어는 자체 집합을 가져오고 11ty는 몇 가지 기본값도 추가합니다. 기본 제공 필터를 사용하려면 선택한 언어로 변수 또는 표현식을 작성하십시오. 페이지에 "hi there"라는 문자열을 표시하는 액체 템플릿이 있습니다. 그런 다음 파이프 문자와 필터 이름을 추가하십시오. 이 경우 내장 slug... 11tywebdevjamstackjavascript 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 11ty 웹사이트에 SEO 추가 site.json에 _data 파일 만들기 base.njk 또는 추가한 메인njk에 추가하십시오<head>. 개방형 그래프 이미지를 자동으로 생성하려면 이 문서를 참조하십시오 . 루트 디렉토리에 sitemap.njk를 만듭니다. 자동으로 sitemap.xml.가 됩니다. 만들다 robots.txt... seowebdev11ty Puppeter, 11ty 및 Netlify와 이미지 자동 공유 Netlify 구축에서 Puppeter와 자동으로 소셜 공유 캡처를 할 수 있도록 의 강력하고 유연한 템플릿 기능을 이용하여 템플릿을 만드는 방법을 알아보십시오. 이것은 이제 패키지/플러그인으로 Eleventy 사이트나 다른 SSG에 쉽게 추가할 수 있습니다. 기존의 데이터 집합을 사용하여 새로운 레이아웃 템플릿을 정의할 수 있습니다. 데이터에서 동적 템플릿을 생성한 경우 해당 위치에 새 파... 11tywebdevtutorialnetlify 11ty 블로그에 Webmentions 구현 에 대한 소개가 있었습니다. 이제 이 블로그에서 이를 사용하고 구현해 보겠습니다. Webmentions는 다음과 같이 표시됩니다. 가입은 을 사용하므로 다음과 같이 웹사이트에 링크가 있어야 합니다. Twitter 프로필에 웹사이트 도메인이 포함되어 있는지 확인하세요. 이제 우리는 웹멘션을 받을 수 있지만 솔직히 누가 우리에게 웹멘션을 보낼까요? 이를 위해 과 같은 호스팅 서비스를 사용할 수 ... 11tyblogwebdevwebmention 11ty 및 Cloudinary가 있는 자동 개방형 그래픽 이미지 게시물 데이터, Cloudinary API, 소셜 공유에 사용되는 Eleventy (11ty) 를 사용하여 모든 블로그 게시물이나 노트에 유일한 OG 이미지를 자동으로 생성하는 방법을 찾고 싶습니다. 이 솔루션의 목적은 모든 게시물에 대해 수동으로 블로그 게시물 이미지를 만들지 않고 소셜 미디어 사이트(예를 들어 트위터)에서 블로그 게시물을 공유할 때 더욱 돋보이게 하는 시간을 절약하는 것이... 11tyeleventycloudinaryssg 11ty에서 웹 구성 요소 사용 이 글은 제 개인 블로그 를 구축하는 데 관련된 일을 묘사하고 더 많은 세부 사항과 현장 프레젠테이션을 마음대로 읽을 수 있습니다 . 나는 이 블로그를 통해 일을 기초로 되돌리고 인터넷 기초, 예를 들어 html과 css에 중점을 두고 싶다.이외에도 11ty를 사용하면 Markdown에서 창작을 할 수 있습니다. 우선, 나는 이 사이트에서 웹 구성 요소를 사용하는 방법을 토론하고 싶다.모든 ... 11tywebcomponentseleventyjavascript 느린 전면 프레임 버리기 를 건설할 때, 나는 가능한 한 일을 가장 기본적인 상태로 돌아가게 하고 싶다. HTML/Markdown과 같은 이식 가능한 형식으로 작성되어 내 내용을 다른 위치에 발표할 수 있습니다. ✅ HTML/Markdown과 같은 이식 가능한 형식으로 작성되어 내 내용을 다른 위치에 발표할 수 있습니다. 그리고 나서 나는 나의 템플릿에서 이 외부 데이터를 사용할 수 있다. 11ty의 창설자는 초보자... 11tyjavascript 웹 공유 API 및 메타 태그를 사용하여 네이티브 공유 이 API를 사용하면 사용자가 원하는 곳에서 자유롭게 채팅 응용 프로그램, 소셜 미디어에서 notes 응용 프로그램에 이르기까지 콘텐츠를 공유할 수 있다. 글의 마지막 부분에서 저는 모든 중요한 html원 표기를 토론하여 사이트/응용 프로그램이 당신의 내용을 잘 미리 볼 수 있도록 했습니다. 이 점에서, 당신은 생각할 수 있다. 우리는 전 세계 사용자의 55% 를 차지하지만, 데이터에 따르면... 11tywebdevjavascript 11ty를 사용하여 20줄 미만 코드에 블로그 만들기 11ty 웹 사이트(11ty.dev)를 열면 빠른 시작 부분을 볼 수 있습니다.3개의 명령을 사용하면 첫 번째 사이트를 설정할 수 있습니다. 당신의 개인 사이트를 위해 블로그를 만드는 것은 매우 쉽다.첫 번째 단계는 레이아웃 파일을 만드는 것일 수 있습니다. 이제 루트 디렉터리에 blog 라는 디렉터리를 만들고 post-1 라는 디렉터리를 만듭니다.post-1 디렉터리에서 index.md 라... tutorial11tywebdevbeginners 프로덕션 환경에서 Eleventy의 JS 축소 이 튜토리얼은 11ty 프레임워크용으로 작성되었으며 Netlify에서 앱을 호스팅할 예정입니다. Cloudflare 및 Vercel과 같은 다른 플랫폼도 이와 유사한 지원을 제공합니다. 이 자습서의 목표는 로컬 개발 환경의 속도를 높이고(코드를 로컬에서 축소하는 데 리소스를 사용하지 않음) 프로덕션 환경에서 자바스크립트 코드가 축소되었는지 확인하는 것입니다. 1) 환경 변수를 사용할 수 있도... eleventy11tyterserminification
11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy 11ty 사이트의 RSS 피드 데이브 루퍼트 @davatron5000 RSS: 트위터와 비슷하지만 좋아하는 출판물에서 선택할 수 있는 좋은 기사가 너무 많아서 스트레스가 생기고 압도적인 파멸과 바보 같은 분위기에서 덜 스트레스를 받습니다. 오후 13:54 - 2020년 9월 22일 맞습니다. Really Simple Syndication 또는 은 사람들이 광고, 미끼 클릭 및 스팸의 포격을 받지 않고 자신이 선택한 RSS... xmlrss11ty 110초 110: 렌더 플러그인 1부 Render 플러그인은 Nunjucks, Liquid 또는 JS 템플릿에서 사용할 수 있는 두 개의 단축 코드로 구성됩니다. 기본 11ty NPM 패키지와 함께 번들로 제공되며 11ty를 설치하는 즉시 사용할 수 있는 플러그인입니다. 프로젝트에 추가하는 두 개의 단축 코드는 renderTemplate 및 renderFile 입니다. 이 부분에서는 renderTemplate를 다룰 것입니다. ... 11tyjamstackjavascript 11ty Second 11ty: 전역 데이터 파일(JS 및 JSON) 이 두 동영상에서는 각각 110초씩 11ty의 글로벌 데이터 파일을 사용하여 JSON으로 정적 데이터를 가져오고 JavaScript로 동적(빌드 시) 데이터를 가져오는 방법을 논의합니다. 이번 에피소드에서는 글로벌 데이터 파일에 대해 이야기하겠습니다. 특히 JSON 데이터 파일. 11ty는 이라는 개념을 가지고 있고, 이 영상에서는 자세히 다루지 않겠지만 글로벌 데이터 파일이 가장 낮은 우선... 11tyjamstackjavascript 11ty Second 11ty: 템플릿 필터 만들기 11ty 템플릿 필터는 선택한 템플릿 언어로 변수 태그의 데이터를 조작하는 방법입니다. 각 템플릿 언어는 자체 집합을 가져오고 11ty는 몇 가지 기본값도 추가합니다. 기본 제공 필터를 사용하려면 선택한 언어로 변수 또는 표현식을 작성하십시오. 페이지에 "hi there"라는 문자열을 표시하는 액체 템플릿이 있습니다. 그런 다음 파이프 문자와 필터 이름을 추가하십시오. 이 경우 내장 slug... 11tywebdevjamstackjavascript 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 11ty 웹사이트에 SEO 추가 site.json에 _data 파일 만들기 base.njk 또는 추가한 메인njk에 추가하십시오<head>. 개방형 그래프 이미지를 자동으로 생성하려면 이 문서를 참조하십시오 . 루트 디렉토리에 sitemap.njk를 만듭니다. 자동으로 sitemap.xml.가 됩니다. 만들다 robots.txt... seowebdev11ty Puppeter, 11ty 및 Netlify와 이미지 자동 공유 Netlify 구축에서 Puppeter와 자동으로 소셜 공유 캡처를 할 수 있도록 의 강력하고 유연한 템플릿 기능을 이용하여 템플릿을 만드는 방법을 알아보십시오. 이것은 이제 패키지/플러그인으로 Eleventy 사이트나 다른 SSG에 쉽게 추가할 수 있습니다. 기존의 데이터 집합을 사용하여 새로운 레이아웃 템플릿을 정의할 수 있습니다. 데이터에서 동적 템플릿을 생성한 경우 해당 위치에 새 파... 11tywebdevtutorialnetlify 11ty 블로그에 Webmentions 구현 에 대한 소개가 있었습니다. 이제 이 블로그에서 이를 사용하고 구현해 보겠습니다. Webmentions는 다음과 같이 표시됩니다. 가입은 을 사용하므로 다음과 같이 웹사이트에 링크가 있어야 합니다. Twitter 프로필에 웹사이트 도메인이 포함되어 있는지 확인하세요. 이제 우리는 웹멘션을 받을 수 있지만 솔직히 누가 우리에게 웹멘션을 보낼까요? 이를 위해 과 같은 호스팅 서비스를 사용할 수 ... 11tyblogwebdevwebmention 11ty 및 Cloudinary가 있는 자동 개방형 그래픽 이미지 게시물 데이터, Cloudinary API, 소셜 공유에 사용되는 Eleventy (11ty) 를 사용하여 모든 블로그 게시물이나 노트에 유일한 OG 이미지를 자동으로 생성하는 방법을 찾고 싶습니다. 이 솔루션의 목적은 모든 게시물에 대해 수동으로 블로그 게시물 이미지를 만들지 않고 소셜 미디어 사이트(예를 들어 트위터)에서 블로그 게시물을 공유할 때 더욱 돋보이게 하는 시간을 절약하는 것이... 11tyeleventycloudinaryssg 11ty에서 웹 구성 요소 사용 이 글은 제 개인 블로그 를 구축하는 데 관련된 일을 묘사하고 더 많은 세부 사항과 현장 프레젠테이션을 마음대로 읽을 수 있습니다 . 나는 이 블로그를 통해 일을 기초로 되돌리고 인터넷 기초, 예를 들어 html과 css에 중점을 두고 싶다.이외에도 11ty를 사용하면 Markdown에서 창작을 할 수 있습니다. 우선, 나는 이 사이트에서 웹 구성 요소를 사용하는 방법을 토론하고 싶다.모든 ... 11tywebcomponentseleventyjavascript 느린 전면 프레임 버리기 를 건설할 때, 나는 가능한 한 일을 가장 기본적인 상태로 돌아가게 하고 싶다. HTML/Markdown과 같은 이식 가능한 형식으로 작성되어 내 내용을 다른 위치에 발표할 수 있습니다. ✅ HTML/Markdown과 같은 이식 가능한 형식으로 작성되어 내 내용을 다른 위치에 발표할 수 있습니다. 그리고 나서 나는 나의 템플릿에서 이 외부 데이터를 사용할 수 있다. 11ty의 창설자는 초보자... 11tyjavascript 웹 공유 API 및 메타 태그를 사용하여 네이티브 공유 이 API를 사용하면 사용자가 원하는 곳에서 자유롭게 채팅 응용 프로그램, 소셜 미디어에서 notes 응용 프로그램에 이르기까지 콘텐츠를 공유할 수 있다. 글의 마지막 부분에서 저는 모든 중요한 html원 표기를 토론하여 사이트/응용 프로그램이 당신의 내용을 잘 미리 볼 수 있도록 했습니다. 이 점에서, 당신은 생각할 수 있다. 우리는 전 세계 사용자의 55% 를 차지하지만, 데이터에 따르면... 11tywebdevjavascript 11ty를 사용하여 20줄 미만 코드에 블로그 만들기 11ty 웹 사이트(11ty.dev)를 열면 빠른 시작 부분을 볼 수 있습니다.3개의 명령을 사용하면 첫 번째 사이트를 설정할 수 있습니다. 당신의 개인 사이트를 위해 블로그를 만드는 것은 매우 쉽다.첫 번째 단계는 레이아웃 파일을 만드는 것일 수 있습니다. 이제 루트 디렉터리에 blog 라는 디렉터리를 만들고 post-1 라는 디렉터리를 만듭니다.post-1 디렉터리에서 index.md 라... tutorial11tywebdevbeginners 프로덕션 환경에서 Eleventy의 JS 축소 이 튜토리얼은 11ty 프레임워크용으로 작성되었으며 Netlify에서 앱을 호스팅할 예정입니다. Cloudflare 및 Vercel과 같은 다른 플랫폼도 이와 유사한 지원을 제공합니다. 이 자습서의 목표는 로컬 개발 환경의 속도를 높이고(코드를 로컬에서 축소하는 데 리소스를 사용하지 않음) 프로덕션 환경에서 자바스크립트 코드가 축소되었는지 확인하는 것입니다. 1) 환경 변수를 사용할 수 있도... eleventy11tyterserminification