Jekyll vs. 11ty Liquid에 대해 알아야 할 5가지 사항은

GitHub 페이지 스타일의 Jekyll에서 새로운 SSG로 마이그레이션할 생각이 있습니까?Eleventy는 당신이 알고 좋아하는 액체 템플릿 언어를 고수할 수 있도록 해 주는 가장 가까운 노름돈일 수도 있습니다.그러나 구성이 잘 된 사이트 생성 모델의 핵심은 Jekyll과 11ty 사이의 작업 방식이 약간 다르다는 것을 포함한다.

1: 이름 지정 포함

제키르
명명된 파일component.html
11ty
명명된 파일component.liquid
2: 참조 포함
제킬은 파일 이름을 인용하지 않았다.네.
매개 변수화 포함을 허용하기 위해 덮어쓰지 않으면 파일 이름 인용을 비활성화할 수 있지만 매개 변수화 포함을 허용해야 한다고 생각합니다.
프로그래밍 방식으로'가변 범위'의 내용을 파라미터가 있는 독립된 업무 논리 세션으로 봉인하는 것은 사이트 템플릿 언어로 인코딩할 때도 좋은 인코딩 실천이다.
개인적으로 저는 매개 변수화된 partials/includes를 매우 좋아합니다. 이것이 바로 제가 11ty에서 11ty의 구축 속도가 Liquid보다 빠르다는 것을 읽었음에도 불구하고 Liquid를 사용하는 이유입니다.
1
제키르

{% include component.html %}

2
11ty

{% include "component.liquid" %}

또는 11ty에서 파일 확장자를 삭제할 수 있습니다.

{% include "component" %}

3: 매개변수를 통해
제킬은 등호를 사용한다.11ty는 사칭을 사용합니다.

제키르

{% include component.html someparam=somevariablename someotherparam="plain text here" %}

11ty

{% include "component" someparam:somevariablename someotherparam:"plain text here" %}

4: 수신 매개변수
매개 변수를 전달할 구성 요소의 코드 라이브러리에서 Jekyll은 접두사.eleventy.js를 사용하여 매개 변수를 참조할 수 있습니다.11ty 없어요.
그 밖에 Jekyll이 이렇게 한 것은 이러한include가 여전히 그들의 상하문을 호출하는 가변 범위에 접근할 수 있기 때문에 범위를 구분해야 한다고 생각한다. (나는 약독하고 있는데 의 깊이는 내가 발견한 것보다 더 깊고 나의 두 번째 언어인 프랑스어에 있다.)한편, 11ty는 매개 변수화include.를 통해 호출된 구성 요소의 코드 라이브러리를 매개 변수로 전달하는 변수로 제한한다.
(편집: 내가 거의 틀렸을 거야. 이 부분을 무시하고 이 메시지가 사라질 때까지. 스크립트의 링크를 참조하세요.)

제키르

<h2>{{ page.title }}</h2>
<p>{{ include.someparam }}</p>

excellent article where this was covered
11ty

<h2>{{ another_param_i_added_to_include_call_because_component_cannot_see_page_dot_url }}</h2>
<p>{{ someparam }}</p>

5: 매개변수 활성화

제키르
Jekyll에는 패라메트릭include 호출이 내장되어 있습니다.넌 아무것도 필요 없어.

11ty
이것은 include 파일의 module.exports = (eleventyConfig) => {} 괄호 안에 넣고 문장을 되돌리기 전의 어딘가에 놓아야 합니다.

// Make Liquid capable of rendering "partials"
eleventyConfig.setLiquidOptions({
  dynamicPartials: true,
  strict_filters: true,
});

추가 로드
원래 이 프랑스어 문장은 라는 번역문이었다. 행운의 우리!그 밖에 어떤 시스템이 '누설' 범위를 가지고 있는지 교환했을 수도 있습니다. 잠시 후에 본문을 검사하고 업데이트할 것입니다.

가격 인하 이전에 대한 잡다한 설명
이것은 include와 무관하지만, 내가 남겨진 태그 파일을 이전할 때 겪은 다른 몇 가지 문제는 다음과 같다.

11ty Markdown 해상도가 Kramdown에서 사용하는 같은 맞춤법으로 .eleventy.js 속성을 제목 표시줄에 추가해서 이전 링크가 끊기지 않도록 해야 합니다. 예를 들어 다음과 같은 강제 섹션이 있는 링크를 포함합니다.

   ### `=` {#equals}

Turn Jekyll up to Eleventy가 나타났을 때, 나는 내가 사체를 대량으로 사용하는 링크를 어떻게 처리하는지 알아야 한다.

아마도 이것은 내가 남긴 id="some-slug" 파일에서 모든 markdown-it-attr 외관을 삭제하고 필요에 따라 프로그래밍 방식으로 링크를 {:target="_blank"}로 해석할 수 있는 좋은 기회일 것이다.

나는 .md가 아닌 새로운 문법을 찾아내야 한다. 그리고 모든 남겨진 _blank 파일이 그것을 정확하게 사용할 수 있도록 해야 한다. 특히 나는 rouge 액체 라벨로 포장된 코드 블록을 사용해야 한다.아마도 나는 할 수 없을 것이다. 아마도 나는 11ty가 원하는 것이 아니라 .md 할 수 있을 것이다.이 범위는 나로 하여금 좋아지게 할 것이다. 나는 틀림없이 예비 프로세서가 필요할 것이다.그리고 제 CSS를 좀 바꾸고 싶습니다.

저는 Prism 테마를 수동으로 편집해야 했습니다. 언어가 없는 Markdown fenced 코드 블록의 디자인 스타일을 선택했습니다.

저는 HTML을 조정해야 합니다. Prism이 raw를 어떤 물건에 포장하는 방법, 예를 들어 Div를 찾을 수 없기 때문에 제 언어 표시부호에'before'스타일을 설정할 수 있는 방법이 없습니다. 그래서 저는 외관과 느낌을 바꾸어 시각적으로 적합하게 해야 합니다<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>xy<span class="kd">zz</span>y</code></pre></div></div>.재수 없어.

<pre class="language-javascript"><code>xyzzy</code></pre> 내가 <pre> 파일의 많은 HTML 표시에서 얻은 <pre> 속성을 이해하지 못하는 것 같아markdown-it HTML 출력에서 빼는 것도 이런 역할을 하는 것 같아. 즉, 이런 속성이 Jekyll & Gatsby를 들어오게 해서 내가 다음에 이 markdown="block" 파일들을 어디로 가져갈지 누가 알겠는가. 그래서 나는 그것을 가져가는 것이 아니라 안에 남겨 두는 것 같아.

나는 반드시 정규 표현식으로 .md부터 .md까지 바꿔야만 클램턴에서 {:target="_blank"}로 전환할 수 있다.작은 파이톤 스크립트를 작성해서 11ty 리포의 루트 폴더에 넣었습니다.

저는 매 게시물의 첫머리{target="_blank"}를 markdown-it-attr로 바꿔야 했습니다. 왜냐하면 11ty는 Jekyll 형식의 날짜를 좋아하지 않기 때문입니다. 이것은 댓글과 다른 내용을 보존하면서 날짜의 값을 재구성하는 것보다 더 쉬운 것 같습니다.작은 파이톤 스크립트를 작성해서 11ty 리포의 루트 폴더에 넣었습니다.

는 현재 date:를 바탕으로 11ty에 정렬 알고리즘을 제공해야 할 수도 있다.아직 게시물 순환 같은 것은 시작되지 않았지만 11ty에서 publish_date:편의 게시물과 페이지를 정확하게 보여주는 데 그쳤다.

나는 Bootstrap을 내 NPM 환경에 설치하고 SASS에 가져와야 한다. 왜냐하면 내가 Jekyll을 사용할 때 사용자 정의 CSS에서 Bootstrap 변수를 사용했다는 사실이 증명되기 때문이다.