apollo html bootstrap
Apollo Initial Release
Apollo ist eine saubere und minimal reaktionsfähige Bootstrap 5-Administratorvorlage.
Demo ansehen | ZIP herunterladen
Wenn Sie nicht beabsichtigen, mit dem Quellcode der Vorlage zu arbeiten (und das bedeutet, dass Sie ihn nicht kompilieren oder den Webpack-Entwicklungsserver ausführen), müssen Sie nichts installieren. Sie können einfach zum dist-Ordner navigieren und mit der Bearbeitung der Dateien beginnen.
Die meisten Entwickler bearbeiten den Quellcode und führen außerdem Webpack aus, um die Vorlagendateien neu zu kompilieren. Wenn dies der Fall ist, stellen Sie sicher, dass Node.js installiert ist. Sie können es hier herunterladen
git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.gitnpm install in Ihrer Befehlszeile aus.npm start aus, um den Webpack-Devserver zu starten.npm run build aus Die Vorlage besteht aus folgenden Seiten:
Sowie die folgenden Widgets:
Um Codewiederholungen auf ein Minimum zu beschränken, haben wir Handlers.js als Template-Engine und Partials verwendet, um den gleichen Code schnell zu verschiedenen Seiten hinzuzufügen. Wir verwenden auch ein Handlers-Plugin für JSON-Daten – dies ermöglicht uns die Verwendung von Schleifen und die Ausgabe eines einzelnen HTML-Codeblocks, anstatt denselben HTML-Code zu wiederholen.
Demo-URL
Bitte beachten Sie, dass es sich hierbei lediglich um eine HTML-Vorlage handelt. Es stellt keine Verbindung zu einer Datenbank her und funktioniert nicht automatisch in einem Content-Management-System (Wordpress usw.). Sie müssen unseren Code in Ihre Anwendung integrieren.
? dist – Generierte Version der Vorlage. Klicken Sie hier, wenn Sie nicht mit dem Quellcode der Vorlage arbeiten möchten. Aber seien Sie gewarnt: Wenn Sie etwas in diesem Ordner direkt anpassen und die Vorlage später mit Webpack neu kompilieren, werden Ihre Änderungen überschrieben, es sei denn, Sie verschieben den dist-Ordner aus der Vorlage.
? node_modules – Verzeichnis, in dem NPM Abhängigkeiten installiert. Dieser Ordner wird erst angezeigt, wenn Sie die Installation der Vorlage abgeschlossen haben. Sie müssen diesen Ordner nicht erstellen.
? src – Vorlagenquellcode. Gehen Sie hier, um Ihre Vorlage anzupassen.
? src/assets – Vorlagen-Assets wie CSS, JS, Bilder usw.
? src/data – Vorlage für JSON-Datendateien. Wir verwenden diese JSON-Dateien, um Ihnen das Einfügen von Inhalten in die Vorlage zu erleichtern.
? src/html – Vorlagenseiten. Gehen Sie hierher, um bestehende Seiten zu bearbeiten oder neue Seiten hinzuzufügen.
? src/partials – Teilvorlagen für Lenker.
Lenker ist eine Template-Engine, die es uns ermöglicht, unseren Template-Quellcode so organisiert und sauber wie möglich zu halten. Es reduziert die Codeduplizierung und ermöglicht Vorlagenentwicklern durch die Verwendung von Hilfsfunktionen die sehr schnelle Ausgabe großer Datenmengen mit minimalem Code. Mehr darüber können Sie hier lesen.
Öffnen Sie die folgende Datei in unserer Vorlage: src/html/index.html.
In Zeile 21 sehen Sie den folgenden Code:
{{> content/breadcrumbs }}
Das ist ein Teil des Lenkers. Dieser Code weist Handlers an, in einen Ordner namens „content“ (im Ordner „Partials“) zu schauen und dann eine Datei namens „Breadcrumbs“ zu finden und diese beim Kompilieren in die Datei „index.html“ einzufügen.
Es gibt ein paar wichtige Hinweise zu unserer Verwendung von Lenkerteilteilen:
Das von uns verwendete Webpack-Lenkrad-Plugin verfügt über ein sehr praktisches Dienstprogramm, mit dem wir JSON-Dateien als Vorlagendaten übergeben können.
Bitte navigieren Sie zu: src/data. Hier befinden sich unsere JSON-Vorlagendatendateien. Sie können diesen Ordner bearbeiten, entfernen oder eigene hinzufügen.
Alle Quell-CSS/SASS-Dateien der Vorlage werden im Assets-Ordner der Vorlage gespeichert. Navigieren Sie zu src/assets/scss. Öffnen Sie theme.scss mit Ihrem Editor.
Dies ist der Haupteinstiegspunkt für alle anderen SASS/CSS-Dateien.
Um eine neue Seite zu erstellen, navigieren Sie in Ihrem Code-Editor zu: src/html. Klonen Sie eine vorhandene Seite, um es einfacher zu machen, den richtigen HTML-Code bereitzustellen. Benennen Sie die neu erstellte Datei in die gewünschte URL um. Und das ist es. Sie können nun die neue Seite mit Ihrem Code-Editor öffnen, Ihre Änderungen vornehmen und dann die Datei speichern. Beenden Sie den Webpack-Devserver und starten Sie ihn neu, damit die Seite angezeigt wird.
Bootstrap verfügt bereits über eine umfassende Dokumentationsseite, die Sie bei der Einrichtung und Verwendung aller Standard-Bootstrap-Funktionen unterstützt. Bootstrap 5 ist vollständig in den Quellcode unserer Vorlage integriert. Informationen zu den standardmäßigen Bootstrap-Funktionen finden Sie zunächst auf der Dokumentationsseite von Bootstrap: Besuchen Sie die Dokumentationsseite von Bootstrap
Bootstrap
chart.js
Unsplash
Pexels
Pixabay
Simplebar.js
Sie finden unsere Website hier oder senden Sie uns eine E-Mail an [email protected]
