Für mich ist es ?u?erst überraschend, dass HTML noch nie eine M?glichkeit hatte, andere HTML -Dateien in sie aufzunehmen. Es scheint auch nicht etwas am Horizont zu stehen, das sich darum kümmert. Ich spreche von einfachen Einschlüssen , wie ein Stück HTML zu nehmen und es direkt in einen anderen zu bringen. Zum Beispiel der Anwendungsfall für einen Gro?teil des gesamten Internets, eine enthaltene Header und Fu?zeile für alle Seiten:

 ...

   <include src="./%20Header.html"> />

   Inhalt

   <include src="./%20footer.html"> />

...</include></include>

Das ist übrigens nicht real. Ich wünschte nur, es w?re.

Die Menschen haben auf andere Sprachen gesucht, um dieses Problem für immer für sie zu l?sen. Es ist in gewissem Sinne HTML -Vorverarbeitung. Lange bevor wir unsere CSS vorverfertigt haben, verwendeten wir Tools, um unsere HTML zu manipulieren. Und wir sind es immer noch, weil die Idee von Einbeziehung für so ziemlich jede Website der Welt nützlich ist.

Verwenden Sie PHP

K?nnen Sie stattdessen PHP verwenden?

 ...

    Php include "./header.html"?>

   Inhalt

    Php include "./foter.html"?>

...

Dadurch wird die Aufnahme auf Serverebene durchgeführt, sodass die Anforderung für die Dateisystemebene auf dem Server stattfinden wird, sodass es weitaus schneller sein sollte als eine clientseitige L?sung.

Verwenden Sie Gulp

Was ist noch schneller als eine serverseitige Einbeziehung? Wenn die Einschlusse vorverarbeitet werden, bevor es sich sogar auf dem Server befindet. Gulp hat eine Vielzahl von Prozessoren, die dies tun k?nnen. Einer ist Gulp-File-Include.

Das würde so aussehen:

 ...

   @@ include ('./ Header.html')

   Inhalt

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

...

Und Sie würden es verarbeiten wie:

 var FileInclude = Request ('Gulp-File-include'),
  gulp = erfordern ('gulp');
 
gulp.task ('fileInclude', function () {
  gulp.src (['index.html'])
    .pipe (FileInclude ({{
      Pr?fix: '@@',,
      Basepath: '@file'
    })))
    .Pipe (gulp.dest ('./'));
});

Es sieht so aus, als weist dieses bestimmte Plugin ausgefallene Funktionen auf, bei denen Sie Variablen an die Einschlüsse übergeben k?nnen, um kleine datengesteuerte Komponenten herzustellen.

Verwenden Sie Grunzen

Dies ist, was das Grunzbacken-Plugin tut. Sie konfigurieren Grunzen, um Ihre HTML zu verarbeiten:

 grunT.initconfig ({{
    backen: {
        your_target: {
            Dateien: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

Dann kann Ihre HTML diese spezielle Syntax für einschlie?lich: Folgendes verwenden:

 ...

   

   Inhalt

   

...

Verwenden Sie Lenker

Lenker hat Teil.

Sie registrieren sie:

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

Dann benutze sie:

 {{> myPartial}}

Es gibt auch ausgefallene Funktionen davon, die die Bewertung und übergabe von Daten erm?glichen. Sie brauchen immer noch einen Prozessor, um es auszuführen, wahrscheinlich so etwas wie Gulp-Headlebar.

Apropos Vorlagensprachen, die lockige Zahnspangen verwenden, hat sie auch.

Verwenden Sie Mops

Pug ist ein HTML -Pr?prozessor, der eine ganz neue Syntax für HTML hat, die etwas knapper ist. Es hat jedoch inklusive.

 ...
K?rper
   einschlie?en ./Header.html "

   p Inhalt

   integrieren ./footer.html "

   ...

Dann laufen Sie es mit so etwas wie Gulp-Mops.

Verwenden Sie Nunjucks

Ich liebe mich ein paar Nunjucks! Nunjucks hat inklusive. Sie würden es so machen:

 ...

   { % include "./Header.html" %}

   Inhalt

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

...

Wenn Sie dies in eine Datei namens index.njk einfügen, k?nnen Sie es mit einem einfachen Knotenskript in idex.html wie folgt verarbeiten:

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

fs.writeFile ("index.html", nunjucks.render ("index.njk"), function (err, data) {
  if (err) console.log (err);
  console.log ("kompilierte die Nunjucks, Kapit?n.");
});

Oder verarbeiten Sie es mit so etwas wie Gulp-Nunjucks.

11ty hat Nunjucks eingebaut, zusammen mit vielen der anderen, die bisher erw?hnt wurden. K?nnte gut für Sie sein, wenn Sie tats?chlich eine kleine Website bauen.

Verwenden Sie Ajax

Sagen Sie, Sie hatten ...

 
  
  <header> </header>
  
  Inhalt.
  
  <footer> </footer>

Sie k?nnen den Inhalt für die Header und die Fu?zeile aus den jeweiligen Dateien abholen und den Inhalt eingeben.

 fetch ("./ Header.html")
  .then (response => {
    return response.text ()
  })
  .then (data => {
    document.querySelector ("Header"). Innerhtml = Daten;
  });

fetch ("./ footer.html")
  .then (response => {
    return response.text ()
  })
  .then (data => {
    document.querySelector ("Fu?zeile"). Innerhtml = Daten;
  });

Apropos JavaScript ... Wenn Sie Ihre Website mit einem JavaScript -Framework von nahezu jeglicher Art erstellen, ist das Erstellen durch Komponenten dort eine Art dort und brechen Teile, die Sie in andere Dateien einbeziehen m?chten, kein Problem. Eine Art Import -Header von "./Header.js"; und ist das Gebiet, in dem Sie sich in React Land befinden würden.

Verwenden Sie IFrames

Sie k?nnten das tun:

 
  
  <iframe src="./%20Header.html"> </iframe>
  
  Inhalt.
  
  <iframe src="./%20footer.html"> </iframe>
  

Aber der Inhalt in diesen IFrames teilt nicht das gleiche DOM, daher ist er etwas seltsam, ganz zu schweigen von langsam und unangenehm für den Stil (da IFrames die H?hen ihres Inhalts nicht kennen).

Scott Jehl dokumentierte jedoch eine coole Idee: Sie k?nnen den Inhalt von sich selbst auf die übergeordnete Seite injizieren und sich selbst entfernen.

 
  
  <iframe src="header.html" onload="this.before ((this.contentDocument.body || this.contentDocument) .Children [0]);
  
  Inhalt.
  
  <iframe src = " footer.html html data-line=""> <iframe src="integriert.html" onload="this.insertadjacentHtml ('Afterend', (this.contentDocument.body || this.contentDocument) .innerhtml);

Verwenden Sie Jekyll

Jekyllis Ein statischer Standortgenerator auf Ruby-Basis innerhalb der Cludes. Sie halten Ihre Einschlüsse in/_includes/Ordner, dann:

 
  { % enthalten Header.html %}
  
  Inhalt.

  { % umfassen Fu?zeile.html %}
</iframe></iframe>

Jekyll ist ein gro?es, also rufe ich es hier an, aber es gibt eine Menge statischer Site -Generatoren und ich würde wetten, dass jeder von ihnen eine umfassende kann.

Verwenden Sie Sergey

OK, ich rufe einen Moressgbecause aus, dass es neu und super fokussiert ist. SERGEYHAS Ein Webkomponentenstil -Format:

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

  Inhalt.

  <sergey-import src="Fu%C3%9Fzeile"></sergey-import>

Sie nennen den filesHeader.htmlandfoter.htmland sie in/include/und dann werden ein Build mit dem inclupting verarbeitet, wenn Sie das NPM -Skript ausführen, das Sie tun.

Verwenden Sie Apache SSI

Apache, ein Super Duper Common Web Server, Cando. Du machst es so:

 
		
  
  
  Inhalt
  
  
  

Sie ben?tigen jedoch die richtige Apache -Konfiguration, um Dinge zuzulassen. Ich versuchte mein Bestes, um eine funktionierende Demo in Gang zu bringen, hatte aber nicht viel Glück.

Ich habe versucht.

 Optionen umfassen

Addtype text/html .html
AddoutputFilter enth?lt .html

Ich bin sicher, es gibt jedoch einen Weg, um es zum Laufen zu bringen, und wenn Sie dies tun, ist es ein bisschen ordentlich, dass es keine anderen Abh?ngigkeiten ben?tigt.

Verwenden Sie Codekit

Nur Mac, aber Codekit hat eine Spezialsprache mit dem Namen Kitit Processes, in der 90% des Punktes HTML enthalten. Es verwendet spezielle HTML -Kommentare:

 ...

   

   Inhalt

   

...

Verwenden Sie Dreamweaver

Lol jk. Aber es ist eine Sache. DWTS, Baby.

Heiliger Mist

Das sind viele M?glichkeiten, nicht wahr?

Wie ich an der Spitze sagte, ist es für mich sehr überraschend, dass HTML selbst dies nicht direkt angesprochen hat. Nicht, dass ich denke, dass es eine gro?artige Idee für die Leistung w?re,

Das obige ist der detaillierte Inhalt vonDie einfachsten M?glichkeiten, mit HTML umzugehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!