Heim >Web-Frontend >HTML-Tutorial >Detaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code
Detaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code
- 黄舟Original
- 2017-05-27 14:30:232227Durchsuche
Vorwort
Normalerweise können wir auf einigen Seiten, die wir erstellen, anhand der Konstruktionszeichnungen erkennen, dass es einige Ähnlichkeiten gibt. Zum Beispiel: Kopfzeile, Unterseite, Seitenleiste usw. Wenn Sie als Student eine statische Seite erstellen, können Sie diese wiederholten Teile nur dann kopieren und in eine neue Seite einfügen, wenn die Anzahl der Seiten zunimmt und es Bereiche gibt, die in den gemeinsamen Teilen repariert werden müssen. Allerdings verwenden mehr als 10 Seiten diesen öffentlichen html-Code. Wäre es nicht mühsam, es zu ändern?
Backend-Studenten können es über Vorlagen aufteilen. Dies kann die Wiederverwendbarkeit und Wartbarkeit des Codes verbessern. Aber für Studenten, die nur statische Seiten aus Konstruktionszeichnungen erstellen, bietet html keine Methode wie Vorlagen html. Wenn Sie jedoch keine Back-End-Vorlagen verwenden möchten, können Ihnen die folgenden Tools, die ich Ihnen vorstelle, möglicherweise weiterhelfen. include
-Plug-in, das eine gulp-Methode bereitstellt, mit der wir es wie ein Back-In verwenden können. Endvorlage. Die öffentlichen Teile sind getrennt. Und die bereitgestellte include-Methode enthält viele Konfigurationselemente. Weitere Informationen finden Sie unter gulp-file-include. include
, um es schnell zu verstehen. Wir müssen zuerst demo und gulp installieren. gulp-file-include
npm install -g gulp mkdir gulp-file-include && cd gulp-file-include npm install gulp --save-dev npm install gulp-file-includeNach der Installation organisieren wir einfach das Dateiverzeichnis:
|-node_modules|-src // 生产环境的 html 存放文件夹 |-include // 公共部分的 html 存放文件夹 |-*.html |-dist // 编辑后的 html 文件 gulpfile.jsKonfigurieren Sie im neu erstellten
gulpfile.js: gulp-file-include
var gulp = require('gulp');var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
gulp.src('src/**.html')
.pipe(fileinclude({ prefix: '@@', basepath: '@file'
}))
.pipe(gulp.dest('dist'));
}); Erstellen Sie dann zwei neue -Dateien, nämlich den Header und den Bottom: html
header.html
<h1>这是 header 的内容</h1>
footer.html
<h1>这是 footer 的内容</h1>Schließlich erstellen Sie ein neues
und fügen die html und header, die Sie verwenden möchten, zu footer hinzu. include
layout.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>
@@include('include/header.html') <p> 这是 layout 的内容 </p>
@@include('include/footer.html')</body></html>Gehen Sie schließlich zurück zum Befehlszeilentool und führen Sie aus: gulp fileinclude
befindet sich eine Datei dist, die schließlich kompiliert wurde. layout.html
-Code, den Sie schreiben, wartbarer und wiederverwendbar machen. html
ist einfach und benutzerfreundlich. Es ist ein gutes Tool für Studenten, die keine Vorlagen verwenden möchten. Aber für Studenten, die mit Front-End-Vorlagen vertraut sind, können wir Vorlagen auch verwenden, um gulp-file-include Code-Wartbarkeit und Wiederverwendbarkeit zu erreichen. Dann werde ich eine html-Vorlage verwenden, die ich häufig verwende, um darüber zu sprechen, wie diese öffentlichen Teile der ejs-Dateien getrennt werden. html
. Löschen Sie dann den Ordner ejs und alle node_modules-Dateien im Ordner dist. html
-Vorlage verwenden, müssen Sie die Suffixnamen der ejs-Dateien in src in html ändern. Das Tool zum Kompilieren von .ejs-Dateien in ejs verwendet weiterhin html. Einfach gulp installieren und fertig. gulp-ejs
npm install gulp --save-dev npm install gulp-ejs --save-devÄndern Sie dann die
-Datei: gulpflie.js
var gulp = require('gulp');var ejs = require('gulp-ejs');
gulp.task('ejs', function() {
gulp.src('src/**.ejs')
.pipe(ejs())
.pipe(gulp.dest('dist'));
});Ändern Sie dann die -Datei: layout.ejs
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title></head><body> <%-include include/header %> <p> 这是 layout 的内容 </p> <%-include include/footer %> </body> </html>Verwenden Sie abschließend das Befehlszeilentool Führen Sie
aus und sehen Sie sich die kompilierte gulp ejs-Datei im Verzeichnis dist an. Und schon sind Sie fertig. layout.html
diese Methode, die vielleicht etwas groß erscheint, aber von geringem Nutzen ist. Interessierte Studierende können mehr über einige Methoden von Vorlagen erfahren. include
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!