OG Kit：使用 HTML 和 CSS 生成动态 Open Graph 图像

和套件是一项使用您自己的 HTML 和 CSS 生成动态 Open Graph 图像的服务。由彼得·苏姆它允许您直接在代码库中定义 OG 图像模板，而无需依赖外部设计工具或无头浏览器设置。

工作原理

你添加一个 <template> 在网站的任何页面上添加 OG 图片标记，并包含 OG Kit 客户端脚本，该服务即可处理图片的渲染和缓存。要在浏览器中预览模板，请附加以下代码： ?ogkit-render 访问任意网址，并使用浏览器的开发者工具进行实时调整。

<
模板

数据和模板
>
<
div

风格
=
“
宽度：1200像素；高度：630像素；显示方式：弹性；元素对齐方式：居中；内容对齐方式：居中；”
>
<
h1
>{{ $post->title }}</
h1
>
</
div
>
</
模板
>
<
脚本

源码
=
"https://cdn.jsdelivr.net/npm/ogkit@1"
></
脚本
>

由于模板采用的是标准的 HTML 和 CSS，因此您可以直接使用现有的样式、字体、图片和模板语言。无需学习任何自定义的 DSL。

Laravel 集成

OG Kit 提供了一个官方的 Laravel 包，支持 Laravel 10、11 和 12：

作曲家

要求

petersuhm/ogkit-laravel

该软件包会自动发现其服务提供商，因此除了安装之外无需其他设置。

然后，您可以使用类似这样的模板：

<
身体
>
<
文章
>
<
h1
>
{{
$post
->
标题
}}
</
h1
>
<
页
>
{{
$post
->
摘抄
}}
</
页
>
</
文章
>

@ogTemplate
<
div

班级
=
"w-full h-full bg-slate-900 text-white p-16 flex flex-col justify-end"
>
<
页

班级
=
"text-xl opacity-80"
>
{{

配置
（
‘应用程序名称’
）
}}
</
页
>
<
h1

班级
=
"mt-6 text-6xl font-bold"
>
{{
$post
->
标题
}}
</
h1
>
<
页

班级
=
“mt-4 text-2xl”
>
{{
$post
->
摘抄
}}
</
页
>
</
div
>

@endOgTemplate
</
身体
>