apollo html bootstrap
Apollo Initial Release
Apollo adalah template admin Bootstrap 5 yang bersih dan minimal responsif.
Lihat Demo | Unduh ZIP
Jika Anda tidak bermaksud untuk bekerja dengan kode sumber templat (dan itu berarti Anda tidak akan mengompilasinya atau menjalankan server pengembang Webpack), Anda tidak perlu menginstal apa pun. Anda cukup menavigasi ke folder dist dan mulai mengedit file.
Kebanyakan pengembang akan mengedit kode sumber dan juga akan menjalankan Webpack untuk mengkompilasi ulang file template. Jika demikian, pastikan Anda telah menginstal Node.js. Anda dapat mengunduhnya dari sini
git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.gitnpm install di baris perintah Anda.npm start untuk memulai server dev Webpack.npm run build Templat terdiri dari halaman-halaman berikut:
Serta widget berikut:
Untuk meminimalkan pengulangan kode, kami telah menggunakan Handlebars.js sebagai mesin templating dan sebagian untuk menambahkan kode yang sama ke halaman berbeda dengan cepat. Kami juga menggunakan plugin Handlebars untuk data JSON - ini memungkinkan kami menggunakan loop dan mengeluarkan satu blok kode HTML 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 templat yang dihasilkan. Buka di sini jika Anda tidak ingin bekerja dengan kode sumber templat. Namun berhati-hatilah: jika Anda mengkustomisasi apa pun di folder ini secara langsung, dan kemudian mengkompilasi ulang templat menggunakan webpack, kecuali Anda memindahkan folder dist keluar dari templat, perubahan Anda akan ditimpa.
? node_modules - Direktori tempat NPM menginstal dependensi. Anda tidak akan melihat folder ini sampai Anda menyelesaikan instalasi template. Anda tidak perlu membuat folder ini.
? src - Kode sumber templat. Buka di sini untuk menyesuaikan templat Anda.
? src/assets - Aset templat seperti CSS, JS, Gambar, dll.
? src/data - Templat file Data JSON. Kami menggunakan file JSON ini untuk mempermudah pekerjaan Anda dalam memasukkan konten ke dalam template.
? src/html - Halaman templat. Buka di sini untuk mengedit halaman yang ada atau menambahkan halaman baru.
? src/partials - Templat parsial setang.
Handlebars adalah mesin templat yang memungkinkan kita menjaga kode sumber templat tetap terorganisir dan sebersih mungkin. Ini mengurangi duplikasi kode dan melalui penggunaan fungsi pembantu, memungkinkan pengembang template dengan cepat mengeluarkan data dalam jumlah besar dengan kode minimal. Anda dapat membaca lebih lanjut tentangnya di sini.
Buka file berikut di template kami: src/html/index.html.
Sekitar baris 21 Anda akan melihat kode berikut:
{{> content/breadcrumbs }}
Itu sebagian Stang. Kode tersebut memberitahu Handlebars untuk melihat ke dalam folder bernama content (terletak di folder parsial) dan kemudian menemukan file bernama breadcrumbs dan memasukkannya ke dalam file index.html saat dikompilasi.
Ada beberapa catatan penting tentang penggunaan sebagian Setang:
Plugin Webpack Handlebars yang kami gunakan dilengkapi dengan utilitas yang sangat berguna yang memungkinkan kami meneruskan file JSON sebagai data templat.
Silakan navigasikan ke: src/data. Di sinilah tempat file JSON data template kita berada. Anda dapat mengedit, menghapus, atau menambahkan milik Anda sendiri ke folder ini.
Semua file CSS/SASS sumber templat disimpan di dalam folder aset templat. Navigasikan ke src/assets/scss. Buka theme.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 mempermudah mendapatkan HTML yang benar, kloning halaman yang ada. Ganti nama file yang baru dibuat menjadi URL apa pun yang Anda perlukan. Dan itu saja. Anda sekarang bebas membuka halaman baru dengan editor kode Anda, membuat perubahan, dan kemudian menyimpan file. Keluar dari server dev Webpack dan mulai ulang agar halaman tersebut muncul.
Bootstrap sudah memiliki situs dokumentasi lengkap yang akan memandu Anda dalam mengatur dan menggunakan semua fitur bawaan Bootstrap. Bootstrap 5 terintegrasi penuh dengan kode sumber template kami. Silakan merujuk ke situs dokumen Bootstrap terlebih dahulu untuk mengetahui fitur default Bootstrap: Kunjungi Situs Dokumen Bootstrap
tali sepatu
grafik.js
Hapus percikan
Pexels
Pixabay
Simplebar.js
Anda dapat menemukan situs web kami di sini atau mengirim email kepada kami di [email protected]
