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

Question

I have little knowledge in HTML and Javascript, and I want to know the following:我对 HTML 和 Javascript 知之甚少，我想知道以下内容：

I have a master HTML file which contains some text, images ... and it also contains internal references to other local HTML files, which are put in a relative directory.我有一个主 HTML 文件，其中包含一些文本、图像......，它还包含对其他本地 HTML 文件的内部引用，这些文件放在相对目录中。 Is it possible to make a fully self-contained HTML file, where the other files are still referenced by URL links but their content is simply recorded in the master file ?是否可以制作一个完全独立的 HTML 文件，其中其他文件仍由 URL 链接引用，但它们的内容只是记录在主文件中？

I had this problem using the --self-contained option in Pandoc, which only writes all the necessary stuff (CSS stylesheet, ...) into the HTML header, while the master HTML document still needs the "see" the actual local files.我在使用 Pandoc 中的--self-contained选项时遇到了这个问题，它只将所有必要的东西（CSS 样式表，...）写入 HTML 标题，而主 HTML 文档仍然需要“查看”实际的本地文件.

So far, I tried the iframe tag, but it is always opened, and is not simple put in a page,like a one-line URL link.到目前为止，我尝试了iframe标签，但它总是打开的，并不是简单的放在一个页面中，就像一个单行的 URL 链接。 I have read this answer using HTML+javascript but I am not sure if this compatible with Pandoc.我已经使用 HTML+javascript 阅读了这个答案，但我不确定这是否与 Pandoc 兼容。

Anyone who can help me understand the difficulty of such task ?谁能帮助我了解此类任务的难度？

Answer 1

You could convert your sub HTMLs into Base64 strings and link them using the Data URI scheme in your main HTML:您可以将子 HTML 转换为Base64字符串，并使用主 HTML 中的数据 URI 方案链接它们：

Create your sub HTML file:创建您的子 HTML 文件：

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

Convert its file content to Base64 (eg using base64encode.org ):将其文件内容转换为 Base64（例如使用base64encode.org ）：

PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0bGU+DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE+DQogPHA+VGhpcyBpcyB0aGUgU3ViIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg== PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0bGU + DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE + DQogPHA + VGhpcyBpcyB0aGUgU3ViIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg ==

Create your main HTML linking the sub HTML by a Data URI with the Base64 encoding of the target file:创建主 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>

edit:编辑：

Since the question was specifically asked about pandoc , here is the above example using Markdown:由于问题是专门询问pandoc ，这里是上面使用 Markdown 的示例：

Create your sub Markdown file:创建您的子 Markdown 文件：

# Sub HTML

This is the sub HTML.

Convert your sub Markdown file to HTML using pandoc :使用pandoc将您的子 Markdown 文件转换为 HTML：

pandoc sub.md > sub.html

Convert your sub HTML file to Base64:将您的子 HTML 文件转换为 Base64：

base64 < sub.html

PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhUTUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48 L3A+Cg== PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhUTUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48 L3A+Cg==

Create your main Markdown file referencing the sub HTML file by a Data URI:创建通过数据 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==

Convert your main Markdown file to HTML using pandoc :使用pandoc将您的主要 Markdown 文件转换为 HTML：

pandoc main.md > main.html

Answer 2

Usually one HTML file is referenced by one URL, so when you follow links and change the URL you navigate to a new file.通常一个 HTML 文件由一个 URL 引用，因此当您点击链接并更改 URL 时，您会导航到一个新文件。 To somehow package multiple files, for example the EPUB file format has been invented (is essentially a zipped collection of HTML files, pandoc can also generate it).为了以某种方式打包多个文件，例如已经发明了 EPUB 文件格式（本质上是 HTML 文件的压缩集合，pandoc 也可以生成它）。

Other than that, you could use hash links to link to data in the same HTML file, like:除此之外，您可以使用哈希链接链接到同一 HTML 文件中的数据，例如：

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

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

You could then also craft some JavaScript and embed it in the HTML file.然后，您还可以制作一些 JavaScript 并将其嵌入到 HTML 文件中。 That JavaScript would then hide all sections except the one that is currently in the hash of the browser (as in myhtmlfile.html#my-section ).然后，该 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