11ty를 배우자 6부: 플러그인

지난 기사에서 우리는 사이트를 배포했습니다. 이 시점에서 사이트에서 꽤 잘 작동합니다. 그러나 플러그인부터 시작하여 기능을 개선하기 위해 할 수 있는 일이 더 있습니다.

플러그인

플러그인은 추가 기능을 구현하기 위해 Eleventy로 가져올 수 있는 외부 코드 조각입니다.

Eleventy의 특성으로 인해 공식 플러그인(@11ty 접두어 아래)과 커뮤니티 기여 플러그인이 모두 있습니다.

다음은 일부 공식 플러그인입니다.

Edge: Eleventy 사이트에 콘텐츠를 동적으로 추가하기 위해 Edge 기능에서 Eleventy를 실행할 수 있습니다.

이미지: 이미지 크기 조정 및 생성 허용

구문 강조: 클라이언트 측 JavaScript 없이 코드 구문 강조를 허용합니다.

탐색: 사이트에서 계층적 탐색을 생성합니다.

플러그인을 사용하려면 예를 들어 이미지를 말합니다.

npm install @11ty/eleventy-img

그런 다음 상단의 .eleventy.js에 포함합니다.

const Image = require("@11ty/eleventy-img");

나머지 플러그인은 이 페이지에서 볼 수 있습니다here.

플러그인을 사용하여 사이트 개선

SEO 개선

우리 사이트의 SEO는 현재 그다지 좋지 않습니다. 이를 개선하기 위해 몇 가지 조치를 취할 수 있습니다.

내장 플러그인 중 하나를 사용하여 robots.txt 및 `sitemap.xml

로봇

src 에서 다음이 포함된 robots.txt 파일을 만듭니다.



이 파일을 생성하는 것만으로는 아무 작업도 수행되지 않습니다. 이유를 기억하십니까?

NOTE: .txt is not part of the supported template languages, we have to add a PassThroughCopy for our file

.eleventy.js에 다음을 추가합니다.

사이트맵

아직 이 파일에 있는 동안 사이트맵에 대한 코드를 추가해 보겠습니다.

파일 상단에서 다음을 수행합니다.

Eleventy에 내장된 js
const { DateTime } = require("luxon");
-
Then

In the code above, we import DateTime luxon
그런 다음 현재 날짜에 대한 단축 코드를 만들고 DateTime를 사용하여 사이트맵에서 사용할 현재 날짜를 가져옵니다.

이제 사이트맵 파일을 만들 수 있습니다. src에서 sitemap.njk 파일을 생성합니다.



위에:

Permalink 키를 사용하여 이 파일을 렌더링하는 방법을 지정했습니다

.

또한 컬렉션에서 제외합니다

.

모든 컬렉션에서 루프를 실행합니다.

그런 다음 특정 페이지 URL과 함께 사이트의 URL을 출력합니다. - page.url

currentDate 단축 코드를 사용하여 반복되는 각 페이지가 수정된 날짜를 출력합니다

.

NOTE: Make sure you replace the site url with your own deployed URL

게시물에 날짜 표시

우리는 DateTime 를 한 번 더 사용하지만 조금 다르게 사용할 것입니다.



변경 사항blog.njk은 다음과 같습니다.

I have added more classes to make the blog home look better

결론

오늘 우리는 Eleventy의 플러그인에 대해 배웠습니다. Eleventy 사이트에서 여러 작업을 수행하는 데 도움이 되는 방법.

플러그인을 사용하여 다음을 수행했습니다.

사이트맵 추가

게시물 날짜 표시

나쁘지 않죠? 지금까지 우리는 아무것도 가져오지 않았습니다. 그리고 지금도 우리가 추가한 것은 그리 많지 않습니다.

언제나처럼:

라이브 사이트: https://learneleventy.netlify.app

작업 저장소: https://github.com/Psypher1/learneleventy

문서: https://www.11ty.dev/docs/

불화: https://www.11ty.dev/blog/discord/**

읽어주셔서 감사합니다. 연결합시다!

저의 작은 구석을 찾아주셔서 감사합니다. , Polywork 및