Markdown Jekyll中的Opengraph链接预览

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

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

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

在Jekyll页面/帖子中，是否有方法根据？

在其他地方显示Jekyll站点的富文本预览生成带有文本/图像预览的“预览卡” 有没有办法根据Open Graph协议生成带有文本/图像预览的“预览卡”，而不仅仅是静态站点生成器Jekyll的降价站点中的普通链接

是的，这是可能的。如中所示，已为您设置了Open Graph Protocoll元数据的属性

杰基尔的默认主题

已经预装了

jekyll seo标签

插件，以确保您的站点获得最有用的元标签

插件从

\u config.yaml

读取值以设置属性。有些值是

• title

  用于

  og:title

  和

  og:site\u name

• description

  对于

  og:description

• url

  用于

  og:url

还可以使用

jekyll seo标签

插件指定

og:image

，如文档中所述。将以下内容添加到您帖子的首页：

图像：
路径：/your/fancy/image.png
身高：100
宽度：100

也可以指定默认图像，请参见

我尝试了这一切-也与杰基尔生成

我为添加了一个

og:image

。您可以在上查看其来源

添加图像之前，Telegram desktop中的预览如下所示：

添加

og:image

后，它看起来如下所示：

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

• 也许你的图像太大了？一些网站建议将预览图像保持在300KB以下
• 您的链接预览已缓存。电报为这个问题提供了一个很好的解决方案。您可以将链接发送到此bot，它将更新缓存

显示Jekyll站点上其他链接的预览 有两种方法可以为Jekyll站点上的链接生成预览：

在服务器上生成链接预览

让客户端使用JavaScript生成预览

服务器端预览生成

• 优势：
  • 您的客户端不需要JavaScript
• 缺点：
  • 预览是随网站生成的，仅在网站更新时更新
  • 自定义插件不适用于GitHub页面

有一个Jekyll插件用于此-：

• 首先安装所需的gems

  nokogiri

  ，

  openuri

  ，

  ruby可读性

  和

  摘要

  ，例如

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

• 现在下载文件

  preview_tag.rb

  ，并将其放入站点的

  \u plugins

  文件夹中

• 创建

  \u缓存

  目录

• 将链接添加到降价中，例如：

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

默认情况下，仅呈现文本：

但是，您可以添加一个方法来提取

og:image

标记：

def get_og_image_url（源代码）
如果source.css（'meta[property=“og:image”]'）。首先
返回source.css（'meta[property=“og:image”]”）。第一个[“content”]
结束
返回“”
结束

我创建了一个fork来演示这一点，您可以轻松地修改它

预览如下所示：

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

• 优势
  • 预览总是最新的
• 缺点
  • 客户端需要JavaScript
  • 大多数工具依赖于外部服务，而且由于

你可能想看看

---

谢谢。这是非常有用的信息。然而，这个问题与向jekyll插入外部limk时显示预览有关post@Croll嗯，我误解了你的问题。尽管如此，我还是有了一些想法，并将更新我的answer@Croll，我写了一个大的更新。我希望这能帮你干得好！我将为服务器端方法添加一种绕过github限制的方法，如果有的话，您仍然可以在本地构建站点，并将结果推送到

gh页面

分支。但是GitHub本身不会为您重建站点