前言
Deprecated:我现在已经手动生成 OG Image 了。
Vercel 官方有提供 @vercel/og 这个包,可以生成 OG Image(The Open Graph protocol),有直接可用的 API https://og-playground.vercel.app 调用方式为:https://og-image.vercel.app/eallion.png
但是有个很大的问题,不支持中文。再加上「得意黑」字体当时刚发布,很适合做标题,我就利用 @vercel/og 糊了一个 Next.js 的应用,部署到 Vercel,调用方式为:https://og.eallion.com/api/og?title=蜗牛
后来换成「思源宋体」了。不过如前文说所,我现在已经手动生成 OG Image 了,毕竟年更博客。
注意
🚨 注意:Vercel 免费套餐的 Edge 应用最大只支持 1M,而最小的中文字体就远远不止 1M。 不过后文有介绍仅提取用到的字符,压缩字体体积的方法,方法总比困难多,连摇一摇打开淘宝都能想出来,还有什么是不能实现的呢。 另外:Vercel 官方有文档,介绍得非常详细,不像我胡言乱语,连我这种门外汉都可以照着官方文档糊个应用出来,何况现在还有 ChatGPT 了,还是建议看官方文档:
Cloudflare Pages 也有官方插件,但是我没有研究过:
教程
1. 准备
背景图
:需要准备一张 1200x630 分辨率的背景图,当然是体积越小越好,始终要想到最大只有 1M,然后把图片转换成 base64:https://base64.guru/converter/encode/image 这可以进一步压缩体积。字体
:准备.ttf
字体文件,我试过 Google fonts 在线字体,但在当时不能用,还要注意 Licence。
2. 本地调试
Fork GitHub 仓库:https://github.com/eallion/vercel.og Fork 后克隆自己的仓库到本地,安装依赖:
git clone https://github.com/XXXXXXX/vercel.og # XXXXXXX is your GitHub usernamecd vercel.ognpm insatll --savenpm run dev
然后在浏览器打开 http://localhost:3000/api/og?title=
就能看到效果了。
自定义修改 pages/api/og.tsx
如下几个地方:
字体路径
:pages/api/og.tsx#L11默认 Title
:pages/api/og.tsx#L21 没有传值时的缺省值背景图
:pages/api/og.tsx#L53大标题
:pages/api/og.tsx#L81Author
:pages/api/og.tsx#L108字体
:pages/api/og.tsx#L116-L120
其他自定义的地方可自行修改,这是一个 Next.js 应用。
3. 压缩字体
压缩字体的思路就是利用工具只提取博客标题使用到的字符,这大大减少了字体的体积。 提取标题使用到的字符,我用到的是 aui/font-spider 这个工具,按照工具的文档就能很方便的处理了。 基于这个工具,我用的是 eallion/font-spider-smiley-opengraph,是利用自己博客的 摘要文件 来提取 Title 的,这只是一种提取字符集的思路。希望有更好的方式,一起探讨。 把压缩后的 .ttf
字体文件复制到 public/
目录。
PS:修改完,记得 push 到 GitHub 仓库。
4. Vercel 部署
到 Vercel 控制台,选择 Add New
Project
Import Git Repository
选择自己仓库的 vercel.og
然后 Import
,Framework Preset
要选择 Next.js
,然后点击 Deploy
等待部署完成。 部署成功后,打开 “域名 + /api/og?title= + 内容
” 就可以使用了,API path 是 /api/og
。 完整API: https://og.eallion.vercel.app/api/og?title=
对于部分地区,可能需要绑定一个域名才能访问。
其他
我现在手动生成 OG Image 的工具是:https://cover.eallion.com
相关:https://github.com/youngle316/cover-paint
1、本站提供的源码不保证资源的完整性以及安全性,不附带任何技术服务!
2、本站提供的模板、软件工具等其他资源,均不包含技术服务,请大家谅解!
3、本站提供的资源仅供下载者参考学习,请勿用于任何商业用途,请24小时内删除!
4、如需商用,请购买正版,由于未及时购买正版发生的侵权行为,与本站无关。
5、本站部分资源存放于百度网盘或其他网盘中,请提前注册好百度网盘账号,下载安装百度网盘客户端或其他网盘客户端进行下载;
6、本站部分资源文件是经压缩后的,请下载后安装解压软件,推荐使用WinRAR和7-Zip解压软件。
7、如果本站提供的资源侵犯到了您的权益,请邮件联系: 11210980@qq.com 进行处理!
本文地址:https://www.zycang.com/120252.html
文章转载或复制请以超链接形式并注明来源出处。 本文最后更新于:2023-12-20 01:00:39
声明:某些文章或资源具有时效性,若有 错误 或 所需下载资源 已失效,请联系客服QQ:11210980
请登录后发表评论
注册