Les façons les plus simples de gérer HTML comprennent

Il est extrêmement surprenant pour moi que HTML n'ait jamais eu de moyen d'inclure d'autres fichiers HTML. Il n'y a rien non plus à l'horizon qui s'adresse. Je parle de directement inclut , comme prendre un morceau de HTML et le plonger dans un autre. Par exemple, le cas d'utilisation pour une grande partie de l'ensemble de l'Internet, un en-tête et un pied de page inclus pour toutes les pages:

 ...

   <inclure src="./%20header.html"> 

   Contenu

   <inclure src="./%20foother.html"> 

...</inclure></inclure>

Ce n'est pas réel, au fait. Je souhaite juste que ce soit.

Les gens se tournent vers d'autres langues pour résoudre ce problème pour eux depuis toujours. C'est un prétraitement HTML, dans un sens. Bien avant de prétraiter notre CSS, nous utilisons des outils pour manipuler notre HTML. Et nous le sommes toujours, car l'idée de comprend est utile sur à peu près tous les sites Web du monde.

Utiliser PHP

Pouvez-vous utiliser PHP à la place?

 ...

    Php inclut "./header.html"?>

   Contenu

    Php inclut "./footer.html"?>

...

Cela effectuera l'inclusion au niveau du serveur, ce qui fait que la demande pour cela se produise au niveau du système de fichiers sur le serveur, il devrait donc être beaucoup plus rapide qu'une solution côté client.

Utiliser Gulp

Qu'est-ce qui est encore plus rapide qu'un côté serveur inclut? Si l'includ est prétraité avant même le serveur. Gulp a une variété de processeurs qui peuvent le faire. L'un est le gulp-file-include.

Cela ressemblerait à ceci:

 ...

   @@ inclure ('./ header.html')

   Contenu

   @@ inclure ('./ footter.html')

...

Et vous le traiteriez comme:

 var fileinclude = require ('gulp-file-include'),
  gulp = require ('gulp');
 
gulp.task ('fileinclude', function () {
  gulp.src (['index.html'])
    .Pipe (fileinclude ({
      préfixe: '@@',
      Basepath: '@file'
    }))
    .Pipe (gulp.dest ('./'));
});

On dirait que ce plugin particulier a des fonctionnalités sophistiquées où vous pouvez passer des variables aux incluses, ce qui permet de fabriquer peu de composants basés sur les données.

Utiliser le grognement

C'est ce que fait le plugin Grunt-Bake. Vous configureriez le grognement pour traiter votre HTML:

 grunt.initconfig ({
    cuire: {
        your_target: {
            Fichiers: {
                "dist / index.html": "app / index.html",
            }
        }
    }
});

Ensuite, votre HTML peut utiliser cette syntaxe spéciale pour incluse:

 ...

   

   Contenu

   

...

Utiliser le guidon

Le guidon a des partiels.

Vous les enregistrez:

 Hands.gegisterPartial ('myPartial', '{{name}}')

Puis utilisez-les:

 {{> myPartial}}

Il existe également des caractéristiques sophistiquées qui permettent d'évaluer et de passer des données. Vous aurez toujours besoin d'un processeur pour l'exécuter, probablement quelque chose comme Gulp-Handlebars.

En parlant de langues de modèles qui utilisent des accolades bouclées… la moustache les a aussi.

Utiliser Pug

PUG est un préprocesseur HTML qui a une toute nouvelle syntaxe pour HTML qui est un peu plus laconique. Il a cependant des incluses.

 ...
corps
   inclure ./header.html "

   contenu p

   inclure ./footer.html "

   ...

Ensuite, vous l'exécutez avec quelque chose comme Gulp-pug.

Utiliser Nunjucks

Je m'aime quelques nunjucks! Nunjucks comprend. Tu le ferais comme ça:

 ...

   {% inclut "./header.html"%}

   Contenu

   {% inclut "./footer.html"%}

...

Si vous mettez cela dans un fichier appelé index.njk, vous pouvez le traiter avec un script de nœud simple dans index.html comme ceci:

 const nunjucks = require ("nunjucks");
const fs = require ("fs");

fs.writeFile ("index.html", nunjucks.render ("index.njk"), fonction (err, data) {
  if (err) console.log (err);
  Console.log ("a compilé les Nunjucks, capitaine.");
});

Ou traitez-le avec quelque chose comme Gulp-Nunjucks.

11ty a Nunjucks intégré, ainsi que beaucoup des autres mentionnés jusqu'à présent. Pourrait être bon pour vous si vous construisez réellement un petit site.

Utiliser Ajax

Dis que tu avais…

 
  
  <a-t> -header>
  
  Contenu.
  
  <foomer> 

</foomer></a-t>

Vous pouvez récupérer le contenu de l'en-tête et du pied de page à partir de fichiers respectifs et de vider le contenu.

 fetch ("./ header.html")
  .Then (réponse => {
    return réponse.Text ()
  })
  .Then (data => {
    document.QuerySelector ("En-tête"). InnerHtml = données;
  });

fetch ("./ footer.html")
  .Then (réponse => {
    return réponse.Text ()
  })
  .Then (data => {
    document.QuerySelector ("Footer"). InnerHtml = données;
  });

En parlant de JavaScript… Si vous construisez votre site à l'aide d'un cadre JavaScript à peu près en tout type, la construction de composants est en quelque sorte la principale affaire là-bas et les pièces qui brisaient que vous souhaitez inclure dans d'autres fichiers ne devraient pas être un problème. Une sorte d'en-tête d'importation de "./header.js"; Et

est le territoire dans lequel vous seriez dans React Land.

Utiliser des iframes

Vous pourriez faire ceci:

 
  
  <iframe src="./%20header.html">  iframe>
  
  Contenu.
  
  <iframe src="./%20footer.html">  iframe>
  
</iframe></iframe>

Mais le contenu de ces iframes ne partage pas le même DOM, donc c'est un peu bizarre, sans parler lent et maladroit à style (car les iframes ne connaissent pas les hauteurs de leur contenu).

Scott Jehl a cependant documenté une idée cool: vous pouvez demander à l'Iframe injecter le contenu de lui-même sur la page parent, puis de se supprimer.

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

Kolya Korruptis a écrit avec cette adaptation qui comprendra plus que le premier enfant du corps au cas où votre fichier HTML aura cela:

 <iframe src="inclus.html" onload="this.insertadjacenthtml ('afterend', (this.contentDocument.body || this.contentDocument) .innerHtml); this.reMove ()">  iframe></iframe>

Utilisez Jekyll

Jekyllis un générateur de sites statiques basé sur Ruby avec incluse. Vous gardez vos incluses dans le dossier / _includes /, alors:

 
  {% Inclure en tête.html%}
  
  Contenu.

  {% Inclure Footer.html%}

Jekyll est important, donc je l'appelle ici, mais il y a une tonne de zones de générateurs de sites statiques et je parierais que l'un d'eux peut faire.

Utiliser Sergey

Ok, je vais appeler un moessgbause, il est nouveau et super concentré.

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

  Contenu.

  <sergey-import src="Footer"></sergey-import>

Vous nommeriez le Fileshader.htmlandfooter.htmland, mettez-les dans / inclut / puis il fera une version avec les incluses traitées lorsque vous exécutez le script NPM qu'il vous fait.

Utilisez Apache SSI

Apache, un serveur Web Common Super Duper, comprend Cando. Vous le faites comme ceci:

 
		
  
  
  Contenu
  
  
  

Mais vous avez besoin de la bonne configuration Apache pour permettre des choses. J'ai fait de mon mieux pour faire avancer une démo de travail mais je n'ai pas eu beaucoup de chance.

J'ai essayé d'utiliser.

 Les options comprennent

Texte addtype / html .html
AddOutputFilter comprend .html

Je suis sûr qu'il existe un moyen de le faire fonctionner, et si vous le faites, il est un peu soigné qu'il ait besoin de zéro d'autres dépendances.

Utiliser Codekit

Mac uniquement, mais Codekit Hasa a un langage spécial appelé processus Knit où 90% du point est HTML. Il utilise des commentaires HTML spéciaux:

 ...

   

   Contenu

   

...

Utilisez Dreamweaver

Lol JK. Mais c'est vraiment une chose.dwts, bébé.

Merde

C'est beaucoup de façons, non?

Comme je l'ai dit au sommet, il est très surprenant pour moi que HTML lui-même ne soit pas résolu directement. Non pas que je pense que ce serait une excellente idée pour les performances d'avoir des instructions qui déclenchent les demandes du réseau partout dans notre code, mais cela semble en ligne avec la plate-forme. L'utilisation d'importations ES6 directement sans regroupement n'est pas toujours une excellente idée, mais nous les avons. @ Importer CSS dans CSS n'est pas toujours une excellente idée, mais nous l'avons. Si la plate-forme avait une syntaxe native, peut-être que d'autres outils s'appuieraient, tout comme les bundlers JavaScript prennent en charge le format d'importation ES6.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!