Eleventy 웹사이트에 생성기 메타 태그 추가

6300 단어 staticsiteeleventyjamstackjavascript
Microsoft Frontpage와 Adobe Dreamweaver를 기억하십니까? 그들이 당신을 위해 생성한 HTML 코드를 본 적이 있습니까?

나는 실제로 그랬고 그들이 모든 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을 살펴보십시오.



고맙습니다! 👋
MAVEN 패키지springboot 항목 오류
Firebase에서 PUSH 알림을 위한 메모(Android)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage