Markdown 链接转义布局答案

【问题标题】：Markdown link escaping layoutMarkdown 链接转义布局
【发布时间】：2015-06-05 23:02:10
【问题描述】：

我有一个使用 Bootstrap 和 Jekyll 制作的网站。我最近遇到了一个问题，在博客文章中，如果作者的姓名是超链接的（例如，链接到 Google+ 个人资料），则在正文上方会显示一个 html 的 sn-p，就好像 HTML 语法被破坏了一样。我不是真的如何解释它的样子，所以here's a screenshot

博文是用markdown写的，布局是一个单独的HTML文件。这里是the code in question, including the layout code，但基本上文件是这样的：

--- layout: post (some other front matter metadata) ---

by [author](link)

未链接的作者姓名不存在此问题，并且博客提要页面上不会出现此问题。此外，如果我在副行上方的行中放置一些文本，sn-p 就会消失。我怎样才能摆脱这个错误？我的markdown好像有错误。

编辑：如果有帮助，我在 config.yml 中的 markdown 荧光笔是 pygments

【问题讨论】：

Markdown 生成的 HTML 是什么？您能否将我们指向有问题的页面，或者至少在您的浏览器中使用“查看源代码”并将 HTML 复制/粘贴到您的帖子中？
@Waylan 我刚刚将它添加到 Gist 中。看起来问题可能出在meta 标记中

标签： html twitter-bootstrap markdown jekyll github-pages

【解决方案1】：

错误源于包含 html 输出的要点的第 16 到 18 行，这是它的来源：

<meta property="og:description" content="<p>by <a href="https://plus.google.com/+NickSuch/">Nick Such</a></p>

" >

这意味着生成的错误输出不是来自您的帖子布局或降价，而是提供的head 包含在主题中的方式是解析数据。您必须将其追溯到page 布局中使用的标题，因为帖子布局正在使用它。当您在“by”行上方添加一些文本时，可能会正确关闭生成的 HTML，然后问题就“隐藏”了。

参考cmets，这里总结一下问题和解决方法：

主要问题是帖子包含将被解析为 HTML 标记的降价，然后将其放入og:descriptionmeta property。

这是 header 包含主题布局的原始模板代码。

<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt }}{% else %}{{ site.description }}{% endif %}" >

解决方案是在将 HTML 代码放入 meta property 之前删除所有 HTML，因为元属性 content 中不允许使用 HTML 代码。这可以通过@Erik 提到的strip_html Liquid 代码来完成。 Read the documentation here

<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description | strip_html }}{% endif %}" />

（HTML 标签也应该用/ 关闭，如果它们是用于正确关闭标签的单行代码）

【讨论】：

这里是主题代码：github.com/ainc/awesomeincu-2015/blob/gh-pages/_layouts/… 看起来标签设置为<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt }}{% else %}{{ site.description }}{% endif %}" > 所以它采用了帖子的第一段（在本例中为 by 行）并将其用作摘录，但不知何故破坏了标签
不要认为元描述可以包含 HTML。因此解决方法是使用没有解析 html 的 page.excerpt，或者添加一个包含帖子简短描述的 YAML 变量，然后执行 {{ page.brief }} 而不是 {{ page.excerpt } }
我认为 Liquid 有一个过滤器也可以修剪/转义这些东西。
天哪，@ErikGillespie 不知道它的存在！在这种情况下，@irowe 您可以像{{ site.description | strip_html }} 一样将| strip_html 放入page.excerpt 和site.description，看看问题是否消失。
@erikgillespie 成功了！我将元标记更改为<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description }}{% endif %}" >，现在标记中没有html

【解决方案2】：

感谢@Erikgillespie，我想通了。

看起来问题出在页面布局中，其中有一个 meta 标记，如下所示：<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt }}{% else %}{{ site.description }}{% endif %}" >

它将第一段（在本例中为带链接的 by 行）作为摘录，生成为 HTML 并放置在 meta 标记中。由于标签不能包含 HTML，它破坏了标签。

解决方案是将strip_html 液体标签放在meta 中，这样它就可以传递纯文本，而不是html：<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description }}{% endif %}" > 把它放在_layouts/page.html 中解决了它。

【讨论】：