Pandoc 完全独立的 HTML 文件

SAA*_*AAD 5 html javascript embed self-hosting pandoc

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

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

我在使用--self-containedPandoc 中的选项时遇到了这个问题,它只将所有必要的内容(CSS 样式表等)写入 HTML 标头,而主 HTML 文档仍然需要“查看”实际的本地文件。

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

谁能帮助我了解这项任务的难度?

msc*_*lli 4

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

  1. 创建您的子 HTML 文件:
<!-- sub.html -->
<html>
 <head>
  <title>
   Sub HTML
  </title>
 </head>
<body>
 <h1>Sub HTML</h1>
 <p>This is the Sub HTML.</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
  1. 将其文件内容转换为 Base64(例如使用base64encode.org):

PCEtLSBzdWIuaHRtbCATLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0bGU+DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE+DQogPHA+VGhpcyBpcyB0a GUGU3ViIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg==

  1. 创建主 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>
Run Code Online (Sandbox Code Playgroud)

编辑:

由于这个问题是专门询问的pandoc,所以上面是使用 Markdown 的示例:

  1. 创建您的子 Markdown 文件:
# Sub HTML

This is the sub HTML.
Run Code Online (Sandbox Code Playgroud)
  1. 使用以下命令将您的子 Markdown 文件转换为 HTML pandoc
pandoc sub.md > sub.html
Run Code Online (Sandbox Code Playgroud)
  1. 将您的子 HTML 文件转换为 Base64:
base64 < sub.html
Run Code Online (Sandbox Code Playgroud)

PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhUTUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48 L3A+Cg==

  1. 创建通过数据 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==
Run Code Online (Sandbox Code Playgroud)
  1. 使用以下命令将主 Markdown 文件转换为 HTML pandoc
pandoc main.md > main.html
Run Code Online (Sandbox Code Playgroud)