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</
身体
>
这也适用于 Inertia,您可以查看所有关于 Laravel 集成的文档。 这里 。
价格
OG Kit 提供免费套餐,包含 25 页,付费套餐起价为每年 99 美元,包含 1000 页。所有套餐均包含缓存图片和无限域名。“页面”指的是 OG Kit 生成并托管 OG 图片的唯一 URL。
| 计划 | 价格 | 页面 |
|---|---|---|
| 自由的 | $0 | 25页 |
| 基本的 | 每年99美元 | 1000页 |
| 专业版 | 每年 299 美元 | 10,000页 |
| 风俗 | 联系销售 | 更高限制 |
更多详情,请访问 OG Kit 网站 或者查看 GitHub 上的 Laravel 包 。






