Ich möchte folgende Dinge zu tun:HTML wiederholende Blöcke
Bitte um Hilfe!
Sie brauchen tu eine serverseitige Funktionalität wie PHP, aspx verwenden ...
Sie können HTML Imports die Teil Web Components ist:
<head>
<link rel="import" href="/path/to/your/file.html">
</head>
Wenn Ihre Seite nicht über Um reines HTML zu sein, sollten Sie PHP oder eine ähnliche serverseitige Sprache verwenden.
Was Sie sprechen, erscheint ein Prozess namens Templat zu sein. Es gibt viele Möglichkeiten, dies zu tun, einschließlich des Schreibens von Javascript, um vorgefertigte HTML-Vorlagen in das DOM (die Webseite) einzufügen. Sie können auch eine vorbereitete Templating-Bibliothek wie http://handlebarsjs.com/ oder eine andere Bibliothek verwenden, die Templating-Funktionen wie http://underscorejs.org/ enthält. Eine einfache MVC Führer wie:
http://blog.ircmaxell.com/2014/11/a-beginners-guide-to-mvc-for-web.html
Kann auch hilfreich sein, um loszulegen.
In einem praktischen Sinn, hier ist eine mögliche Lösung:
Zunächst habe ich die ‚Blöcke‘ Sie in einem separaten Ordner einfügen möchten setzen würde empfehlen. In der Website, die ich zum Beispiel verwende, platziere ich sie im Ordner \ templates (oder Unterordner), aber Sie können es mehr oder weniger so nennen, wie Sie wollen, solange es für Sie Sinn ergibt. Für die unsere Zwecke lassen sagen wir block.html erstellt haben und es in unseren \ templates Unterordner setzen ...
nun innerhalb jeder Vorlage haben Sie, was Sie laden in möchten; etwas wie das:
<h2>Title of section</h2>
<p>My text.</p>
Oder was auch immer Sie möchten. Dann werden Sie wahrscheinlich ein Element zu Ihrer Hauptseite hinzufügen wollen, das Javascript aufruft, das Ihre HTML-Vorlage lädt, wenn eine bestimmte Bedingung eintritt. Zum Beispiel, wenn Sie in unserer block.html-Datei laden wollen könnte man so etwas schreiben:
<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></div>
, die eine Javascript-Funktion namens ‚menuClicked()‘, wenn wir Sie auf die div mit der id nennen würde ‚Aufruf -Block'.
Innerhalb der Funktion, die wir so etwas schreiben würde:
<script>
function menuClicked(insertEl, UrlString, onTemplateLoaded) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(insertEl).innerHTML = xhttp.responseText;
if (onTemplateLoaded) onTemplateLoaded();
};
};
console.log(UrlString);
xhttp.open("GET", UrlString, true);
xhttp.send();
};
</script>
Dies ist eine sehr einfache Art und Weise, Dinge zu tun, und ich bin sicher, die Leute werden Ihnen sagen es gibt Probleme mit ihm, so würde ich auf jeden Fall empfehlen Ich mache auch deine eigenen Lektüre, aber ich hoffe, das deckt die Grundlagen ab.
Ich will es nur in HTML-Art. Mit freundlichen Grüßen –
Ich habe mit der einfachsten Erklärung aktualisiert, die ich von der Spitze meines Kopfes geben kann. Ich hoffe, es hilft. Wenn Sie etwas finden, das nicht richtig erscheint, oder wenn Sie es weiter oder auf eine andere Weise erklären möchten, wäre ich mehr als glücklich, Ihnen zu helfen. Sagen Sie mir einfach, was Sie nicht verstehen können oder welche zusätzlichen Dinge Sie abdecken müssen, und ich werde mein Bestes tun, um etwas auszuarbeiten. –
Es gibt viele Möglichkeiten, hängt von Ihnen ab:
1) verwenden iframes (viele Probleme mit Verantwortung) http://www.w3schools.com/tags/tag_iframe.asp
2) Ajax-Aufruf in Javascript, laden externe Ressource und drucken Sie es dann in Platzhalter -Tag (Beispiel mit jquery) http://www.w3schools.com/jquery/jquery_ajax_load.asp
3) verwenden, um einige Serversprache/Präprozessor (pHP, ruby, NodeJS) hängen, wenn Sie können (auf dem Server installiert von benötigen)
4) auch t Hier sind statische Seite Generator, Sie fügen Markierungen in Ihrem HTML, und sie werden HTML mit Markierungen auf volle statische HTML http://hyde.github.io/ zum Beispiel kompilieren.
Ich wusste nicht, HTML-Importe. Danke für die Information. –
Ich habe diese Seite wegen Ihrer Antwort wirklich mit einem Lesezeichen versehen, da kann ich viel davon lernen Peter! –
Es ist nur ein bisschen Code, den ich auf einer Website arbeite. Es muss überarbeitet und repariert werden, nachdem ich Änderungen daran vorgenommen habe, um es einfacher zu machen und der gestellten Frage zu entsprechen, so dass ich es noch nicht als Evangelium behandeln würde, aber ich hoffe, es erweist sich zumindest als nützlich für jemanden! –