Me sorprende muchísimo que HTML nunca haya tenido forma de incluir otros archivos HTML dentro de él. Tampoco parece haber nada en el horizonte que lo aborde. Estoy hablando de inclusiones directas, como tomar un trozo de HTML y colocarlo directamente en otro. Por ejemplo, el caso de uso de gran parte de Internet, un encabezado y pie de página incluidos para todas las páginas:
...
<body>
<include src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html"></include>
Content
<include src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html"></include>
</body>
...Eso no es real, por cierto. Solo desearía que lo fuera.
La gente siempre ha estado buscando en otros idiomas para resolver este problema. Es preprocesamiento HTML, en cierto sentido. Mucho antes de preprocesar nuestro CSS, usábamos herramientas para manipular nuestro HTML. Y todavía lo somos, porque la idea de las inclusiones es útil en casi todos los sitios web del mundo.
Utilice PHP
¿Puedes usar PHP en su lugar?
...
<body>
<?php include "https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html" ?>
Content
<?php include "https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html" ?>
</body>
...Esto realizará la inclusión a nivel del servidor, haciendo que la solicitud suceda en el nivel del sistema de archivos en el servidor, por lo que debería ser mucho más rápido que una solución del lado del cliente.
Utilice Gulp
¿Qué es incluso más rápido que una inclusión del lado del servidor? Si la inclusión está preprocesada incluso antes de que esté en el servidor. Gulp tiene una variedad de procesadores que pueden hacer esto. Uno es gulp-file-include.
Eso se vería así:
...
<body>
@@include("https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html")
Content
@@include("https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html")
</body>
...Y lo procesarías como:
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('./'));
});Parece que este complemento en particular tiene características sofisticadas en las que puede pasar variables a las inclusiones, lo que hace posible crear pequeños componentes basados en datos.
Utilice Grunt
Esto es lo que hace el complemento grunt-bake. Configurarías Grunt para procesar tu HTML:
grunt.initConfig({
bake: {
your_target: {
files: {
"dist/index.html": "app/index.html",
}
}
}
});Entonces su HTML puede usar esta sintaxis especial para incluye:
...
<body>
<!--(bake header.html)-->
Content
<!--(bake footer.html)-->
</body>
...Usar manillares
Tiene manillares parciales.
Los registras:
Handlebars.registerPartial('myPartial', '{{name}}')Entonces úsalos:
{{> myPartial }}También hay características sofisticadas de esto que permiten la evaluación y el paso de datos. Todavía necesitará un procesador para ejecutarlo, probablemente algo así como gulp-handlebars.
Hablando de lenguajes de plantillas que utilizan llaves … Moustache también las tiene.
Utilice Pug
Pug es un preprocesador de HTML que tiene una sintaxis completamente nueva para HTML que es un poco más concisa. Sin embargo, tiene incluye.
...
body
include ./header.html"
p Content
include ./footer.html"
...Luego lo ejecuta con algo como gulp-pug.
Utilice Nunjucks
¡Me encantan algunos Nunjucks! Nunjucks tiene incluye. Lo harías así:
...
<body>
{% include "https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html" %}
Content
{% include "https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html" %}
</body>
...Si pones eso en un archivo llamado index.njk, puede procesarlo con un simple script de Node en index.html como este:
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.");
});O procéselo con algo como gulp-nunjucks.
11ty tiene Nunjucks incorporados, junto con muchos de los otros mencionados hasta ahora. Podría ser bueno para ti si realmente estás construyendo un pequeño sitio.
Utilice Ajax
Di que tenías …
<body>
<header></header>
Content.
<footer></footer>
</body>Puede recuperar el contenido del encabezado y pie de página de los archivos respectivos y volcar el contenido en formato.
fetch("https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("https://css-tricks.com/the-simplest-ways-to-handle-html-includes/header").innerHTML = data;
});
fetch("https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("https://css-tricks.com/the-simplest-ways-to-handle-html-includes/footer").innerHTML = data;
});Hablando de JavaScript… Si está construyendo su sitio usando un marco de JavaScript de casi cualquier tipo, construir a través de componentes es una especie de negocio principal allí y romper las partes que desea incluir en otros archivos no debería ser un problema. Alguna clase de import Header from "./header.js"; y <Header /> es el territorio en el que estarías en React Land.
Usar iframes
Podrías hacer esto:
<body>
<iframe src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html"></iframe>
Content.
<iframe src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html"></iframe>
</body>Pero el contenido en esos iframes no comparte el mismo DOM, por lo que es un poco extraño, sin mencionar que es lento y difícil de diseñar (ya que los iframes no conocen la altura de su contenido).
Sin embargo, Scott Jehl documentó una idea genial: puede hacer que el iframe inyecte el contenido de sí mismo en la página principal y luego se elimine.
<body>
<iframe src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
Content.
<iframe src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
</body>Kolya Korruptis escribió con esta adaptación que incluirá más que el primer hijo del cuerpo en caso de que su archivo HTML tenga eso:
<iframe src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/included.html" onload="this.insertAdjacentHTML('afterend', (this.contentDocument.body||this.contentDocument).innerHTML);this.remove()"></iframe>Utilice Jekyll
Jekyll es un generador de sitios estáticos basado en Ruby con incluye. Mantienes tus inclusiones en el /_includes/ carpeta, luego:
<body>
{% include header.html %}
Content.
{% include footer.html %}
</body>Jekyll es uno grande, así que lo estoy diciendo aquí, pero hay un montón de generadores de sitios estáticos y apuesto a que cualquiera de ellos puede incluirlos.
Utilice Sergey
Bien, llamaré un SSG más porque es nuevo y súper enfocado. Sergey tiene un formato de estilo de componentes web:
<body>
<sergey-import src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/header" />
Content.
<sergey-import src="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/footer" />
</body>Nombrarías los archivos header.html y footer.html y ponerlos en /includes/ y luego hará una compilación con las inclusiones procesadas cuando ejecute el script npm que tiene que hacer.
Utilice Apache SSI
Apache, un servidor web muy común, puede incluir archivos. Lo haces así:
<body>
<!--#include file="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html" -->
Content
<!--#include file="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html" -->
</body>Pero necesita la configuración adecuada de Apache para permitir cosas. Hice todo lo posible para que funcionara una demostración, pero no tuve mucha suerte.
Intenté usar .htaccess dentro de una carpeta en un servidor Apache y cambiando lo que pensé que era lo correcto:
Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .htmlSin embargo, estoy seguro de que hay alguna forma de hacerlo funcionar, y si lo hace, es un poco genial que no necesite otras dependencias.
Usar CodeKit
Solo Mac, pero CodeKit tiene un lenguaje especial llamado Kit que procesa donde el 90% del punto es HTML incluido. Utiliza comentarios HTML especiales:
...
<body>
<!-- @import "https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./header.html" -->
Content
<!-- @import "https://css-tricks.com/the-simplest-ways-to-handle-html-includes/./footer.html" -->
</body>
...Utilice Dreamweaver
LOL JK. Pero realmente es una cosa. DWT, bebé.
Santo cielo
Eso es de muchas maneras, ¿no?
Como dije en la parte superior, me sorprende mucho que HTML en sí no haya abordado esto directamente. No es que crea que sería una gran idea que el rendimiento tuviera <include> declaraciones que desencadenan solicitudes de red en todo nuestro código, pero parece estar en línea con la plataforma. Usar las importaciones de ES6 directamente sin agrupar no siempre es una gran idea, pero las tenemos. @importUsar CSS dentro de CSS no siempre es una gran idea, pero la tenemos. Si la plataforma tuviera una sintaxis nativa, tal vez otras herramientas la eliminarían, al igual que los paquetes de JavaScript admiten el formato de importación ES6.