Gist 是 GitHub 的一项服务,可让您轻松地在 Internet 上共享代码示例和评论。如果你想使用 Gist 在你的 WordPress 网站上共享代码,这里是如何轻松地将 Gist 嵌入到博客文章中。

我确实在元博客共享了很多代码,主要是因为有关自定义 WordPress 主题和插件的小技巧。在 Gist 上创建代码示例并在 WordPress 上共享它们总是很容易。

它不仅看起来干净,为您的读者提供方便的界面,还提供语言语法支持。唯一的问题是 WordPress 不提供 Gist 的直接嵌入选项,因此您需要在帖子中手动添加 Gist。

在 WordPress 博客文章中嵌入 Gist

您可以通过多种方式在 WordPress 博客文章中嵌入 Gist,我们将在本文中介绍所有这些选项。

我在这个博客上使用 GeneratePress WordPress 主题,它提供了惊人的自定义选项。因此,我更喜欢没有 Gist 支持的插件解决方案,并且不在这里使用任何 WordPress 插件。如果您愿意的话,我会讨论一些 WordPress 插件。

首先,让我们了解如何在 WordPress 博客文章中嵌入 Gist。

Gist 提供了一个嵌入代码,您可以从 Gist 页面获取。我们需要复制该代码并将其放置在我们要显示 Gist 的页面上。

古腾堡块

虽然 WordPress 上没有对 Gist 的官方支持,但您仍然可以在 Gutenberg Blocks 的帮助下轻松地将 Gist 添加到您的 WordPress 帖子中。 Gutenberg 编辑器带有一个名为 Custom HTML 的块。

只需添加自定义 HTML 块并将嵌入代码粘贴到该块中。就是这样,您将 Gist 添加到您的 WordPress 帖子中。

你甚至可以使用"在 WordPress Gutenberg 编辑屏幕中查看 Gist 的预览模式。

如果您使用的是 Gutenberg 编辑器,则只需将 Gist 添加到博客文章中。此方法适用于所有未在其博客上使用 AMP 页面的博客。

AMP 页面去除页面上的所有直接脚本标签,这意味着使用此方法添加的 Gists 在 AMP 页面上将不可见。如果您在博客上使用 AMP 页面,则可能需要使用下一个添加 Gist 的方法。

Key Shortcodes

正如我之前提到的,我更喜欢本地解决方案而不是为每个小工作安装插件。所以我创建了一个适用于大多数 WordPress 网站的 WordPress 简码。

p>

如果您要发布 AMP 页面并希望它们支持 Gist 摘录,我们可以使用一个简单的短代码。短代码应识别页面是否为 AMP,并为 Gist 放置一个 AMP 兼容的标签。

我正在使用 AMP WordPress 插件在 MetaBlogue 上生成 AMP 页面。如果在页面上识别到 Gist 标签,它将自动添加 Gist 脚本。所以我只需要为 AMP 页面添加标签。如果您使用任何其他 AMP 插件,请检查该插件的 Gist 支持。

您可以以多种格式使用此短代码以在您的页面上包含要点。它可以根据您提供的参数显示完整的 Gist 或 Gist 中的特定文件。

[gist]摘要代码段ID[/gist]
[gist id="Gist-snippet-ID" file="Gist-file-name" /]
[gist id ="Gist-snippet-ID" /]

您可以使用上述任何一种格式,它会自动将其转换为嵌入在常规页面和 AMP 页面中的 Gist。该代码会检查它是否是 AMP 网页并相应地输出标签,以便它能在您的网站上正常运行。

您可以将代码添加到 function.php,您的网站上将提供简码。只需使用简码块将项目符号点添加到您的页面。

根据您在网站上使用的 AMP 插件,可能需要对代码进行小幅修改。您需要根据插件中提供的功能修改这些行以正确识别 AMP 页面。

JetPack WordPress 插件

如果您在博客上使用 JetPack WordPress 插件,则不需要任何东西。该插件带有 Gist 嵌入支持。您可以从 Jetpack → 设置 → 写入启用短代码嵌入模块。

启用“短码嵌入” 模块,您可以使用要点 URL 或短代码将要点摘要嵌入到页面中。这里是关于支持的短代码格式。

最简单的方法是将 Gist URL 直接粘贴到页面上。只需确保将其写为文本而不是链接,JetPack 会完成剩下的工作。它还支持 AMP 页面,因此项目符号也可以在 AMP 页面上正确显示。

我个人更喜欢使用短代码格式,因为您可以轻松地从您的博客文章中删除简码,就像您以后想要删除 JetPack 插件一样。我将使用下面的格式作为上面简码和 Jetpack 之间的通用格式,这意味着我可以轻松地在支持之间切换而无需编辑帖子。

[gist]Summary Snippet ID[/gist]

WordPress 存储库中还有其他几个可用的插件。它们已经很久没有更新了,但仍然您将使用经典编辑器。

对 Gutenberg 编辑器和 AMP 页面提供的支持非常少,因此我建议在安装任何其他插件之前检查支持情况。

完全披露:这篇文章可能包含附属链接,这意味着,如果您单击其中一个链接并进行购买,我们可能会收到佣金(无需额外费用)。我们只超链接我们认为能为我们的受众增加价值的产品。这些产品不提供经济补偿。