Самые простые способы интеграции HTML

Меня всегда удивляло то, что в HTML нельзя подключать другие HTML-файлы. Вот если бы можно было так:

HTML

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

   Content

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

Но приведенный выше код не работает.

Многие решают данную проблему с помощью других языков программирования.

Используем PHP

Может, стоит применять PHP?

PHP

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

   Content

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

Код, приведенный выше, обеспечивает подключение на уровне сервера. Запрос будет выполнен в файловой системе на сервере. Поэтому этот способ намного быстрее, чем решение, реализуемое на стороне клиента.

Используем Gulp

Еще быстрее работает предварительная обработка подключения. У Gulp есть множество плагинов для этого. Один из них –gulp-file-include.

Посмотрите код ниже:

HTML

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

   Content

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

Обрабатываем:

JavaScript

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('./'));
});

С помощью этого плагина можно передавать переменные в подключение, что позволяет создавать небольшие компоненты на основе данных.

Используем Grunt

Вот что делает плагин grunt-bake. Настройте Grunt для обработки HTML:

JavaScript

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

Тогда HTML сможет использовать специальный синтаксис для подключений:

HTML

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

   Content

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

Используем Handlebars

У Handlebars есть шаблоны (partials). Их необходимо зарегистрировать:

JavaScript

Handlebars.registerPartial('myPartial', '{{name}}')

Теперь их можно использовать:

HTML

{{> myPartial }}

В Handlebars также доступны средства для оценки и передачи данных. Чтобы запустить их, понадобится плагин типа gulp-handlebars.

Используем Pug

Pug – это препроцессор HTML с новым, более сжатым синтаксисом. Но он использует расширения (includes).

Pug

body
   include ./header.html"

   p Content

   include ./footer.html"

Запустите код, приведенный выше, с помощью gulp-pug.

Используем Nunjucks

Nunjucks тоже содержит расширения. Используйте следующий код:

HTML

<body>
   {% include "./header.html" %}

   Content

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

Если поместить код в файл index.njk, то его можно обработать с помощью простого скрипта Node в index.html:

JavaScript

const nunjucks = require("nunjucks");
const fs = require("fs");

fs.writeFile("index.html", nunjucks.render("index.njk"), function(err, data) {
  if (err) console.log(err);
  console.log("Compiled the Nunjucks, captain.");
});

Также этот код можно обработать с помощью gulp-nunjucks.

Используем Ajax

Допустим, ваш документ выглядит следующим образом:

HTML

<body>
  
  <header></header>
  
  Content.
  
  <footer></footer>

</body>

Можно вывести контент для шапки и подвала из соответствующих шаблонов.

JavaScript

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, то применяйте компоненты.

Используем iframes

Используйте код, приведенный ниже:

HTML

<body>
  
  <iframe src="./header.html"></iframe>
  
  Content.
  
  <iframe src="./footer.html"></iframe>
  
</body>

Обратите внимание, что контент в iframes использует разные DOM. Поэтому код выглядит немного странно.

Но можно заставить iframe вывести свое содержимое на родительской странице, а затем удалить «самого себя».

HTML

<body>
  
  <iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
  
  Content.
  
  <iframe src="footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
  
</body>

Используем Jekyll

Jekyll – это генератор статических сайтов на основе Ruby с включениями. Они сохраняются в папке /_includes/, а затем:

HTML

<body>
  {% include header.html %}
  
  Content.

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

Существует еще множество генераторов статических сайтов. Многие из них поддерживают подключение внешних HTML-файлов.

Используем Sergey

Есть еще один генератор статических сайтов (SSG), который стоит упомянуть. В Sergey есть формат стиля веб-компонентов:

HTML

  <body>
    <sergey-import src="header" />

  Content.

    <sergey-import src="footer" />
  </body>

Назовите файлы header.html и footer.html и поместите их в /includes/. В этом случае Sergey выполнит сборку с обработанными подключениями, когда вы запустите скрипт npm.

Используем Apache SSI

Apache также поддерживает подключения. Введите код, приведенный ниже:

HTML

<body>
		
  <!--#include file="./header.html" -->
  
  Content
  
  <!--#include file="./footer.html" -->
  
</body>

Но вам понадобится правильная конфигурация Apache, чтобы все действия были разрешены. Я старался изо всех сил, чтобы найти рабочую демоверсию, но не смог.

htaccess

Options +Includes

AddType text/html .html
AddOutputFilter INCLUDES .html

Используем CodeKit

CodeKit включает в себя специальный язык Kit, 90% функций которого необходимы только для подключений. Kit использует специальные комментарии в HTML:

HTML

<body>
   <!-- @import "./header.html" -->

   Content

   <!-- @import "./footer.html" -->
</body>

Заключение

Не уверен, что <include>, которые запускают сетевые запросы во всем коде, станут хорошим решением с точки зрения производительности. Использование импорта ES6 напрямую без сборки — тоже не всегда хорошая идея. @import (импорт) CSS в CSS не всегда хорошая идея, но такая возможность есть.

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!

Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, подписки, отклики, лайки, дизлайки огромное вам спасибо!

Ангелина Писанюкавтор-переводчик статьи «The Simplest Ways to Handle HTML Includes»