Die einfachsten Möglichkeiten, mit HTML umzugehen

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!