使用 Pandoc 完全 self-contained HTML 个文件

Question

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

我有一个主 HTML 文件，其中包含一些文本、图像...它还包含对其他本地 HTML 文件的内部引用，这些文件放在相对目录中。是否可以制作一个完整的 self-contained HTML 文件，其中其他文件仍被 URL link 引用，但它们的内容只是简单地记录在主文件中？

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

到目前为止，我尝试了iframe标签，但它总是打开，并且不是简单地放在一个页面中，就像one-line URL link .我已经使用 HTML+javascript 阅读了这个 answer 但我不确定这是否与 Pandoc 兼容。

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

Answer 1

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

除此之外，您可以使用散列 links 到 link 到同一 HTML 文件中的数据，例如：

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

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

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

Answer 2

您可以将您的子 HTML 转换为您的主 HTML 中的 Base64 strings and link them using the 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==

创建主 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:

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:

pandoc main.md > main.html

使用 Pandoc 完全 self-contained HTML 个文件

Fully self-contained HTML files with Pandoc

html

javascript

embed

self-hosting

pandoc