Eleventy 웹사이트에 생성기 메타 태그 추가
나는 실제로 그랬고 그들이 모든 HTML 페이지의 HEAD 블록에 다음과 같은 흥미로운 코드를 추가했던 것을 기억합니다.
<meta name="generator" content="Dreamweaver CS4">
그건 그렇고 WordPress조차도 그런 일을합니다 ...
이 태그는 실제로 페이지의 모양과 느낌에 아무런 영향을 미치지 않지만 호기심 많은 사람(예: HTML 코드에 숨어 있는 사람)에게 웹사이트를 생성하는 데 사용된 도구를 알려주는 데 사용됩니다.
나는 실제로 이것을 좋아하고 당신이 좋아하는 도구에 약간의 공로를 인정하는 것이 공평하다고 생각합니다. 그렇다면 Eleventy로 구축된 웹 사이트에 대해 동일한 작업을 수행하지 않는 이유는 무엇입니까?
이 빠른 자습서에서는 그 방법을 살펴보겠습니다!
1단계: 글로벌 사이트 데이터 파일 생성
저는 모든 템플릿과 레이아웃에서 이 메타데이터를 쉽게 참조할 수 있도록 모든 사이트 메타데이터를
_data/site.js라는 파일로 구성하는 것을 좋아합니다.현재 버전의 Eleventy를 해당 파일에 가져오기 위해 다음과 같이 할 수 있습니다.
'use strict'
const eleventyPackage = require('@11ty/eleventy/package.json')
module.exports = function () {
return {
generator: `${eleventyPackage.name} v${eleventyPackage.version}`,
// ... more site metadata like title, baseUrl, etc.
}
}
여기서 우리가 하는 일은 기본적으로 Eleventy의 자체
package.json를 가져오고 속성name 및 version을 읽어서 generator 문자열을 만드는 것입니다.이것이 작동하려면 Eleventy를 프로젝트 종속성에 직접 설치해야 합니다(전역 설치에서는 작동하지 않음).
npm i --save-dev @11ty/eleventy
이는 특히 CI 환경에서 웹 사이트를 구축하는 경우 좋은 방법입니다. 또한 일레븐티 버전을 업데이트하면 프로젝트의 일부로 일관되게 추적되고 생성기 태그가 현재 버전을 참조하도록 자동으로 업데이트됩니다.
2단계: 레이아웃에서 생성기 메타데이터 사용
이제
site.generator 전역 데이터 변수를 통해 생성기 문자열을 전역적으로 사용할 수 있으므로 기본 레이아웃( _includes/layout.njk )에 간단히 추가할 수 있습니다.<!doctype html>
<html lang="en" class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="generator" content="{{ site.generator }}">
<!-- more metadata here ... -->
</head>
<body>
{{ content | safe }}
<!-- scripts and stuff here ... -->
</body>
</html>
<meta name="generator"> 태그를 정의하고 site.generator 속성을 채우기 위해 content를 사용하고 있습니다.3단계: 기본 레이아웃 사용
템플릿으로 생성하려는 모든 HTML 페이지에서 기본 레이아웃을 참조하면 됩니다. 예를 들면 다음과 같습니다.
--------
layout: layout.njk
title: A great blog post
--------
# A great blog post
My day started with some great ☕️
...
이제 웹사이트를 구축하면 모든 페이지에 생성기 태그가 HTML 마크업의 HEAD 섹션에 제대로 포함됩니다!
성공 🎉
그게 다야
이 기사에서는 Eleventy에서 생성된 모든 HTML 페이지의 HEAD 블록에 생성기 메타 태그를 추가하는 방법을 배웠습니다.
그렇게 하면서 전역 데이터 파일, 레이아웃 및 템플릿에 대해서도 조금 배웠습니다!
에서 Eleventy에 대해 자세히 썼습니다.
이 기사가 흥미로웠다면 여기에서 나를 팔로우하고 다른 웹 관련 기사에 대한 내personal website/blog를 확인하십시오.
또한 Node.js를 좋아한다면 입증된 패턴과 기술을 사용하여 생산 수준의 Node.js 애플리케이션을 설계하고 구현하는 방법을 배우는 데 도움이 되는 제 책Node.js Design Patterns third edition을 살펴보십시오.
고맙습니다! 👋
Reference
이 문제에 관하여(Eleventy 웹사이트에 생성기 메타 태그 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/loige/add-a-generator-meta-tag-to-your-eleventy-website-48f1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
