How TO — Include HTML

Самые простые способы интеграции 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 не всегда хорошая идея, но такая возможность есть.

Оставьте комментарий

Прокрутить вверх