使用 Rails 7 生成精美的链接预览

Posted on 2022-05-12

ARCWTrgYpoc531106B2eMedWoT42-w493kte.jpe

嘿嘿嘿嘿嘿嘿！这是一篇关于如何进行美颜链接预览的快速文章，就像 Dev.to 一样。

\ 你会得到这样的东西：

\ 是的，用“ like dev.to ”字面意思?我已经为我的新项目workby.io构建了类似的东西，这就是我的做法……

我发现的几乎所有指南都在使用htmlcsstoimage.com ，事实上， dev.to使用它。它非常流行和高效，但是，我不想为每 1k 图像支付 14 美元??

\ 所以，我将使用Grover ：一个 ruby​​ gem 使用 Google Puppeteer 和 Chromium 将 HTML 转换为 PDF、PNG 或 JPEG。

\ 如果你想用 Node.js 来构建它，你也可以关注我。 Puppeteer 很受欢迎且易于使用。

\长话短说：我们将构建一个 HTML 视图并对其进行截图。

\ 您可以创建一个空白的 Rails 项目，或者只是为您当前的应用程序添加额外的功能。

设置

使用bundle add grover安装 Grover gem

\ 以及 Grover、 Puppeteer的依赖，有： yarn add puppeteer

\ 然后创建一个空控制器，您可以在其中使用不同的链接预览模板进行响应： rails g controller og-imager dev_to

\ 在dev_to动作中，我们调用 Grover，让他做魔法app/controllers/og_imager_controller.rb

 class OgImagerController < ApplicationController # GET /og_imager/dev_to # @param {string} title # @param {string} avatar # @param {string} username # @param {string} timestamp # @param {array} logos # @returns image/png def dev_to # Get params and set to variable # TODO: Retrieve your object instead :p @title = params[:title] @avatar = params[:avatar] @username = params[:username] @timestamp = params[:timestamp] @logos = params[:logos] # Grover.new accepts a URL or inline HTML and optional parameters for Puppeteer grover = Grover.new( render_to_string ) # Get a screenshot png = grover.to_png # Render image send_data(png, type: 'image/png', disposition: 'inline') end end

\ 这是我们的视图，只是简单的 HTML/CSS app/views/og_imager/dev_to.html.erb

 <div class="container"> <div class="card"> <h1 class="title"> <%= @title %> </h1> <div class="details"> <div class="user"> <img src="<%= @avatar %>" class="avatar"> <p class="username"> <%= @username %> - <%= @timestamp %> </p> </div> <div class="logos"> <% @logos.each do |logo| %> <img src="<%= logo %>" class="logo"> <% end %> </div> </div> </div> </div> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); *{ font-family: 'Roboto', sans-serif; color: #cd685f; } .container{ width: 1128px; height: 600px; display: flex; } .card{ display: flex; justify-content: space-between; flex-direction: column; margin: 2.8rem 4rem 4rem 2.8rem; border: 3px solid #c56b61; border-radius: 25px 25px 0px 0px; box-shadow: 7px 10px 0px 1px #c56b61; padding: 3.8rem 1.8rem 1.8rem 1.8rem; } .title{ margin: 0px; font-weight: 500; font-size: 5rem; line-height: 80px; } .details{ display: flex; justify-content: space-between; } .user{ display: flex; align-items: center; } .avatar{ border: 3px solid #c56b61; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; } .username{ margin: 0; font-size: 2.5rem; } .logos{ display: flex; justify-content: space-between; } .logo{ width: 60px; height: 60px; margin-left: 20px; transform: rotate(5deg); } </style>

\ 最后，创建一个初始化器来设置我们的浏览器视口（最终图像大小）。

initializers/grover.rb

 Grover.configure do |config| config.options = { viewport: { width: 1128, height: 600 }, } end

\ 如果你创建了一个空白项目，并且想将其用作微服务，这里有一个关于如何将这个东西部署到 Heroku 的指南。

  1. 在您的 Heroku 帐户上创建应用程序（我假设您已经安装了 cli）： heroku create your_app_name
  2. 警告 Heroku 我们的 JS 库（Puppeteer）： heroku buildpacks:add heroku/nodejs --index=1
  3. 并帮助他设置 Puppeteer 依赖项?： heroku buildpacks:add jontewks/puppeteer --index=2
  4. 告诉 Grover 在“无沙盒”中运行 Puppeteer： heroku config:set GROVER_NO_SANDBOX=true

\ 要在链接预览中使用此图像，您将需要The Open Graph 协议。只是浏览器会寻找的简单元标记。

\ 元标记始终打开

所以， app/views/layouts/application.html.erb

 <%= yield(:head) %>

\ 然后让 ERB 用

<%= content_for :head do %> <meta property="og:title" content="<%= @article.title %>"> <meta property="og:image" content="<%= article_link_preview(@article) %>"> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="1128"> <meta property="og:image:height" content="600"> <meta name="twitter:card" content="summary_large_image" /> <% end %>

在您的详细信息视图中。喜欢： /articles/:id

\ twitter:card是因为它们在链接预览方面更出色，您可以在此处阅读更多相关信息

\ 上一篇文章article_link_preview方法是一个简单的帮助器，用于生成我们要查找的 URL。

app/helpers/articles_helper.rb

 def article_link_preview article uri = URI.parse('https://your_app_name.herokuapp.com/ogimage') uri.query = URI.encode_www_form( title: article.title, 'images[]': article.tags.collect(&:image), timestamp: article.created_at.to_formatted_s(:short), ... ) uri.to_s end

\ 你会得到这样的东西： https://your_app_name.herokuapp.com/og_imager/dev_to?title=Real%20Time%20Notification%20System%20with%20Hotwire,%20in%20Rails%207&avatar=https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/369241/a0111bcb-a046-4398-98cd-f4cf0e2f8d0d.png&username=Matias%20Carpintini&timestamp=13%20April&logos[]=https://img.icons8.com/office/80/000000/ruby-gemstone.png&logos[]=https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png

\这是整个事情的回购。

:::tip 本文首发于此处。

:::

\

原文： https://hackernoon.com/generate-fancy-link-previews-with-rails-7?source=rss