Der folgende Editor zeigt Ihnen ein Beispiel für die Implementierung von include, um öffentlichen Code in eine statische Seite einzuführen. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor und werfen wir einen Blick darauf.
Das Frontend unseres Unternehmens verwendet seit jeher die Include-Funktion von PHP, um allgemeine Codes wie Kopf- und Fußzeile einzuführen:
<!-- index.php --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <?php include('header.php'); ?> <p>页面主体部分</p> <?php include('footer.php'); ?> </body> </html>
<!-- header.php --> <header>这是头部</header>
<!-- footer.php --> <footer>这是底部</footer>
Bis vor kurzem war ein Projekt erforderlich, um eine Webanwendung zu erstellen, die über HBuilder Static Pages durchgeführt wurde in APP verpackt, was mir ein Problem bereitet.
Wenn es sich um ein kleines Projekt handelt, kopieren Sie es einfach mehrmals manuell und fügen Sie es manuell ein. Wenn es jedoch viele Seiten gibt, ist die Copy-Paste-Lösung offensichtlich unzuverlässig und die Wartungskosten sind hoch.
Nachdem ich viele Informationen überprüft hatte, entschied ich mich schließlich, gulp zu verwenden, um das Problem zu lösen. Die spezifischen Vorgänge sind wie folgt:
1. file-include
Erstellen Sie zuerst einen neuen Ordner, suchen Sie den Speicherort des Ordners im Terminal und initialisieren Sie dann npm
npm init
Dann installiere gulp
npm install gulp --save-dev
Dann installiere gulp-file-include
npm install gulp-file-include --save-dev
2. Erstellen und konfigurieren Sie gulpfile.js
Dann erstellen wir manuell eine neue js-Datei mit dem Namen gulpfile und schreiben den folgenden Code hinein:
var gulp = require('gulp'); var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function () { // 适配page中所有文件夹下的所有html,排除page下的include文件夹中html gulp.src(['page/**/*.html', '!page/include/**.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); });
3. Erstellen Sie die Projektverzeichnisstruktur und fügen Sie den Testcode hinzu
Die Gesamtverzeichnisstruktur des Projekts sollte so aussehen
app page include header.html footer.html index.html gulpfile.js package.json
Dann fügen wir den Testcode hinzu. Zu header.html und footer.html gibt es nicht viel zu sagen. Die Hauptsache ist, dass index.html zahlen sollte Besonderes Augenmerk liegt auf der Art und Weise, wie es eingeführt wird:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> @@include('include/header.html') <p>页面主体部分</p> @@include('include/footer.html') </body> </html>
4 >Geben Sie den folgenden Code in das Terminal ein, um den Ausführungseffekt zu sehen
Sie werden feststellen, dass es einen zusätzlichen dist-Ordner mit einer index.html-Datei gibt gulp-file-include hat uns dabei geholfen, die endgültige kompilierte Datei index.html zu generieren.
gulp fileinclude
gulp.dest('dist')
Das Problem der Einführung von öffentlichem Code in statische Seiten wurde gelöst, aber jedes Mal, wenn Sie den Quell-HTML schreiben, müssen Sie gehen an das Terminal senden und manuell ausführen. Der Kompilierungsvorgang ist immer noch sehr mühsam. Können die Dateien also automatisch kompiliert werden? Die Antwort muss ja sein.
gulp verfügt über eine Überwachungsmethode, mit der überwacht werden soll, ob sich die Datei geändert hat. Wir müssen die Datei gulpfile.js nur geringfügig ändern und einen Überwachungscode wie folgt hinzufügen:
Nach dem Schreiben müssen wir nur noch
var gulp = require('gulp'); var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function () { // 适配page中所有文件夹下的所有html,排除page下的include文件夹中html gulp.src(['page/**/*.html', '!page/include/**.html']) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('dist')); }); gulp.task('watch', function () { gulp.watch('page/**/*.html', ['fileinclude']); });
Jedes Mal, wenn wir den Quell-HTML speichern, schlucken hilft uns automatisch beim Kompilieren.
gulp watch
Das obige ist der detaillierte Inhalt vonBeispiele für die Implementierung von include auf statischen Seiten und die Einführung von allgemeinem Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!