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