Главная » Статьи » Самые простые способы обработки включений HTML в HTML

Самые простые способы обработки включений HTML в HTML

Самые простые способы обработки включений HTML в 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('./'));
});

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

Использовать 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>
...

Использовать Handlebars

У Handlebars есть партиалы. Вы регистрируете их:

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

И после этого используете:

{{> myPartial }}

Есть также причудливые функции, которые позволяют оценивать и передавать данные. Вам все еще понадобится процессор, чтобы запустить их, вероятно, что-то вроде gulp-handlebars. Говоря о языках шаблонов, которые используют фигурные скобки … Mustache тоже имеет их.

Использовать Pug

Pug — это препроцессор HTML с совершенно новым синтаксисом для HTML, который немного более лаконичен. Хотя он поддерживает включения.

...
body include ./header.html" p Content include ./footer.html" ...

Затем вы запускаете это с чем-то вроде gulp-pug.

Использовать Nunjucks

Я люблю Nunjucks! Nunjucks имеет включения. Мы бы сделали это так:

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

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

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. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.

Использовать 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-фреймворка, построение с помощью компонентов является одной из основных идей, и разбивка на части, которые вы хотите включить в другие файлы, не должна стать проблемой. Что-то вроде import Header from «./header.js»; и <Header /> является территорией React.

Использовать фреймы

Вы могли бы сделать это:

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

Но содержимое в этих iframe не использует тот же DOM, поэтому это немного странно, не говоря уже о том, что этот стиль медленный и неудобный (поскольку iframes не знает высоты содержимого).

Скотт Джел задокументировал классную идею: вы можете заставить iframe внедрить свое содержимое на родительскую страницу, а затем удалить самого себя.

<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/, а затем:

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

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

Использовать Sergey

Хорошо, я назову еще один SSG, потому что он довольно новый и очень компактный. В Sergey есть формат стиля веб-компонентов:

<body> <sergey-import src="header" /> Content. <sergey-import src="footer" />
</body>

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

Использовать Apache SSI

Apache, супер-пупер общий веб-сервер, он может выполнять включения. Вы можете сделать это так:

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

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

Options +Includes AddType text/html .html
AddOutputFilter INCLUDES .html

Я уверен, что есть какой-то способ заставить это работать, и если вы это сделаете, то это здорово, что ему не нужно других зависимостей.

Использовать CodeKit

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

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

Использовать Dreamweaver

Lol, шутка. Но это действительно работает.

Черт побери. Это довольно много способов, не так ли?

Как я сказал в начале, меня очень удивительно, что сам HTML не обращался к этому напрямую. Не то чтобы я думал, что для производительности было бы хорошей идеей иметь операторы <include>, запускающие сетевые запросы по всему коду, но это есть в других платформах. Использование импорта ES6 напрямую без упаковки тоже не всегда хорошая идея, но у нас это есть. Использование @import в CSS не всегда хорошая идея, но она у нас есть. Если бы у платформы был собственный синтаксис, возможно, другие инструменты смогли бы использовать это, подобно тому, как упаковщики JavaScript поддерживают формат импорта ES6.

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.