markdown - Jekyll 中的 Opengraph 链接预览

Question

当您在现代写作网站中插入链接时，它们通常会显示页面预览而不是链接(如果段落中没有周围的文本)。

当我在我的 jekyll 网站上添加一些帖子链接时，我想要同样的体验，这是一种呈现预览的方式。

这对读者来说非常方便。有时预览被错误地称为“嵌入”。

有没有办法在 Jekyll 页面/帖子中根据 Open Graph protocol 生成带有文本/图像预览的“预览卡” ?

Answer 1

在别处显示 Jekyll 站点的富文本预览

Is there a way to generate a "preview card" with text/image preview according to the Open Graph protocol instead of just a plain link in a markdown site of the static site generator Jekyll?

是的，这是可能的。 jekyll-seo-tag plugin已经为您设置了 Open Graph Protocoll 元数据的属性，如 its template 中所示.
Jekyll 的默认主题，

Minima already comes with the jekyll-seo-tag plugin preinstalled to make sure your site gets the most usefull meta tags. ^[1]

该插件从您的 _config.yaml 中读取值设置属性。有些值是

title对于 og:title和 og:site_name

description对于 og:description

url对于 og:url

也可以指定 og:image与 jekyll-seo-tag advanced usage section 中描述的插件其文档。在帖子的开头添加以下内容:

image:
  path: /your/fancy/image.png
  height: 100
  width: 100

也可以指定默认图像，见 front matter defaults in the Jekyll docs
我用 my own blog 尝试了这一切- 也是用 Jekyll 生成的。
我添加了一个 og:image对于 this post .您可以在 GitHub 上查看其来源.
在添加图片之前，Telegram 桌面的预览是这样的:

添加后 og:image ，它看起来像这样:

如果我的图像没有显示怎么办？
有几个原因。

也许你的图像太大了？一些网站建议将预览图像保持在 300 KB 以下

您的链接预览已被缓存。 Telegram 提供了一个很好的解决方案 - @webpagebot .您可以将链接发送到该机器人，它会更新缓存。

在 Jekyll 网站上显示其他链接的预览
有两种方法可以为您的 Jekyll 网站上的链接生成预览:

在服务器上生成链接预览

让客户端用 JavaScript 生成预览

服务器端预览生成

优势:

您的客户不需要 JavaScript

缺点:

预览是随您的站点生成的，并且仅在您的站点更新时才更新

自定义插件不适用于 GitHub 页面

有一个 Jekyll 插件 - jekyll-preview-tag :

首先安装所需的gem nokogiri , open-uri , ruby-readability和 digest ，例如

 bundle add nokogiri
 bundle add open-uri
 bundle add ruby-readability
 bundle add digest

现在下载文件preview_tag.rb并将其放在 _plugins您网站的文件夹。

创建 _cache目录

将您的链接添加到您的 Markdown 中，例如:

{% preview https://mycoolsite.com %}

默认情况下，这仅呈现文本:

但是，您可以添加一个方法来提取 og:image标签:

def get_og_image_url(source)
    if source.css('meta[property="og:image"]').first
        return source.css('meta[property="og:image"]').first["content"]
    end
    return ""
end

我在 my GitHub profile 上创建了一个分支来演示这一点，您可以轻松修改它。
预览如下所示:

客户端预览生成
有几个可用的 JavaScript 库可以为您生成预览。

优势

预览始终是最新的

缺点

客户端需要 JavaScript

由于Same-Origin-Policy，大多数工具依赖于外部且通常是非免费的服务。

你可能想看看

JQuery preview