帶有 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