느린 전면 프레임 버리기

본고는 내가 11ty를 공부할 때 사용한 서로 다른 자원을 상세하게 소개하여 나의 개인 사이트를 구축했다.이것은 교과서가 아니다. 그것은 나의 여정을 묘사하는 것이다. 내가 취한 몇 가지 절차가 다른 사람들을 도울 수 있기를 바란다.
griffa.dev를 건설할 때, 나는 가능한 한 일을 가장 기본적인 상태로 돌아가게 하고 싶다.
나는 쓰고 싶다.

HTML

CSS

및 vanilla JS/Node JS

나는:

가능한 한 적게 구축

HTML/Markdown과 같은 이식 가능한 형식으로 작성되어 내 내용을 다른 위치에 발표할 수 있습니다. 예를 들어.

프런트엔드 JavaScript 및 프런트엔드 구축 도구(웹 패키지/요약 등)가 거의 없음

JavaScript 사용자 정의 사이트로 생성할 수 있습니다. 이것은 제가 가장 잘 알고 있기 때문입니다.

나는

유연하지 않은 프레임워크

관리할 서버

React를 사용합니다. 저는 업무 중에 계속 사용하고 있습니다. 저는 이것에 대해 싫증을 느낍니다. 이것은 단지 복잡성을 층층이 끌어들이는 것입니다.

이상의 모든 내용을 고려하여 저는 연구를 했습니다. 그 중에서 일부는 본 시리즈Part 1에서 연구를 했습니다. 저는 정적 사이트 생성기를 사용하고 싶습니다. 제가 선택한 도구는 Eleventy (11ty)입니다.

Beau is looking sad because I told him i'm not using React, but I didn't want a slow website, so sorry mate.

그래, 내가 11ty를 좋아하지 않는 유일한 일은 11ty로 썼는지 Eleventy로 썼는지 확실하지 않다는 것이다. 나는 창립자가 단지 우리를 속이고 있다고 생각한다. 왜냐하면 트위터 계정@eleven_ty이라도.응, "ty", "ty"는 Eleventy를 대표한다.

무엇이 11ty입니까

"Eleventy는 더 간단한 정적 사이트 생성기"를 인용합니다. 단순은 맞습니다. 태그 파일부터 시작하여 이 파일에서 HTML 페이지를 생성할 수 있습니다.

npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy

이것은 하나의 기호이다.
✅ HTML/Markdown과 같은 이식 가능한 형식으로 작성되어 내 내용을 다른 위치에 발표할 수 있습니다.
✅ 가능한 한 적게 구축하다.
구축에 있어서 분명히 일이 더욱 복잡해질 것이다. 그러나 제로 코드와 제로 설정부터 나에게 있어서 큰 승리이다. 나는 개인적으로 당신이 프로젝트를 시작할 때 첫 번째 건의는 수백 개의 의존항을 설치하는 것을 정말 좋아하지 않는다. (Create React App 참조)
"Eleventy는 제로 템플릿 클라이언트 JavaScript를 의미하는 JavaScript 프레임워크가 아닙니다."
✅ 프런트엔드 JavaScript 및 프런트엔드 구축 도구가 거의 없음(패키지/요약 등)
사용자 정의의 경우 11ty는 다음과 같습니다.

.eleventy.js 이것은 구성 형식으로 활동 생태계를 가진 플러그인 구조를 가지고 있다.
예제 플러그인은 코드 세그먼트에 구문 강조 표시를 추가하는 것입니다.

// .eleventy.js
module.exports = (eleventyConfig) => {
    const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
    eleventyConfig.addPlugin(pluginSyntaxHighlight);
};

다른 사용자 정의의 경우 정적 또는 동적 데이터를 템플릿에 끌어다 놓을 수 있는 데이터 파일이 있습니다.

다음은 데이터 파일의 사용 예입니다. https://github.com/Georgegriff/griffadev/blob/main/src/_data/external.js
이 코드에 외부 링크와 외부 공유 데이터를 추가했습니다. 이 데이터는 템플릿에서 제공됩니다.
그리고 나서 나는 나의 템플릿에서 이 외부 데이터를 사용할 수 있다. 이것은 매우 쉽다.

<nav aria-label="Social Sharing">
  <ul class="social-share">
    {% set genericShareData = external.genericShare.data(title, tags, page) %}
        <li><button class="native-share" style="display: none;" hidden data-title="{{genericShareData.title}}" data-url="{{genericShareData.url}}" data-text="{{genericShareData.text}}" aria-label="Native share">{% include 'img/share.svg' %}</button></li>
    {%- for link in external.sharing %}
        <li><a class="icon-share url-share" title="{{link.text}}" target="_blank" href="{{link.url(title, tags, page) | url}}" class="action external">{% include link.icon %}</a></li>
    {%- endfor %}
  </ul>
</nav>

만약 네가 내가 보기에 HTML과 같지 않다고 생각한다면, 너는 옳다. 이것은 템플릿 언어이다.
11ty 스탠드many of them, {% NUNJUKS, {{}} 액체.11ty의 템플릿 엔진 사이를 한 번에 여러 개 사용할 수 있어서 기쁩니다.
또한 HTML에서 class="native-share" style="display: none;" 가 무엇인지 알고 싶다면, 이것은 본 컴퓨터navigator.share 브라우저 API 사용에 대한 점진적인 향상입니다.만약 네가 내가 사교 공유를 실현하는 방법에 대해 흥미를 느낀다면.
나는 이 글을 썼다.
구성 파일과 데이터 파일은 NodeJS 모듈로 구축할 때 자바스크립트 전체 생태계를 잠그고 사이트 사용자에게 비용을 전가하지 않습니다.
✅ 자바스크립트로 사이트를 사용자 정의할 수 있습니다. 이것은 제가 가장 잘 알고 있기 때문입니다.
공평하게 말하자면 문서 사이트의 시작점이 있어도 어디서부터 내 사이트를 구축할 자신이 없다.이것은 문서에 대한 경시가 아니다. 문서는 매우 좋다. 나는 단지 강좌를 바탕으로 하는 형식에서 가장 잘 배우는 경향이 있을 뿐이다.나 유튜브 간다!

학습

유튜브에서 "learn 11ty"를 빠르게 검색한 후 다음 영상을 보았습니다.
이것은 매우 긴 영상이지만 가치가 있다. 영상 형식은 매우 쉬운 프로그래밍 세션이다. 11ty의 창설자는 초보자가 11ty에서 해커를 돕는 것을 돕는다.나는 11ty가 나에게 가장 인상적인 점은 서류만 쓸 수 있고 대부분의 물건이 정상적으로 작동할 수 있다는 것을 발견했다.
이 영상을 보고 나서 나는 너무 흥분했다. 나는 내가 초능력을 부여받았다고 느꼈다.

그리프데프

이것을 보니 지난번에 내가 간단하게 기억한 것이 언제였는지 기억이 나지 않는다.영상에서 제이슨이 기초부터!youtu.be/j8mJrhhdHWc
19:2020년 8월 10일 오후 49시
일.
오.
11ty 생태계에 대해 가장 좋은 일 중 하나는 정성스럽게 기획한 starter projects 시리즈인데 간단함에서 매우 복잡하다. 예를 들어 incorporating performance optimizations.
나는 이것이 약간 모순되어 보일 수 있다는 것을 안다. 일찍이 나는 복잡한 건설 프로젝트를 불평하기 시작했지만, 다음은 내가 어떻게 학습을 처리하고 자신의 프로젝트를 건설하는가이다.

빈 저장소부터 다른 초보자 항목에서 필요한 내용을 복사하는 것을 권장합니다.이렇게 하는 이유는 당신이 이미 가능한 내용과 프로젝트의 모든 코드의 의미를 정확하게 이해할 수 있기 때문이다.

무엇을 복제해야 할지 알기 위해 당신은 분명히 좋은 출발점입니다. 저는 정부로부터 eleventy-base-blog 각 서류를 순서대로 검사하여 그것들이 어떻게 적합한지 확인하기를 건의합니다.만약 네가 좀 일찍 이 동영상을 보았다면, 이 부분들은 반드시 도착하기 시작했을 것이다.

가장 중요한 개념은 다음과 같습니다.

Layouts

Collections

Pagination
이것은 다음 페이지와 이전 페이지를 의미할 뿐만 아니라 데이터로부터 페이지를 생성하는 것을 의미하며, 페이지는 11ty에서 매우 좋다.

Permalinks

Data

Filters

다음 11급 과정

이 프로젝트가 진행된 며칠 동안 React/Gatsby land는 트위터에 극적인 일이 일어났는데 그 결과 나는 이 놀라운 수업을 만났다. Learn Eleventy From Scratch
이 과정은 매우 훌륭하고 스텔스 CSS 과정이기도 하다.주의해야 할 것은 이것은 텍스트 기반의 과정이다. 나는 이전에 진정으로 해 본 적이 없지만, 나는 나의 속도로 이동할 수 있기 때문에 정말 좋아한다.나는 이 수업이 나로 하여금 진정으로 11ty에 대한 이해를 공고히 하게 하였기 때문에 나는 각종 프로젝트와 강좌의 영향을 한데 모으고 그것들을 나에게 유용한 내용으로 바꾸어 나의 사이트를 구축할 수 있었다.

나는 빌딩에 갔다

한두 달 동안 낮에 일한 후의 밤과 주말을 이용하여 2020년의 지옥 풍경을 통해 저는 단련griffa.dev을 했고 즐겁게 놀았습니다.나는 거짓말을 할 줄 모른다. 모든 것이 순조로운 척한다. 나는 쉽게 마음을 분산시킬 수 있다. 처음 며칠의 일은 이렇다.

그리프데프

신기술을 이용한 웹 사이트 구축: 1일차: 템플릿 찾기 및 복제 2일차: 일부 사용자 정의 구축 단계 도입 3일차: 비디오/강의 시청, 초안 작성 4일차: 사용자 정의 구축 다시 쓰기😂때때로 나는 매우 기쁘게 효과가 있는 일을 하기 시작한다
18:00 PM-2020년 8월 16일
0
일.

번호를 맞추다.

내 블로그의 소스 코드는 여기서 찾을 수 있습니다: https://github.com/Georgegriff/griffadev/
The first commit 그곳에서 나는 나의 프로젝트를 세웠다.기초 초보자, 내가 앞에서 언급한 Piccalilli 의 훌륭한 과정, 그리고 해커가 해독하고 효과적인 방법을 찾는 코드를 발견할 수 있을 것이다.
만약 당신이 내가 블로그를 개발할 때 한 더 많은 일에 흥미를 느낀다면, 나는 자바스크립트 방법에 관한 글을 썼다.