dev.to 如何动态生成社交图像

整个过程中另一个有趣的部分

对于没有封面图片的dev.to帖子来说，拥有一个精心设计的“卡片”非常重要，它可以在 Twitter 用户滚动浏览信息流时吸引他们的注意力。我不确定我们的卡片设计是否都那么好，但可以做到，而且这部分其实与代码无关。

我们收到了很多关于如何动态生成这些默认图片的问题。我一直犹豫要不要写这篇文章，因为我还是觉得可以有更好的方法。不过，既然我们还没找到其他方法，那就写一篇关于我们目前的方法以及一些可能的替代方案的文章吧。

以下是#discuss 帖子的 Twitter 卡片示例

我们所做的

我们使用Cloudinary作为图片管理/处理服务，同时也是 CDN。它们提供一些功能，例如在图片上添加文本叠加层，用于生成图片。所以最终，我们只需要不断调整图层，直到调整到位，然后编写代码，让我们的应用能够以编程方式与 Cloudinary 进行交互。这很简单，但由于系统功能有限，我们的创造力受到了一定限制。Cloudinary 的服务很棒，但我们生成的图片模板修改起来比较麻烦。难以修改的代码不是好代码。

我们可以采取的其他方法

使用 HTML 生成图像，然后使用服务进行截屏

这将赋予我们更大的灵活性和对设计的控制力。我认为这才是我们理想的方案。Cloudinary 本身以插件的形式提供了这项服务，但我们还没有时间迁移到它。

在我们的服务器上动态生成图像。

ImageMagick是一个经典的库，具有丰富的扩展性。它很受欢迎，但在我看来用起来有点麻烦。Cloudinary 这样的服务正是因为 ImageMagick 太麻烦才存在的。我相信还有其他库，具体取决于你的后端生态系统，但我不知道哪些是好的选择。

类似ShareMeow的服务

对于非常特定类型的生成图像，ShareMeow 是一种有趣的自托管 Web 服务，我们已经尝试过。

总结

我们正在做的事情确实有效，但我不确定是否推荐。如果我是你，我会直接通过 HTML 或其他好用的服务来生成这些图片。

整个过程中另一个有趣的部分

这个过程不仅仅是生成图片。我们还需要一个清理缓存的机器人来定期更新卡片。如果我们想显示越来越多的评论，就不能等 Twitter 每周清理一次缓存。它仍然不会立即更新，但如果一条推文已经发布一段时间了，即使评论数量比最初发布时更多，它也会显示准确的评论数量。

Twitter 没有通过 API 公开其缓存清除功能，因此我们必须通过浏览器自动化来 ping 它。

它是一个 Ruby 文件，利用 Capybara 和 Selenium 自动执行 Twitter 卡片缓存验证的 ping 过程。它主要使用以下三种方法：

  def visit_twitter_and_log_in
    visit 'https://cards-dev.twitter.com/validator'
    find('input.js-username-field').set(ENV['TWITTER_USERNAME'])
    find('input.js-password-field').set(ENV['TWITTER_PASSWORD'])
    click_on('Log in')
  end

  def enter_url_and_click_preview(url)
    find('input.FormControl').set(url)
    click_on('Preview card')
    result = has_content?('Page fetched successfully')
    visit 'https://cards-dev.twitter.com/validator'
  end
end

第二种方法需要 ping 几次，并清除一些垃圾缓存。调用它的方法如下：

  def enter_urls
    urls.each do |url|
      3.times do
        enter_url_and_click_preview("#{url}?#{rand(10_000)}=#{rand(10_000)}")
      end
      enter_url_and_click_preview(url)
    end
  end

就是这样。构建所有这些功能是将一些原本需要手动操作的工作自动化的好方法。这一切都是为了使dev.to服务在更多用户分享内容时更具价值。