降价文件中 Azure Pipelines 徽章的 Pandoc 问题

Question

背景：我在 GitHub 上有许多存储库，我最近将它们从使用 Travis 转换为用于 CI/CD 的 Azure Pipelines。 Azure 提供了一个徽章，我可以将其放入 repo 的 README.md 以指示构建的状态。到目前为止，一切正常，并且徽章在 GitHub 上正确呈现。

当我尝试使用 pandoc 将 README 转换为 HTML 时，我刚刚发现了一个问题。出于某种原因，它将徽章变成了<embed> 标签而不是<img>，浏览器对此感到窒息。这很重要，因为 repos 是 R 包，当我将它们提交给 CRAN 时，README 会使用 pandoc 转换为 HTML。

这是一个最小的例子。我有 3 个徽章：

• CRAN 包版本
• Azure Pipelines 徽章
• 类似的 Travis 徽章

# Test file

[![CRAN](https://www.r-pkg.org/badges/version/AzureVM)](https://cran.r-project.org/package=AzureVM)
[![Build Status](https://asiadatascience.visualstudio.com/AzureR/_apis/build/status/Azure.AzureVM?branchName=master)](https://asiadatascience.visualstudio.com/AzureR/_build/latest?definitionId=7&branchName=master)
[![Travis Build Status](https://travis-ci.org/cloudyr/AzureRMR.svg?branch=master)](https://travis-ci.org/cloudyr/AzureRMR)

如果我运行pandoc test.md --from markdown --output test.html，结果如下。如果我在 Edge 或 Chrome 中打开此文件，Azure 标志无法显示。

<h1 id="test-file">Test file</h1>
<p>
<a href="https://cran.r-project.org/package=AzureVM">
  <img src="https://www.r-pkg.org/badges/version/AzureVM" alt="CRAN" /></a>
<a href="https://asiadatascience.visualstudio.com/AzureR/_build/latest?definitionId=7&amp;branchName=master">
  <embed src="https://asiadatascience.visualstudio.com/AzureR/_apis/build/status/Azure.AzureVM?branchName=master" /></a>
<a href="https://travis-ci.org/cloudyr/AzureRMR">
  <img src="https://travis-ci.org/cloudyr/AzureRMR.svg?branch=master" alt="Travis Build Status" /></a>
</p>

这是由于 Azure Pipelines 或 Pandoc 造成的吗？ Azure DevOps 项目是公开的，因此访问它应该没有任何问题。我该如何解决这个问题？

Answer 1

这里有很多东西在起作用。

1. Chrome 拒绝渲染这是由于在获取图像时 HTTP 响应中的 X-Frame-Options 标头设置为 sameorigin。打开控制台并查看页面的错误显示

   拒绝在框架中显示“https://asiadatascience.visualstudio.com/AzureR/_apis/build/status/Azure.AzureAuth?branchName=master”，因为它将“X-Frame-Options”设置为“sameorigin” .

   因此，当嵌入到不同域的文档中时，图像不会被渲染。详情请见RFC7034。

2. 第二个问题是 pandoc 使用<embed> 而不是<img>。这已在 pandoc 2.7.3 中解决。来自更新日志：

   HTML 编写器：

   • 根据文件输出视频和音频元素 图片路径的扩展名 (Mauro Bieg)。

因此，您可以尝试从构建状态 HTTP 响应中删除 X-Frame-Options 标头，或者要求 CRAN 管理员更新到 pandoc 2.7.3。

第三种选择可能是使用 HTML 来包含徽章：

<a href="https://asiadatascience.visualstudio.com/AzureR/_apis/build/status/Azure.AzureVM?branchName=master"><img src="https://asiadatascience.visualstudio.com/AzureR/_build/latest?definitionId=7&branchName=master" /></a>

在 Markdown 中包含 HTML 是完全可以的，它在 GitHub 上和使用 pandoc 处理时都可以很好地呈现。缺点是在导出到 PDF 时，徽章不会显示。但是在 PDF 中静态包含这样的徽章可能会违背其目的，所以这应该是一个很好的解决方案。