Gemeinsame Kopf- / Fußzeile mit statischem HTML

Gibt es eine gute Möglichkeit, mit statischem HTML / XHTML gemeinsame Kopf- / Fußzeilendateien zu erstellen, die auf jeder Seite einer Site angezeigt werden? Ich weiß, dass Sie dies natürlich mit PHP- oder serverseitigen Anweisungen tun können, aber gibt es eine Möglichkeit, dies ohne jegliche Abhängigkeit vom Server zu tun, der alles für Sie zusammenfügt?

Edit: Alle sehr guten Antworten und war was ich erwartet hatte. HTML ist statisch, Punkt. Keine wirkliche Möglichkeit, dies zu ändern, ohne dass etwas auf der Server- oder Clientseite ausgeführt wird. Ich habe festgestellt, dass Server Side Includes meine beste Option zu sein scheinen, da sie sehr einfach sind und keine Skripte erfordern.

Es gibt drei Möglichkeiten, um das zu tun, was Sie wollen

Serverskript

Dazu gehört so etwas wie PHP, ASP, JSP ... Aber du hast nein dazu gesagt

Server Side Includes

Ihr Server stellt die Seiten bereit. Warum also nicht die integrierten serverseitigen Includes nutzen ? Jeder Server hat seine eigene Methode, nutzen Sie diese.

Client Side Include

Bei dieser Lösung rufen Sie den Server zurück, nachdem die Seite bereits auf den Client geladen wurde.

Die Funktion JQuery load () kann zum Einfügen allgemeiner Kopf- und Fußzeilen verwendet werden. Code sollte wie sein

<script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>

Eine Demo finden Sie hier

Da HTML keine "include" -Richtlinie hat, kann ich mir nur drei Problemumgehungen vorstellen

1. Rahmen
2. Javascript
3. CSS

Ein kleiner Kommentar zu jeder der Methoden.

Frames können entweder Standardframes oder iFrames sein. In beiden Fällen müssen Sie eine feste Höhe für sie angeben, sodass dies möglicherweise nicht die Lösung ist, nach der Sie suchen.

Javascript ist ein ziemlich weit gefasstes Thema, und es gibt wahrscheinlich viele Möglichkeiten, wie man es verwenden kann, um den gewünschten Effekt zu erzielen. Ich kann mir jedoch zwei Möglichkeiten vorstellen:

1. Vollständige AJAX-Anforderung, die die Kopf- / Fußzeile anfordert und sie dann an der richtigen Stelle auf der Seite platziert.
2. <script type="text/javascript" src="header.js"> das hat so etwas drin: document.write('My header goes here');

Es wäre wirklich ein Missbrauch, dies über CSS zu tun. CSS verfügt über die contentEigenschaft, mit der Sie HTML-Inhalte einfügen können, obwohl dies eigentlich nicht vorgesehen ist. Ich bin mir auch nicht sicher, ob dieses Konstrukt von einem Browser unterstützt wird.

Sie können es mit Javascript tun, und ich denke nicht, dass es so ausgefallen sein muss.

Wenn Sie eine Datei header.js und eine Datei footer.js haben.

Dann könnte der Inhalt von header.js so etwas wie sein

document.write("<div class='header'>header content</div> etc...")

Denken Sie daran , verschachtelte Anführungszeichen in der Zeichenfolge, die Sie schreiben, zu umgehen. Sie können das dann aus Ihren statischen Vorlagen mit aufrufen

<script type="text/javascript" src="header.js"></script>

und ähnlich für die footer.js.

Hinweis: Ich empfehle diese Lösung nicht - sie ist ein Hack und hat eine Reihe von Nachteilen (schlecht für SEO und Benutzerfreundlichkeit nur für den Anfang) -, aber sie erfüllt die Anforderungen des Fragestellers.

Sie können dies einfach mit jquery tun. Keine Notwendigkeit für PHP für eine so einfache Aufgabe. Fügen Sie dies einfach einmal in Ihre Webseite ein.

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

Verwenden Sie jetzt das Laden von Daten für jedes Element, um dessen Inhalt aus einer externen HTML-Datei aufzurufen. Sie müssen lediglich eine Zeile zu Ihrem HTML-Code hinzufügen, in der der Inhalt platziert werden soll.

Beispiel

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

Die beste Lösung ist die Verwendung eines statischen Site-Generators mit Vorlagen / Unterstützung. Ich benutze Hammer für Mac, es ist großartig. Es gibt auch Guard, ein Rubin-Juwel, das Dateiänderungen überwacht, Sass kompiliert, Dateien verkettet und wahrscheinlich auch enthält.

Der einfachste Weg, dies zu tun, ist die Verwendung von einfachem HTML.

Sie können eine der folgenden Möglichkeiten verwenden:

<embed type="text/html" src="header.html">

oder:

<object name="foo" type="text/html" data="header.html"></object>

Am praktischsten ist die Verwendung von Server Side Include . Es ist sehr einfach zu implementieren und spart eine Menge Arbeit, wenn Sie mehr als ein paar Seiten haben.

HTML-Frames, aber es ist keine ideale Lösung. Sie würden im Wesentlichen auf 3 separate HTML-Seiten gleichzeitig zugreifen.

Ihre andere Option ist, denke ich, AJAX zu verwenden.

Sie könnten einen Task-Runner wie Schlucken oder Grunzen verwenden.

Es gibt ein NPM-Gulp-Paket, das Dateien im laufenden Betrieb erstellt und das Ergebnis in eine HTML-Ausgabedatei kompiliert. Sie können sogar Werte an Ihre Partials weitergeben.

https://www.npmjs.com/package/gulp-file-include

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

Ein Beispiel für eine Schluckaufgabe:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Sie können versuchen, sie über die Clientseite wie folgt zu laden:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

HINWEIS: Der Inhalt wird von oben nach unten geladen und ersetzt den Inhalt des Containers, in den Sie ihn laden.

Nein. Statische HTML-Dateien ändern sich nicht. Sie könnten dies möglicherweise mit einer ausgefallenen Javascript AJAXy-Lösung tun, aber das wäre schlecht.

Ohne ein lokales Template-System wie viele Hunderte in jeder Skriptsprache zu verwenden oder sogar Ihr Homebrew-System mit sedoder zu verwenden m4und das Ergebnis an Ihren Server zu senden, benötigen Sie mindestens SSI.

Die einzige Möglichkeit, eine andere Datei nur mit statischem HTML einzuschließen, ist ein Iframe. Ich würde es nicht als eine sehr gute Lösung für Kopf- und Fußzeilen betrachten. Wenn Ihr Server aus bizarren Gründen PHP oder SSI nicht unterstützt, können Sie PHP verwenden und vor dem Hochladen lokal vorverarbeiten. Ich würde das für eine bessere Lösung halten als iframes.