用 CDN 的 URL 做图来实现动态的 Twitter 卡片

今年 GitHub 改版了他们的分享卡片，以前让用户自己指定一张大图，现在可以直接在图里显示动态内容，在 Twitter 上看的话就是这个样子的：

不管分享的内容是 repo 还是人或者某个 issue，卡片上半部分这个配图里除了展示标题和图片之外，也会显示项目加心数、Fork 数、所用到的语言种类等等各种数据，看了之后我也蠢蠢欲动，想把我们官网的播客分享卡片也改成类似的样子。

说是迟那是……并不快，我一开始自己在服务器端写了一个直接生成 PNG 的 API，感觉可能在样式、缓存机制之类的问题上都更可控一些，但后来测试一下发觉这个缓存的瓶颈不在服务器，而在 Twitter。而且我水平有限，这个图形输出的 API 开销还挺大，所以就只好再看看其他办法。最后发现我们用来存图片的 CDN 也支持根据 URL 做图，所以就开搞了！

看过了所支持的图形 API 的参数（可以做模糊、可以位移、以及重叠多张图片和通过参数写文字等等）就开始设计了，为了兼容不同颜色、风格的封面图，在图下面叠了一层模糊并放大的样式，然后中间加上了半透明黑色的遮罩。最后简单按照 Twitter 卡片的分辨率（1200 × 628，也是很奇葩的尺寸了……）设计了一下大概效果就像题图所示：

实现上的话，因为之前本台的 RSS 里也需要封面图片存在服务器上，同时按照期数有规范的文件名，所以这两层封面都是用参数传过去读对应期数的图片文件，然后动态文字部分也是传参过去在线生成，只有一层图形遮罩是固定的图形：

P.S. 这个动图是用之前 news 里推荐的 Fable.app 生成的，自从我退订了 Adobe 全家桶之后也的确在尝试不同的轻量级动画工具，这个 Fable 简单用下来感觉真的挺不错，熟悉 Ae 的肯定能轻松上手，而且因为功能少了些，所以有些交互操作反而会觉得更方便，比如一键选择预置的各种动画曲线、方便直观的打组等，我收回之前说的「这个只适合用来做『好看背景』的话~」，让他替代 Ae 做个简单动画完全可以~ 好吧，我承认写这篇流水帐文章其实是为了试这个软件……

拼接完各个参数放到网站 meta 信息里之后就跑通了，不过尝试在官方的卡片调试页面进行细节调试的时候也遇到了坑，当时发觉我这边明明 URL 里的参数都已经更改，我这里访问也能展示出正确的已经修改过的样式，但 Twitter 那边就是显示不出来，后来看了官方文档（我错了，应该先看文档的……）发觉有个缓存时间，第一次生成之后会缓存七天……好像也没法手动刷新，而且各个客户端、不同用户读取的机制很迷，我现在都没摸透……

Anyway，虽然这个相当长的缓存让上面的动态文字意义已经不是很大，但好歹也算最后做出来了！效果就是这样：