How to include in html text

The Simplest Ways to Handle HTML Includes

It’s extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that addresses it. I’m talking about straight up includes, like taking a chunk of HTML and plopping it right into another. For example the use case for much of the entire internet, an included header and footer for all pages:

That’s not real, by the way. I just wish it was. People have been looking to other languages to solve this problem for them forever. It’s HTML preprocessing, in a sense. Long before we were preprocessing our CSS, we were using tools to manipulate our HTML. And we still are, because the idea of includes is useful on pretty much every website in the world.

This will perform the include at the server level, making the request for it happen at the file system level on the server, so it should be far quicker than a client-side solution.

What’s even faster than a server-side include? If the include is preprocessed before it’s even on the server. Gulp has a variety of processors that can do this. One is gulp-file-include. That would look like this:

. @@include('./header.html') Content @@include('./footer.html') . 

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

Looks like this particular plugin has fancy features where you can pass in variables to the includes, making it possible to make little data-driven components.

Handlebars.registerPartial('myPartial', '>')

There is also fancy features of this that allow for evaluation and passing data. You’ll still need a processor to run it, probably something like gulp-handlebars. Speaking of templating languages which make use of curly braces… Mustache has them, too.

Pug is an HTML preprocessor that has a whole new syntax for HTML that is a bit more terse. It’s got includes though.

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

If you put that in a file called index.njk , you could process it with a simple Node script into index.html like this:

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."); >);

Or process it with something like gulp-nunjucks. 11ty has Nunjucks built-in, along with many of the other mentioned so far. Might be good for you if you’re actually building a little site.

You could fetch the contents for the header and footer from respective files and dump the contents in.

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; >);

Speaking of JavaScript… If you’re building your site using a JavaScript framework of just about any kind, building through components is kind of the main deal there and breaking parts you want to include in other files should be no problem. Some kind of import Header from «./header.js»; and

is the territory you’d be in in React land.

  Content.  

But the content in those iframes does not share the same DOM, so it’s a bit weird, not to mention slow and awkward to style (since iframes don’t know the heights of their contents). Scott Jehl documented a cool idea though: You can have the iframe inject the content of itself onto the parent page then remove itself.

Kolya Korruptis wrote in with this adaptation which will include more than the first child of the body in case your HTML file has that:

Jekyll is a Ruby-based static site generator with includes. You keep your includes in the /_includes/ folder, then:

Jekyll is a big one, so I’m calling it out here, but there are a ton of static site generators and I’d wager any of them can do includes.

OK, I’ll call out one more SSG because it’s new and super focused. Sergey has a web components style format:

You’d name the files header.html and footer.html and put them in /includes/ and then it’ll make a build with the includes processed when you run the npm script it has you do.

But you need the right Apache configuration to allow stuff. I tried my best to get a working demo going but didn’t have much luck. I tried using .htaccess within a folder on an Apache server and flipping on what I thought was the right stuff:

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

I’m sure there is some way to get it working though, and if you do, it’s kinda neat that it needs zero other dependencies.

Mac only, but CodeKit has a special language called Kit it processes where 90% of the point of it is HTML includes. It uses special HTML comments:

That’s a lot of ways, isn’t it? Like I said at the top, it’s very surprising to me that HTML itself hasn’t addressed this directly. Not that I think it would be a great idea for performance to have statements that trigger network requests all over our code, but it seems in-line with the platform. Using ES6 imports directly without bundling isn’t a great idea always either, but we have them. @import ing CSS within CSS isn’t a great idea always, but we have it. If the platform had a native syntax, perhaps other tooling would key off that, much like JavaScript bundlers support the ES6 import format.

Источник

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

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

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

Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Люди искали другие языки, чтобы решить эту проблему. В некотором смысле, это предварительная обработка HTML. Задолго до того, как мы обрабатывали CSS, мы использовали инструменты для манипулирования HTML. И мы до сих пор делаем это, потому что идея включений полезна практически для любого веб-сайта в мире.

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

Можете ли вы использовать вместо этого PHP?

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

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

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

И вы бы обработали это так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Или обработайте это чем-то вроде gulp-nunjucks. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.

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

Вы можете получить содержимое для заголовка и футера из соответствующих файлов и вывести содержимое.

Говоря о JavaScript … Если вы создаете сайт с использованием практически любого JavaScript-фреймворка, построение с помощью компонентов является одной из основных идей, и разбивка на части, которые вы хотите включить в другие файлы, не должна стать проблемой. Что-то вроде import Header from «./header.js»; и является территорией React.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Chris Coyier

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

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

Источник