Web-Frontend
HTML-Tutorial
Detaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code
Detaillierte Einführung in die Wiederverwendungspraktiken von HTML-Code
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-include
|-node_modules|-src // 生产环境的 html 存放文件夹 |-include // 公共部分的 html 存放文件夹 |-*.html |-dist // 编辑后的 html 文件 gulpfile.js
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'));
});-Dateien, nämlich den Header und den Bottom: html
header.html
<h1>这是 header 的内容</h1>
footer.html
<h1>这是 footer 的内容</h1>
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> 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
-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'));
});-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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
