alpine html bootstrap
Initial Release
Untuk toko online yang berfokus pada mode, Alpine adalah template eCommerce Bootstrap 5 yang responsif dengan efek "Ken Burns" pada slideshow beranda, spanduk miring, dan spanduk hotspot gambar khusus dengan kartu produk popout. Gambar produk besar pada halaman kategori memberi Anda ruang yang cukup untuk menampilkan produk sambil secara bersamaan menyediakan navigasi yang mudah di seluruh situs web. Ini adalah titik awal yang sempurna untuk situs web ritel mode apa pun, dan desain yang bersih dan minimal template berarti mudah untuk dimodifikasi dan tidak menyakitkan untuk diintegrasikan dengan aplikasi e -commerce khusus Anda. Dan yang terpenting, gratis.
Lihat demo | Unduh zip
Jika Anda tidak bermaksud bekerja dengan kode sumber template (dan itu berarti Anda tidak akan menyusunnya atau menjalankan server Webpack Dev), Anda tidak perlu menginstal apa pun. Anda cukup menavigasi ke folder Dist dan mulai mengedit file.
Sebagian besar pengembang akan mengedit kode sumber dan juga akan menjalankan webpack untuk mengkompilasi ulang file template. Jika itu masalahnya, maka pastikan Anda menginstal Node.js. Anda dapat mengunduhnya dari sini
git clone https://github.com/PixelRocket-Shop/alpine-html-bootstrap.gitnpm install di baris perintah Anda.npm start untuk memulai Webpack DevServer.npm run build Template terdiri dari 5 halaman:
Untuk menjaga pengulangan kode seminimal mungkin, kami telah menggunakan stang. JS sebagai mesin templating dan parsial untuk dengan cepat menambahkan kode yang sama ke halaman yang berbeda. Kami juga menggunakan plugin setang untuk data JSON - ini memungkinkan kami untuk menggunakan loop dan mengeluarkan blok kode HTML tunggal alih -alih mengulangi HTML yang sama.
URL demo
Harap dicatat bahwa ini hanya templat HTML. Itu tidak terhubung ke database, dan tidak akan secara otomatis bekerja dalam sistem manajemen konten (WordPress dll). Anda perlu memasukkan kode kami ke dalam aplikasi Anda.
? Dist - Versi Template yang Dihasilkan. Buka di sini jika Anda tidak ingin bekerja dengan kode sumber template. Tetapi berhati -hatilah: jika Anda menyesuaikan sesuatu di folder ini secara langsung, dan kemudian mengkompilasi ulang templat menggunakan webpack, kecuali Anda memindahkan folder Dist dari template, perubahan Anda akan ditimpa.
? Node_modules - Direktori di mana NPM menginstal ketergantungan. Anda tidak akan melihat folder ini sampai Anda menyelesaikan instalasi template. Anda tidak perlu membuat folder ini.
? SRC - Kode Sumber Template. Buka di sini untuk menyesuaikan template Anda.
? SRC/Aset - Aset templat seperti CSS, JS, gambar dll.
? SRC/Data - Template File Data JSON. Kami menggunakan file JSON ini untuk membuat pekerjaan Anda lebih mudah memasukkan konten ke dalam templat.
? SRC/HTML - Halaman template. Buka di sini untuk mengedit halaman yang ada atau menambahkan halaman baru.
? SRC/Partials - Templat parsial setang.
Setang adalah mesin templat yang memungkinkan kita untuk menjaga kode sumber template kita terorganisir dan sebersih mungkin. Ini mengurangi duplikasi kode dan melalui penggunaan fungsi pembantu, memungkinkan pengembang templat untuk dengan sangat cepat menghasilkan data dalam jumlah besar dengan kode minimal. Anda dapat membaca lebih lanjut tentang itu di sini.
Kami menggunakan setang karena dua alasan utama: Pertama, penggunaan parsial setang memungkinkan kami merujuk file yang sama di beberapa file HTML dan berarti Anda hanya perlu mengedit kode dari satu sumber. Jika Anda terbiasa bekerja dengan React atau Vue, ini akan sama dengan merujuk komponen. Kedua, penggunaan data JSON untuk data katalog dummy kami menjaga kode templat kami tetap bersih. Kami dapat dengan mudah mengeluarkan 10 produk dummy di halaman daftar kami dengan mengeluarkan loop setang dasar.
Buka file berikut di templat kami: SRC/HTML/INDEX.html.
Sekitar baris 46 Anda akan melihat kode berikut:
{{> swiper/swiper-hero-slideshow }}
Itu adalah parsial setang. Kode itu memberitahu setang untuk melihat ke dalam folder yang disebut swiper (terletak di folder parsial) dan kemudian untuk menemukan file yang disebut swiper-hero-slideshow dan memasukkannya ke dalam file index.html saat dikompilasi.
Ada beberapa catatan penting tentang penggunaan parsial setang kami:
Mari kita lihat bagaimana kita menggunakan setang untuk menjaga basis kode kita tetap bersih. Buka halaman kategori: SRC/HTML/Category.html.
Sekitar baris 56, Anda akan menemukan kode ini:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Dan itulah loop kami untuk halaman kategori. Kami menyerahkan data JSON ke loop setang kami, lalu di dalam loop kami merujuk parsial setang dan meneruskannya data untuk setiap item loop:
{{> listing-cards/listing-card this }}
Plugin setang webpack yang kami gunakan hadir dengan utilitas yang sangat berguna yang memungkinkan kami untuk memasukkan file JSON sebagai data templat.
Harap arahkan ke: SRC/Data. Di sinilah file Template Data JSON kami berada. Anda dapat mengedit, menghapus atau menambahkan sendiri ke folder ini.
Sekali lagi, jika kami merujuk loop halaman kategori kami:
{{#if (config category-products)}}
{{#each (limit category-products.entries 4)}}
<div class="col-12 col-sm-6 col-md-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
Bagian penting di sini sehubungan dengan data templat adalah kategori-produk. Masuk. Artinya di dalam folder data kami, Anda akan menemukan file JSON yang disebut "Kategori-Produk". File kategori ini memiliki "kunci" yang disebut "entri".
Semua file CSS/SASS sumber template disimpan di dalam folder aset template. Arahkan ke SRC/Asset/SCSS. Buka tema.scss dengan editor Anda.
Ini adalah titik masuk utama untuk semua file SASS/CSS lainnya.
Untuk membuat halaman baru, navigasikan di editor kode Anda ke: SRC/HTML. Untuk membuatnya lebih mudah untuk mendapatkan HTML yang benar, klon halaman yang ada. Ubah nama file yang baru dibuat ke URL apa pun yang Anda butuhkan. Dan itu saja. Anda sekarang bebas untuk membuka halaman baru dengan editor kode Anda, membuat perubahan Anda, dan kemudian menyimpan file. Berhentilah Webpack Devserver dan restart untuk halaman untuk muncul.
Bootstrap sudah memiliki situs dokumentasi komprehensif yang akan memandu Anda dalam mengatur dan menggunakan semua fitur bootstrap default. Bootstrap 5 sepenuhnya terintegrasi ke kode sumber template kami. Silakan merujuk ke situs dokumen Bootstrap terlebih dahulu untuk setiap fitur bootstrap default: kunjungi situs dokumen bootstrap
Bootstrap
AOS.JS
Unsplash
Pexels
Pixabay
Mediumzoom.js
Nouislider.js
SimpleBar.js
Swiper.js
Anda dapat menemukan situs web kami di sini atau Anda dapat mengirim email kepada kami di [email protected]
