带有 Pandoc 的完全独立的 HTML 文件

Question

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

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

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

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

谁能帮助我了解此类任务的难度？

Answer 1

您可以将子 HTML 转换为Base64字符串，并使用主 HTML 中的数据 URI 方案链接它们：

创建您的子 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 ==

创建主 HTML，通过数据 URI 与目标文件的 Base64 编码链接子 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==

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

# 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

Answer 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 ）。

带有 Pandoc 的完全独立的 HTML 文件

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-02-06 10:09:26

解决方案2
0 2015-10-06 12:17:05

带有 Pandoc 的完全独立的 HTML 文件

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-02-06 10:09:26

解决方案2 0 2015-10-06 12:17:05

解决方案1
2 已采纳 2016-02-06 10:09:26

解决方案2
0 2015-10-06 12:17:05