Question

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

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

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

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

任何可以帮助我理解这项任务难度的人？

Answer 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 ==

使用目标文件的Base64编码创建主HTML，通过数据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：

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引用一个HTML文件，因此当您关注链接并更改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 个答案: