Heim > Artikel > Web-Frontend > Detaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code

Detaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code

黄舟Original: 2017-05-27 14:30:232205Durchsuche

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

gulp-file-include

Das erste, das ich vorstellen möchte, ist ein

-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

Schreiben wir ein kleines

, 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-include

Nach der Installation organisieren wir einfach das Dateiverzeichnis:

|-node_modules|-src // 生产环境的 html 存放文件夹    |-include // 公共部分的 html 存放文件夹    |-*.html 
|-dist // 编辑后的 html 文件
gulpfile.js

Konfigurieren Sie im neu erstellten

gulpfile.js: gulp-file-include

var gulp = require(&#39;gulp&#39;);var fileinclude  = require(&#39;gulp-file-include&#39;);

gulp.task(&#39;fileinclude&#39;, function() {
    gulp.src(&#39;src/**.html&#39;)
        .pipe(fileinclude({          prefix: &#39;@@&#39;,          basepath: &#39;@file&#39;
        }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

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(&#39;include/header.html&#39;)    <p> 这是 layout 的内容 </p>

    @@include(&#39;include/footer.html&#39;)</body></html>

Gehen Sie schließlich zurück zum Befehlszeilentool und führen Sie

aus: gulp fileinclude

Nachdem Sie gesehen haben, dass die Kompilierung erfolgt ist Wenn Sie fertig sind, gehen Sie zu Im Verzeichnis

befindet sich eine Datei dist, die schließlich kompiliert wurde. layout.html

Okay, jetzt haben Sie das obige kleine Beispiel verstanden. Es kann möglicherweise die Produktivität bei zukünftigen Arbeiten erheblich steigern und den

-Code, den Sie schreiben, wartbarer und wiederverwendbar machen. html

Frontend-Vorlage

Wie oben erwähnt

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

Kopieren Sie den gesamten Ordner aus dem vorherigen Beispiel an einen neuen Speicherort und ändern Sie den Namen in

. Löschen Sie dann den Ordner ejs und alle node_modules-Dateien im Ordner dist. html

Wenn Sie die

-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(&#39;gulp&#39;);var ejs  = require(&#39;gulp-ejs&#39;);

gulp.task(&#39;ejs&#39;, function() {
    gulp.src(&#39;src/**.ejs&#39;)
        .pipe(ejs())
    .pipe(gulp.dest(&#39;dist&#39;));
});

Ä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

Tatsächlich verfügen Vorlagen über viele leistungsstarke Methoden, und das obige Beispiel demonstriert hauptsächlich

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine ausführliche Einführung in Formularkomponenten in HTMLNächster Artikel：Eine ausführliche Einführung in Formularkomponenten in HTML

In Verbindung stehende Artikel

Mehr sehen