← Cloudflare Pages / pages / functions / plugins

vercel/og

@vercel/og Pages Plugin je middleware, který vykresluje sociální obrázky pro webové stránky. Obsahuje také API pro vytváření libovolných obrázků.

Jak název napovídá, pohání jej @vercel/og ↗. Tento plugin a jeho podkladový Satori ↗ knihovnu vytvořil tým Vercel.

Chcete-li nainstalovat @vercel/og Pages Plugin, spusťte:

npm i @cloudflare/pages-plugin-vercel-og

import React from "react";
import vercelOGPagesPlugin from "@cloudflare/pages-plugin-vercel-og";

interface Props {
	ogTitle: string;
}

export const onRequest = vercelOGPagesPlugin<Props>({
	imagePathSuffix: "/social-image.png",
	component: ({ ogTitle, pathname }) => {
		return <div style={{ display: "flex" }}>{ogTitle}</div>;
	},
	extractors: {
		on: {
			'meta[property="og:title"]': (props) => ({
				element(element) {
					props.ogTitle = element.getAttribute("content");
				},
			}),
		},
	},
	autoInject: {
		openGraph: true,
	},
});

Plugin přijímá objekt se šesti vlastnostmi:

• imagePathSuffix: přípona cesty, na které bude vygenerovaný obrázek dostupný. Pokud například tento Plugin připojíte na functions/blog/_middleware.ts, nastavte imagePathSuffix jako /social-image.png a mít /blog/hello-world stránky bude obrázek dostupný na /blog/hello-world/social-image.png.

• component: komponenta React, která se použije k vykreslení obrázku. Ve výchozím nastavení komponenta React dostává pathname vlastnost rovnou cestě (pathname) dané webové stránky (například /blog/hello-world), ale dynamičtější vlastnosti lze zadat pomocí extractors možnost.

• extractors: volitelný objekt se dvěma volitelnými vlastnostmi: on a onDocument. Těmto vlastnostem lze přiřadit funkci, která přijímá objekt a vrací HTMLRewriter obsluha prvku nebo obslužná rutina pro dokumenty v uvedeném pořadí. Objektový parametr lze upravit tak, aby komponentě React poskytl další vlastnosti. Ve výše uvedeném příkladu použijete element handler k extrakci og:title meta tag ze stránky a předá ho komponentě React jako ogTitle vlastnost. Jde o hlavní mechanismus, kterým vytvoříte dynamické obrázky využívající hodnoty z dané webové stránky.

• options: volitelný objekt, který je předán přímo @vercel/og knihovna ↗.

• onError: volitelná funkce, která vrací Response nebo Promise typu Response. Tato funkce se zavolá při požadavku na imagePathSuffix a extractors jsou zadány, ale podkladová webová stránka není platný HTML. Ve výchozím nastavení se vrátí 404 odpověď.

• autoInject: volitelný objekt s volitelnou vlastností: openGraph. Pokud je nastaveno na true, tento Plugin automaticky nastaví og:image, og:image:height a og:image:width meta tagy na podkladové webové stránce.

Pomocí API tohoto pluginu generujte libovolné obrázky, nejen jako middleware.

Následující kód například vygeneruje obrázek s textem "Hello, world!", který je dostupný na /greet.

import React from "react";
import { ImageResponse } from "@cloudflare/pages-plugin-vercel-og/api";

export const onRequest: PagesFunction = async () => {
  return new ImageResponse(
    <div style={{ display: "flex" }}>Hello, world!</div>,
    {
      width: 1200,
      height: 630,
    }
  );
};

Jde o stejné API, jaké používá také podkladový @vercel/og knihovna ↗ nabízí.