Siempre me ha sorprendido que en HTML no se puedan conectar otros archivos HTML. Si se pudiera hacer así:

HTML

<body>
   <include src="./header.html"></include>

   Contenido

   <include src="./footer.html"></include>
</body>

Pero el código anterior no funciona.

Muchos resuelven este problema usando otros lenguajes de programación.

Usando PHP

¿Quizás usar PHP?

PHP

<body>
   <?php include "./header.html" ?>

   Contenido

   <?php include "./footer.html" ?>
</body>

El código anterior proporciona la conexión a nivel de servidor. La solicitud se ejecutará en el sistema de archivos del servidor. Por lo tanto, este método es mucho más rápido que la solución implementada del lado del cliente.

Gulp

La pre-procesamiento de la conexión funciona aún más rápido. Gulp tiene muchos plugins para esto. Uno de ellos es gulp-file-include.

Mira el código a continuación:

HTML

<body>
   @@include('./header.html')

   Contenido

   @@include('./footer.html')
</body>

Puedes aprender cómo conectar JS a HTML revisando ejemplos de código con la etiqueta <script>.

Procesamiento:

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

Con este plugin, puedes pasar variables a la conexión, lo que te permite crear pequeños componentes basados en datos.

Grunt

Esto es lo que hace el plugin grunt-bake. Configura Grunt para procesar HTML:

JavaScript

grunt.initConfig({
    bake: {
        your_target: {
            files: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

Entonces, el HTML podrá usar una sintaxis especial para las conexiones:

HTML

<body>
   <!--(bake header.html)-->

   Contenido

   <!--(bake footer.html)-->
</body>

Handlebars

Handlebars tiene plantillas (partials). Necesitas registrarlas:

JavaScript

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

Ahora puedes usarlas:

HTML

{{> myPartial }}

En Handlebars también hay herramientas para evaluar y pasar datos. Para ejecutarlas, necesitarás un plugin como gulp-handlebars.

Pug

Pug es un preprocesador HTML con una nueva sintaxis más compacta. Pero usa extensiones (includes).

Pug

body
   include ./header.html"

   p Contenido

   include ./footer.html"

Ejecuta el código anterior usando gulp-pug.

Nunjucks

Nunjucks también contiene extensiones. Usa el siguiente código:

HTML

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

   Contenido

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

Si colocas el código en el archivo index.njk, puedes procesarlo usando un simple script de Node en 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.");
});

También puedes procesar este código usando gulp-nunjucks.

Ajax

Supongamos que tu documento se ve así:

HTML

<body>

  <header></header>

  Contenido.

  <footer></footer>

</body>

Puedes mostrar el contenido del encabezado y el pie de página desde las plantillas correspondientes.

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

Si estás creando un sitio web usando un framework de JavaScript, usa componentes.

Iframes

Usa el código a continuación:

HTML

<body>

  <iframe src="./header.html"></iframe>

  Contenido.

  <iframe src="./footer.html"></iframe>

</body>

Ten en cuenta que el contenido en los iframes usa diferentes DOM. Por lo tanto, el código se ve un poco extraño.

Pero puedes hacer que el iframe muestre su contenido en la página principal y luego se elimine a sí mismo.

HTML

<body>

  <iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

  Contenido.

  <iframe src="footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

</body>

Jekyll

Jekyll es un generador de sitios estáticos basado en Ruby con inclusiones. Se guardan en la carpeta /\_includes/, y luego:

HTML

<body>
  {% include header.html %}

  Contenido.

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

Existen muchos más generadores de sitios estáticos. Muchos de ellos admiten la conexión de archivos HTML externos.

Sergey

Hay otro generador de sitios estáticos (SSG) que vale la pena mencionar. Sergey tiene un formato de estilo de componentes web:

HTML

  <body>
    <sergey-import src="header" />

  Contenido.

    <sergey-import src="footer" />
  </body>

Nombra los archivos header.html y footer.html y colócalos en /includes/. En este caso, Sergey realizará la compilación con las conexiones procesadas cuando ejecutes el script npm.

Apache SSI

Apache también admite conexiones. Ingresa el código a continuación:

HTML

<body>

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

  Contenido

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

</body>

Pero necesitarás una configuración correcta de Apache para que todas las acciones estén permitidas. Hice todo lo posible para encontrar una versión de demostración que funcione, pero no pude.

.htaccess

Options +Includes

AddType text/html .html
AddOutputFilter INCLUDES .html

CodeKit

CodeKit incluye un lenguaje Kit especial, el 90% de cuyas funciones solo son necesarias para las conexiones. Kit usa comentarios especiales en HTML:

HTML

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

   Contenido

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

Conclusión

No estoy seguro de que <include>, que lanza solicitudes de red en todo el código, sea una buena solución en términos de rendimiento. El uso de la importación ES6 directamente sin compilación tampoco siempre es una buena idea. @import (importación) de CSS en CSS no siempre es una buena idea, pero existe esa posibilidad.

Categorizado en:

HTML,