Puppeter, 11ty 및 Netlify와 이미지 자동 공유
이것은 이제 패키지/플러그인으로 Eleventy 사이트나 다른 SSG에 쉽게 추가할 수 있습니다.
새 Eleventy(11ty) 플러그인: 소셜 이미지
스테파니 에커스・ 2020년 11월 2일・ 2분 읽기
#showdev
#webdev
#npm
#eleventy
제 첫 번째 11ty 사이트인 ModernCSS.dev을 출시한 후 트위터에 공유하려던 참이었는데 그림이 없다는 것을 깨달았습니다.
나는 몇 개의 토끼굴을 찾았고, 나를 가까이 오게 하는 자원을 찾았지만, 다음 임무를 완수하지 못했다.
조합 해결 방안을 살펴보자. 그것도 구축 과정에서 완전히 포함되고 추가 생산 부품이 없다.
화면 캡처를 위한 HTML 템플릿 만들기
이것이 바로 11ty가 바로 빛나는 곳입니다. 기존의 데이터 집합을 사용하여 새로운 레이아웃 템플릿을 정의할 수 있습니다. 이 템플릿은 구축 부품으로만 생성됩니다.
데이터에서 동적 템플릿을 생성한 경우 해당 위치에 새 파일을 만들 수 있습니다.
첫 번째 데이터 템플릿인 경우
generate/social-images.njk을 만듭니다.디렉터리 이름은 사용자가 결정합니다. 생성은 11ty에서 보류되거나 특별한 이름이 아닙니다.입력 디렉터리로 정의된 디렉터리에 있어야 합니다. 입력을 변경하지 않으면 프로젝트 루트에 있어야 합니다.11ty는 그것을 찾을 수 있고 사용할 수 있으며, 다른 가리키는 것은 필요 없다.우리의 노드 기능과 관련 구축 부품 (컴파일된 템플릿 포함) 이 있는 디렉터리를 만들어야 합니다.프로젝트 루트 디렉터리에
functions을 만들기로 했습니다.다음은 Nunjuck 템플릿의 예제 화면 캡처입니다. 디자인에 맞게 수정할 수 있습니다.
---
permalink: functions/template.html
permalinkBypassOutputDir: true
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500&family=Kanit:ital,wght@0,800;1,600&display=swap" rel="stylesheet">
{% set css %}
{% include "src/css/style.css" %}
{% endset %}
<style>
{{ css | safe }}
</style>
</head>
<body>
<header>
<h1></h1>
<p>MySite.com | Tagline</p>
</header>
</body>
functions/template.html에서 컴파일된 HTML을 삭제하는 마력을 가지고 있으며, permalinkBypassOutputDir: true을 사용하면 이것은 단지 구축 부품일 뿐이라는 것을 확보할 수 있습니다.원한다면, 실제로는 functions/template.html으로 .gitignore을 배제할 수 있습니다. 왜냐하면build 명령에서 생성되기 때문입니다.몇 가지 더 중요한 주의사항이 있습니다.
h1 하나만 있습니다.이미지 데이터를 JSON으로 생성
Gersom's post은 사실상 GraphQL 데이터 사용에 관한 것이다. 그의 해결 방안은 Gatsby를 겨냥한 것이기 때문에 필요에 따라 HTML 템플릿을 반복적으로 채우는 긴밀한
for 순환을 포함한다.이것은 구축만 하는 과정이고 단일 HTML 파일을 만들어서'액세스'와 캡처를 하고 싶지 않기 때문에 댓글에서 어떻게 순환하는지 생각하기 어렵다.그리고 나는 똑똑한 아이디어를 생각해냈다. 실제로 11ty의 템플릿 기능을 사용하여 JSON 파일을 생성한다(최초에는 data for site search).
우리의 HTML 템플릿과 유사한 방식으로 우리가 생성하는 목적은 단지 구축 부품으로 우리의
functions 디렉터리에 넣는 것일 뿐이다.---
permalink: functions/posts.json
permalinkBypassOutputDir: true
---
[{% for post in collections.posts %}
{
"title":"{{post.data.post.title | jsonTitle}}",
"slug":"{{post.data.post.title | slug}}}"
}{% if forloop.last == false %},{% endif %}
{% endfor %}]
slug 필터를 사용하여 이미지 파일 이름으로 사용할 파일 이름의 우호적인 문자열을 만듭니다.JSON이기 때문에 데이터를 정확하게 포맷하기 위한 필터를 만들었습니다.
필터:
jsonTitle두 가지 주요 기능:"은 중단되어 JSON을 무효화시킬 수 있습니다.eleventyConfig.addFilter("jsonTitle", (str) => {
let title = str.replace(/((.*)\s(.*)\s(.*))$/g, "$2 $3 $4");
title = title.replace(/"(.*)"/g, '\\"$1\\"');
return title;
});
필요한 의존 항목 추가
파이프를 구축하고 로컬에서 작업을 할 수 있도록 다음 구성 요소를 설치해야 합니다.dev와prod의 의존 관계는 매우 중요합니다. 왜냐하면
chrome-aws-lambda은 환경 상하문에 따라 사용할 Puppeter 버전을 선택할 수 있기 때문입니다.npm i chrome-aws-lambda puppeteer-core
npm i -D puppeteer
Netlify Build 명령 업데이트
Gersom에서 말한 바와 같이 우리는
AWS_LAMBDA_FUNCTION_NAME을 정의해야 한다. 왜냐하면 Netlify의 구축은 NODE_ENV=development을 정의했기 때문에 chrome-aws-lambda은 잘못된 인형 배우를 선택했다.해결 방안은
netlify.toml 파일을 통해build 명령을 정의하고 변수 앞에 접두사를 붙이는 것입니다.[build]
command = "AWS_LAMBDA_FUNCTION_NAME=trickpuppeteer npm run build"
이미지 생성을 위한 노드 함수 만들기
네, 템플릿과 데이터를 준비했습니다!
(아직 없으면, 템플릿이 예상대로 생성될 수 있도록 eleventy를 실행하십시오.)
Gersom에 다시 한 번 감사드리지만, 그의 해결 방안은 약간의 갱신이 있습니다.
functions 디렉터리에 images.js 또는 유사한 파일을 만듭니다.이 파일을 .gitignore으로 변경하지 마십시오.우선
chorome-aws-lambda과 파일 경로 함수가 필요합니다.const chromium = require("chrome-aws-lambda");
const fs = require("fs");
const path = require("path");
(async () => {
// We'll be filling this in
})();
newPage()을 시작합니다.const browser = await chromium.puppeteer.launch({
args: chromium.args,
executablePath: await chromium.executablePath,
headless: chromium.headless,
});
const page = await browser.newPage();
// Load html from template
const html = fs.readFileSync(path.resolve(__dirname, "./template.html")).toString();
// Get generated post json
const posts = require("./posts.json");
// Render HTML
// Wait for 0 network connections to ensure webfonts downloaded
await page.setContent(html, {
waitUntil: ["networkidle0"],
});
// Wait until the document is fully rendered
await page.evaluateHandle("document.fonts.ready");
setViewport 함수를 사용하여 추천하는 소셜 공유 이미지의 크기를 600x315으로 조정하고 망막 디스플레이를 고려하여 장치 축소 기술을 두 배로 조정했다.// Set the viewport to your preferred image size
await page.setViewport({
width: 600,
height: 315,
deviceScaleFactor: 2,
});
_site입니다. 저는 public으로 사용자 정의를 했습니다.반복적인 테스트를 통해 이것은 출력에 필요합니다. 왜냐하면 우리는 eleventy에서 댓글을 작성한 후에 이 과정을 실행할 것입니다. 왜냐하면 최신 JSON 데이터와 CSS가 필요하기 때문입니다.따라서 생성된 이미지를 이동할 수 없습니다.
// Create an img directory in the output folder
const dir = path.resolve(__dirname, "../public/img");
if (!fs.existsSync(dir)) fs.mkdirSync(dir);
// Go over all the posts
for (const post of posts) {
// Update the H1 element with the post title
await page.evaluate((post) => {
// We use `innerHTML` since we added ` `
const title = document.querySelector("h1");
title.innerHTML = post.title;
// If you have other data to insert,
// find the DOM elements and update that here
}, post);
// Optional just for progress feedback
console.log(`Image: ${post.slug}.png`);
// Save a screenshot to public/img/slug-of-post.png
await page.screenshot({
path: `${dir}/${post.slug}.png`,
type: "png",
clip: { x: 0, y: 0, width: 600, height: 315 },
});
}
for에서 순환하지 않도록 합니다.await browser.close();
게시물 템플릿에 소셜 공유 레이블 추가
그림을 성공적으로 생성할 수 있을 것입니다. 그러나 특정한 원 표시를 적당한 템플릿에 추가해서 실제로 사용해야 합니다.
절대 URL 준비
상대 URL은 소셜 네트워크 파충류에 적용되지 않기 때문에 로컬
.env 파일과 관련 모듈을 정의하여 내보내야 할 수도 있습니다. 환경 변수 URL을 사용합니다. 이 변수는 Netlify 구축 환경 변수로 제공되고 생산 사이트의 기본 URL로 사용됩니다. 예를 들어 https://example.com입니다.로컬 설정의 경우
npm i dotenv --save-dev을 사용하지 않으면 .env을 사용하십시오.그리고 프로젝트 루트 디렉터리에 있는
.env에서 URL=http://localhost:8080을 정의합니다. 이것은 11ty의 기본값입니다.그런 다음 입력 디렉토리에 있는
_data/ (예: site.js) 에 있는 글로벌 데이터 파일을 만들 수 있습니다.module.exports = {
url: process.env.URL,
};
site.url으로 액세스할 수 있으며 Netlify에 배치되면 제품 URL로 업데이트됩니다.og 및 트위터 카드 레이블 추가
일반적인 용도로는 트위터와 페이스북에서 공유할 수 있다.다른 사이트들도 이런 것들을 찾는 경향이 있지만 저는 이런 것들에 대한 모든 지식을 파악하는 데 시간이 많이 걸리지 않아서 YM 뮤직비디오!
존재하는 컨텐츠 템플릿에서 HTML
<head>에 다음 내용을 추가합니다 - 예는 Nunjuck 템플릿입니다.이것들은 가장 낮은 요구 사항의 라벨이다.<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ post.title }}">
<meta name="twitter:description" content="{{ post.description }}">
<meta property="og:image" content="{{ site.url }}/img/{{ post.title | slug }}.png" />
<meta name="twitter:image" content="{{ site.url }}/img/{{ post.title | slug }}.png" />
site.url의 사용과 slug 필터가 post.title에 대한 사용을 참고하여 이미지 파일 이름을 만듭니다.중요 참고: Netlify에 배포된 후 기능 분기 배포에서도 이미지 URL이 운영 도메인에 평가되므로 기능 배포를 테스트하려면 URL이 존재하는지 확인하기 위해 수동으로 변경해야 할 수 있습니다.
생성 스크립트에 추가
구축 스크립트에 추가하는 것을 잊지 마세요!
여기에는 다음과 같은 방법이 있습니다.
"scripts": {
"screenshot": "node functions/images.js",
"build": "eleventy ; npm run screenshot",
}
소셜 공유 도구 확인
메타 태그와 이미지가 함께 작동하는지 확인하려면 다음 항목에 액세스하십시오.
Facebook Sharing Debugger- 검색된 데이터
피드백을 환영합니다!
유사한 절차를 만들었거나 개선할 수 있는 것을 알고 계십니까?댓글!
Reference
이 문제에 관하여(Puppeter, 11ty 및 Netlify와 이미지 자동 공유), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/5t3ph/automated-social-sharing-images-with-puppeteer-11ty-and-netlify-22ln텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
