oldskool html bootstrap
Initial Release
OldsKool ist eine moderne und flexible Reaktionsabschnitte HTML -Bootstrap 5 -Vorlage mit anpassbaren Kartenlisten auf der Kategorieseite und eine hervorragende Produktanzeige auf der einzelnen Produktseite. Es ist der perfekte Ausgangspunkt für jede Fashion Retail -Website, und das saubere und minimale Design der Vorlage bedeutet, dass es einfach zu ändern und schmerzlos ist, sich in Ihre benutzerdefinierte E -Commerce -Anwendung zu integrieren. Und vor allem ist es kostenlos!
Demo anzeigen | Download Reißverschluss
Wenn Sie nicht beabsichtigen, mit dem Vorlagenquellcode zu arbeiten (und dies bedeutet, dass Sie ihn nicht kompilieren oder den WebPack Dev Server ausführen), müssen Sie nichts installieren. Sie können einfach zum DIST -Ordner navigieren und die Dateien bearbeiten.
Die meisten Entwickler bearbeiten den Quellcode und werden auch WebPack ausgeführt, um die Vorlagendateien neu zu kompilieren. Wenn dies der Fall ist, stellen Sie sicher, dass Sie Node.js installiert haben. Sie können es von hier herunterladen
git clone https://github.com/PixelRocket-Shop/oldskool-html-bootstrap.gitnpm install .npm start , um WebPack DevServer zu starten.npm run build aus. Die Vorlage besteht aus 10 Seiten:
Um die Wiederholung des Codes auf ein Minimum zu halten, haben wir Lenker verwendet. Wir verwenden auch ein Lenker -Plugin für JSON -Daten. Dadurch können wir Schleifen verwenden und einen einzelnen HTML -Codeblock ausgeben, anstatt dieselben HTML zu wiederholen.
Demo -URL
Bitte beachten Sie, dass dies nur eine HTML -Vorlage ist. 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 einbeziehen.
? dist - generierte Version der Vorlage. Gehen Sie hierher, wenn Sie nicht mit dem Quellcode der Vorlagenquellen arbeiten möchten. Seien Sie jedoch gewarnt: Wenn Sie etwas in diesem Ordner direkt anpassen und später die Vorlage mit WebPack neu kompilieren, es sei denn, Sie verschieben den DIM -Ordner aus der Vorlage, werden Ihre Änderungen überschrieben.
? NODE_MODULES - Verzeichnis, in dem NPM abhängt. Sie sehen diesen Ordner erst, wenn Sie die Vorlageinstallation abschließen. Sie müssen diesen Ordner nicht erstellen.
? SRC - Quellcode für Vorlagen. Gehen Sie hierher, um Ihre Vorlage anzupassen.
? SRC/Assets - Vorlagenvermögen wie CSS, JS, Bilder usw.
? SRC/Data - Vorlage JSON -Datendateien. Wir verwenden diese JSON -Dateien, um Ihre Aufgabe zu erleichtern, Inhalte in die Vorlage einzufügen.
? SRC/HTML - Vorlagenseiten. Gehen Sie hierher, um vorhandene Seiten zu bearbeiten oder neue Seiten hinzuzufügen.
? SRC/Partials - Lenker teilweise Vorlagen.
Lenker ist eine Vorlagenmotor, mit der wir unseren Vorlagenquellcode so organisiert und sauber wie möglich halten können. Es reduziert die Code -Duplikation und ermöglicht es den Templatentwicklern, durch die Verwendung von Helferfunktionen große Datenmengen mit minimalem Code sehr schnell auszugeben. Hier können Sie mehr darüber lesen.
Wir verwenden Lenker aus zwei Hauptgründen: Erstens ermöglicht die Verwendung von Lenker -Partials die gleiche Datei in mehreren HTML -Dateien und bedeutet, dass Sie den Code nur von einer einzelnen Quelle bearbeiten müssen. Wenn Sie es gewohnt sind, mit React oder Vue zu arbeiten, wäre dies derselbe wie das Verweisen auf eine Komponente. Zweitens hält die Verwendung von JSON -Daten für unsere Dummy -Katalogdaten unseren Vorlagencode sauber. Auf unserer Liste können wir problemlos 10 Dummy -Produkte ausgeben, indem wir eine einfache Lenkerschleife ausgeben.
Öffnen Sie die folgende Datei in unserer Vorlage: src/html/index.html.
Um Zeile 21 werden Sie den folgenden Code sehen:
{{> swiper/swiper-homepage-hero }}
Das ist ein Lenker teilweise. Dieser Code zeigt den Lenker an, in einen Ordner namens Swiper (im Ordner Partials) zu schauen und dann eine Datei namens Swiper-Homepage-HERO zu finden und in die Datei index.html zu fügen, wenn sie kompiliert wird.
Es gibt einige wichtige Hinweise zu unserer Verwendung von Lenkerteils -Teils:
Schauen wir uns an, wie wir Lenker verwenden, um unsere Codebasis sauber zu halten. Öffnen Sie die Kategorie -Seite: src/html/category.html.
Um Zeile 40 finden Sie diesen Code:
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Und das ist unsere Schleife für eine Kategorie -Seite. Wir übergeben JSON -Daten an unsere Lenkerschleife und verweisen dann in der Schleife auf einen Lenker und übergeben sie die Daten für jedes Schleifenelement:
{{> listing-cards/listing-card-one this }}
Das von uns verwendete Webpack -Lenker -Plugin enthält ein sehr praktisches Dienstprogramm, mit dem wir JSON -Dateien als Vorlagendaten übergeben können.
Bitte navigieren Sie zu: SRC/Daten. Hier wohnt unsere Vorlagendaten. Sie können diesen Ordner bearbeiten, entfernen oder hinzufügen.
Wenn wir erneut auf unsere Kategorie -Seitenschleife hinweisen:
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Der wichtige Teil hier in Bezug auf Vorlagendaten sind Kategorienprodukte Dies bedeutet, dass Sie in unserem Datenordner eine JSON-Datei namens "Kategorieprodukte" finden. Diese Kategorieprodukt.json-Datei enthält einen "Schlüssel" mit dem Namen "Einträge".
Alle Quell -CSS/SASS -Dateien der Vorlage werden im Ordner der Vorlage aufbewahrt. Navigieren Sie zu SRC/Assets/SCSS. Öffnen Sie themen.scss mit Ihrem Editor.
Dies ist der Haupteintrittspunkt 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 das richtige HTML -Platz zu erleichtern. Benennen Sie die neu geschaffene Datei in die von Ihnen benötigte URL um. Und das war's. Sie können jetzt die neue Seite mit Ihrem Code -Editor öffnen, Ihre Änderungen vornehmen und dann die Datei speichern. Beenden Sie Webpack DevServer und starten Sie sie neu, damit die Seite angezeigt werden kann.
Bootstrap verfügt bereits über eine umfassende Dokumentations -Site, auf der Sie alle Standard -Bootstrap -Funktionen einrichten und verwenden können. Bootstrap 5 ist vollständig in den Quellcode unserer Vorlage integriert. In der DOC -Site von Bootstrap finden Sie zuerst für alle Standard -Bootstrap -Funktionen: Besuchen Sie die DOC -Site von Bootstraps.
Bootstrap
Aos.js
Unplash
Pexels
Pixabay
MediumZoom.js
Nouislider.js
SimpleBar.js
Swiper.js
Hier finden Sie unsere Website oder senden Sie uns eine E -Mail an [email protected]
