包含(處理)HTML的最簡單方法包括

王子飛發表於2021-01-13
HTML

HTML從來沒有任何方法可以在其中包含其他HTML檔案，這讓我感到非常驚訝。似乎也沒有任何東西可以解決這個問題。我說的是直接包含，例如獲取一部分HTML並將其直接放入另一個。例如，整個網際網路的大部分用例，所有頁面都包含一個頁首和頁尾：

...
<body>
   <include src="./header.html"></include>

   Content

   <include src="./footer.html"></include>
</body>
...

順便說一下，那不是真的。我只是希望如此。

人們一直在尋找其他語言來為他們解決這個問題。從某種意義上說，它是HTML預處理。在預處理CSS之前很久，我們就使用工具來操縱HTML。而且我們仍然如此，因為包含的想法在世界上幾乎每個網站上都很有用。

使用PHP

您可以改用PHP嗎？

...
<body>
   <?php include "./header.html" ?>

   Content

   <?php include "./footer.html" ?>
</body>
...

這將在伺服器級別執行包含，使請求在伺服器上的檔案系統級別發生，因此它應該比客戶端解決方案快得多。

使用 gulp

有什麼比伺服器端包含的更快？Gulp有多種可以做到這一點的處理器。一種是gulp-file-include。

看起來像這樣：

...
<body>
   @@include('./header.html')

   Content

   @@include('./footer.html')
</body>
...

您將像這樣處理它：

var fileinclude = require('gulp-file-include'),
  gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

看起來這個特定的外掛具有精美的功能，您可以在其中將變數傳遞給include，從而可以製作很少的資料驅動元件。

使用 Grunt

這就是 grunt-bake 外掛的功能。您可以將Grunt配置為處理HTML：

grunt.initConfig({
    bake: {
        your_target: {
            files: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

然後，您的HTML可以使用以下特殊語法：

...
<body>
   <!--(bake header.html)-->

   Content

   <!--(bake footer.html)-->
</body>
...

使用 Pug

Pug是HTML預處理程式，它具有HTML的全新語法，簡潔得多。

...
body
   include ./header.html"

   p Content

   include ./footer.html"

   ...

然後用gulp-pug之類的東西執行它。

使用Ajax

<body>

  <header></header>

  Content.

  <footer></footer>

</body>

您可以從各個檔案中獲取頁首和頁尾的內容，然後將其轉儲到其中。

fetch("./header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("header").innerHTML = data;
  });

fetch("./footer.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("footer").innerHTML = data;
  });

說到JavaScript…如果您要使用幾乎所有型別的JavaScript框架來構建網站，那麼通過元件進行構建都是其中的主要任務，並且不希望破壞要包含在其他檔案中的部分。

使用iframe

<body>

  <iframe src="./header.html"></iframe>

  Content.

  <iframe src="./footer.html"></iframe>

</body>

但是這些iframe中的內容沒有共享相同的DOM，所以這有點奇怪，更不用說樣式緩慢且笨拙了（因為iframe不知道其內容的高度）。

使用 Jekyll

Jekyll是基於Ruby的靜態網站生成器，其中包含include。您將包含/_includes/檔案包含在該資料夾中，然後：

<body>
  {% include header.html %}

  Content.

  {% include footer.html %}
</body>

Jekyll是一個很大的公司，所以我在這裡稱呼它，但是有大量的靜態站點生成器，我敢打賭它們中的任何一個都可以做。

轉:The Simplest Ways to Handle HTML Includes

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章