Kavlan adalah templat panel admin gelap yang sempurna untuk membuat sistem administrasi Anda mudah dinavigasi dan dipelihara. Bersih, responsif, dan mudah digunakan, Kavlan menghadirkan pengalaman pengguna yang akan membantu Anda membuat antarmuka yang sukses. Dan yang terpenting, gratis!
Lihat Demo | Unduh ZIP
Persyaratan
Mulai Cepat
Halaman Templat
Tautan Demo
Fitur Utama Templat
Struktur File Templat
Setang
Templat Data JSON
Sesuaikan Gaya Templat
Buat Halaman Baru
Dokumentasi Bootstrap
Kredit
Hubungi kami
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
Unduh rilis terbaru ATAU kloning repo: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git
Instal Node.js jika Anda belum memilikinya di sistem Anda.
Buka root proyek di baris perintah Anda.
jalankan npm install
di baris perintah Anda.
jalankan npm start
untuk memulai server dev Webpack.
jika Anda ingin mengkompilasi ulang file template (yang dikeluarkan ke folder dist), jalankan npm run build
Templat terdiri dari 6 halaman:
Dasbor
Halaman Masuk
Halaman Daftar
Halaman Lupa Kata Sandi
404 Halaman
Halaman Kosong
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.
Integrasi Chart.js dengan 3 jenis bagan berbeda
Dibangun dengan Bootstrap 5
Sepenuhnya responsif
Komponen pesanan terbaru
Sidebar yang dapat dilipat (otomatis diciutkan saat mengubah ukuran browser)
Komponen notifikasi
Komponen avatar
Komponen masuk/daftar
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:
Semua parsial kami disimpan di dalam src/partials. Jangan letakkan sebagian di tempat lain.
Kami menggunakan .html sebagai ekstensi file parsial kami. Kami juga menambahkan .svg sebagai ekstensi file parsial yang valid.
Jika Anda memiliki folder di dalam folder di dalam folder parsial, hanya referensikan folder tempat sebagian berada. Jadi "partials/header/navbars/navbar.html" akan direferensikan sebagai "navbars/navbar".
Jangan sertakan ekstensi file parsial. Perhatikan pada contoh di atas bahwa kita menampilkan "breadcrumbs" dan bukan "breadcrumbs.html"
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]