CMS로서의 Next.js와 Tumblr 4부: 오픈 그래프 이미지

9780 단어 playwrightjavascriptnextjs
내first post on using Next.js with Tumblr로 돌아가서 전환의 큰 동기 중 하나로 내 블로그를 더 잘 제어할 수 있다고 언급했습니다. 그래서 저는 Open Graph 이미지를 생성하고 코드 블록에 구문 강조 표시를 추가하는 것과 같이 제가 의미하는 몇 가지 구체적인 사항을 검토하여 마무리할 것이라고 생각했습니다.

이것은 원래 하나의 게시물로 의도되었지만 조금 길어지고 조금 느려서 Open Graph 이미지부터 시작하겠습니다.

Open Graph 이미지는 Twitter 또는 Facebook과 같은 소셜 미디어 사이트에서 링크를 공유할 때 본 적이 있는 미리보기 이미지입니다. 기본적으로 Tumblr는 Tumblr 로고가 있는 일반 이미지를 표시하며 일부 테마는 아바타를 가져오거나 사용자 지정 이미지를 업로드할 수 있습니다. 그러나 다른 게시물에 다른 이미지를 첨부하거나 동적으로 생성하는 좋은 방법은 없습니다. 내 목표는 각 게시물이 제목이나 설명 및 유형을 표시하는 고유한 텍스트 기반 이미지를 갖는 것이었습니다.



이 주제에 대한 많은 좋은 기사가 있지만 그들의 지침은 내가 원하는 것을 정확히 얻지 못했기 때문에 결국 내 솔루션을 함께 선택하고 선택했습니다. 너무 가까웠지만 후드 아래에서 next-api-og-image를 사용하는 chrome-aws-lambda를 사용했고 Vercel에서 작동하도록 할 수 없었습니다. 이전 버전chrome-aws-lambda을 설치하라는 제안도 시도했지만 배포되지 않았습니다. Generate Open Graph images for your static Next.js site은 즉석에서가 아니라 빌드 프로세스 중에 이미지를 생성했지만 Playwright을 사용하여 도입했는데 매우 유용했습니다. 이 두 기사는 아래 코드에 큰 영향을 미쳤습니다.

필요한 극작가 패키지를 설치하여 시작하십시오.

yarn add playwright playwright-core playwright-aws-lambda


다음으로 게시물 구성 요소에서 meta 블록 내부에 next/head 태그를 추가합니다.

<Head>
  <meta property="og:image" content={`${process.env.NEXT_PUBLIC_BASE_URL}/api/og-image?headline=${post.headline || post.summary}&type=${post.type}`} />
  ...
</Head>


두 가지 참고 사항: 1) 편의를 위해 내 기본 URL을 환경 변수로 저장하므로 NEXT_PUBLIC_BASE_URL를 교체해야 할 수 있습니다. 2) 쿼리 매개변수를 사용하여 게시물 제목과 유형을 전달합니다.
content URL은 pages/api/og-image.js에서 생성할 경로를 가리킵니다. 이미지가 어떻게 보이길 원하는지에 따라 많은 HTML과 CSS를 잘라냈습니다.

const playwright = require('playwright-aws-lambda');

export default async function handler (req, res) {
  const html = `
    <html>
      <head>
        <meta charset="UTF-8">

        <style>
          *, *:after, *:before {
            box-spacing: border-box;
          }

          html {
            line-height: 1.4;
          }

          body {
            background: #f4f4f4;
            margin: 0;
            padding: 2rem;
          }

          ...
        </style>
      </head>

      <body>
        <div class="og">
          ...

          <div class="og__type">
            <span>laurenashpole.com</span>  —  ${(req.query || {}).type || ''} post
          </div>

          <h1 class="og__headline">${(req.query || {}).headline || ''}</h1>
        </div>
      </body>
    </html>
  `;

  if (process.env.NODE_ENV === 'development') {
    res.setHeader('Content-Type', 'text/html');
    return res.end(html);
  }

  const browser = await playwright.launchChromium({ headless: true });
  const page = await browser.newPage();
  await page.setViewportSize({ width: 1200, height: 630 });
  await page.goto('about:blank');
  await page.setContent(html, { waitUntil: 'networkidle' });
  const img = await page.screenshot({ type: 'png' });
  await browser.close();

  res.setHeader('Cache-Control', 's-maxage=31536000, stale-while-revalidate');
  res.setHeader('Content-Type', 'image/png');
  res.end(img);
}

이제 로컬에서 개발하는 동안 해당 URL을 방문하면 HTML 페이지가 표시되어 디자인을 검사하고 조정할 수 있습니다. 프로덕션에서 Playwright는 헤드리스 브라우저를 시작하고 새 페이지를 열고 HTML을 삽입한 다음 PNG 스크린샷을 찍어 반환합니다.

이것이 제가 Open Graph 이미지를 설정하는 방법입니다. 다음에는 실제로 코드 블록에 대한 구문 강조로 시리즈를 마무리하겠습니다.
Vue 3의 다중 v-모델
vba 다중 CSV 파일 읽기, EXCEL 형식으로 출력 샘플

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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