Самые простые способы интеграции 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 +IncludesAddType text/html .htmlAddOutputFilter INCLUDES .html

Используем CodeKit

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

HTML

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *