使用 Pandoc 的完全独立的 HTML 文件答案

【问题标题】：Fully self-contained HTML files with Pandoc使用 Pandoc 的完全独立的 HTML 文件
【发布时间】：2015-10-02 23:05:59
【问题描述】：

我对 HTML 和 Javascript 知之甚少，我想了解以下内容：

我有一个主 HTML 文件，其中包含一些文本、图像……它还包含对其他本地 HTML 文件的内部引用，这些文件放在相对目录中。是否可以制作一个完全独立的 HTML 文件，其中其他文件仍由 URL 链接引用，但其内容仅记录在主文件中？

我在使用 Pandoc 中的 --self-contained 选项时遇到了这个问题，它只将所有必要的东西（CSS 样式表，...）写入 HTML 标题，而主 HTML 文档仍然需要“查看”实际的本地文件。

到目前为止，我尝试了iframe标签，但它总是被打开，而不是简单的放在一个页面中，就像一个单行的URL链接。我已经使用 HTML+javascript 阅读了这个answer，但我不确定这是否与 Pandoc 兼容。

谁能帮我理解这个任务的难度？

【问题讨论】：

我不明白这个问题。 JavaScript 可以构建 HTML，无论如何你都应该使用外部脚本 srcs。
不管怎么做，问题是是否可以将slave.html 完全写在master.html 中，然后使用普通超链接调用它？
在 JavaScript 中，其他脚本标签可以访问上面的脚本。
我将尝试阅读有关 Javascript 的更多信息以了解它如何构建 HTML，因为在我的情况下它必须通过 Pandoc 完成。
您是否在问如何生成一个 HTML 文件，其中包含指向某个文件夹中所有文件的链接？如果是这样，这与pandoc无关。是的，您可以使用 javascript（使用 node.js）来做到这一点，但您也可以使用任何其他编程语言来做到这一点。

标签： javascript html embed pandoc self-hosting

【解决方案1】：

您可以将您的子 HTML 转换为 Base64 字符串，并在您的主 HTML 中使用 Data URI scheme 链接它们：

创建您的子 HTML 文件：

<!-- sub.html -->
<html>
 <head>
  <title>
   Sub HTML
  </title>
 </head>
<body>
 <h1>Sub HTML</h1>
 <p>This is the Sub HTML.</p>
</body>
</html>

将其文件内容转换为 Base64（例如使用base64encode.org）：

PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0bGU + DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE + DQogPHA + VGhpcyBpcyB0aGUgU3ViIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg == P>

使用目标文件的 Base64 编码创建主 HTML，通过 Data URI 链接子 HTML：

<!-- main.html -->
<html>
 <head>
  <title>
   Main HTML
  </title>
 </head>
<body>
 <h1>Main HTML</h1>
 <p> This is the Main HTML. </p>
 <p>
  <a href="sub.html">
    This link to the sub HTML
  </a>
  references the target by its (relative) path and won't work without the
  2nd file.
  <br>
  <a href="data:text/html
          ;UFT8
          ;base64,PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0b
                  GU+DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2
                  R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE+DQogPHA+VGhpcyBpcyB0aGUgU3V
                  iIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg==
          ">
    This link to the sub HTML
  </a>
  references the target by its Base64 encoding and will work without the
  2nd file.
 </p>
</body>
</html>

编辑：

由于这个问题是专门针对pandoc提出的，这里是上面使用Markdown的例子：

创建您的子 Markdown 文件：

# Sub HTML

This is the sub HTML.

使用 pandoc 将您的子 Markdown 文件转换为 HTML：

pandoc sub.md > sub.html

将您的子 HTML 文件转换为 Base64：

base64 < sub.html

PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhUTUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48 L3A+Cg==

创建您的主要 Markdown 文件，通过数据 URI 引用子 HTML 文件：

# Main HTML

This is the main HTML.

[This link to the sub HTML][relative_path] references the target by its
(relative) path and won't work without the 2nd file.
[This link to the sub HTML][data_uri] references the target by its Base64
encoding and will work without the 2nd file.

[relative_path]: sub.html
[data_uri]: data:text/html;ASCII-US;base64,PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhU
TUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48L3A+Cg==

使用 pandoc 将您的主要 Markdown 文件转换为 HTML：

pandoc main.md > main.html

【讨论】：

【解决方案2】：

通常一个 HTML 文件由一个 URL 引用，因此当您点击链接并更改 URL 时，您会导航到一个新文件。以某种方式打包多个文件，例如发明了 EPUB 文件格式（本质上是 HTML 文件的压缩集合，pandoc 也可以生成它）。

除此之外，您可以使用哈希链接来链接到同一 HTML 文件中的数据，例如：

See <a href="#my-section">section 1</a>.

<h1 id="my-section">My section</h1>

您还可以制作一些 JavaScript 并将其嵌入 HTML 文件中。然后，该 JavaScript 将隐藏所有部分，除了当前位于浏览器哈希中的部分（如 myhtmlfile.html#my-section）。

【讨论】：

我需要尝试您提供的 HTML sn-p，尽管在单击相应链接之前我看不到“我的部分”是如何隐藏的。如果 Pandoc 过滤器在 markdown 源代码中调用例如 include{file_to_link.html} 时会这样做，我真的觉得很有趣，我仍然是这些东西的初学者
sn-p 不包含隐藏内容的JS，只需滚动到标题即可。我认为有 pandoc 过滤器可以包含文件，但您也可以像 pandoc file1.md file2.md 一样将它们连接起来
pandoc 手动连接将按照命令行顺序包含所有降价内容，因此所有内容都将在 HTML 输出中可见。我建议中的include{file_to_link.html} 将实现类似于您的答案或此question 接受的答案的内容@
编写脚本来收集文件应该不会太难，将它们包装在divs 中，就像您链接到的答案一样，然后将其传递给 pandoc，它允许 raw-html 内联在它的降价中。