Lompat ke konten
dokumentasi.id
Masuk
dokumentasi.idzuramaimazer
Commit 6ea47ab
v2
Star3,1 rb

Kamu membaca versi lama. Halaman ini hanya bisa dibaca.

Navigasi sumber

1

Ringkasan Proyek Mazer

Mazer adalah template admin dashboard berbasis Bootstrap 5 yang dibuat untuk mempercepat pengembangan antarmuka aplikasi. README menyebutnya sebagai template dashboard admin yang dibuat dengan Bootstrap 5 dan tanpa dependensi jQuery README.md:5. Berkas package.json mencatat nama paket mazer, versi 2.3.1, deskripsi "Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page", serta lisensi MIT package.json:1-17. Lisensi MIT itu berlaku atas nama Ahmad Saugi LICENSE:1-3, dan README menutup dengan pernyataan yang sama README.md:126-128. Versi Bahasa Indonesia dari berkas yang sama memuat klaim yang setara README_INDONESIAN.md:5-6.

Halaman demo disusun sebagai berkas .html di bawah src/. Setiap halaman menetapkan title dan filename, lalu mewarisi layout lewat {% extends 'src/layouts/master.html' %} src/index.html:1-8. Vite memindai seluruh berkas .html di src dan memakainya sebagai rollupOptions.input, sehingga satu halaman menjadi satu entri build vite.config.js:15-26.

Peta modul

graph TD
    pages["src/*.html halaman demo"] --> master["layouts/master.html"]
    master --> sidebar["layouts/sidebar.html"]
    master --> footer["partials/footer.html"]
    master --> scss["assets/scss/app.scss"]
    master --> init["static/js/initTheme.js"]
    master --> appjs["assets/js/app.js"]
    appjs --> mazer["assets/js/mazer.js"]
    mazer --> bs["bootstrap.bundle"]
    mazer --> sidebarjs["components/sidebar.js"]
    init --> darkjs["components/dark.js"]
    vite["vite.config.js"] --> master
    vite --> nunjucks["vite-plugin-nunjucks"]
    scss --> cssout["dist/assets/compiled/css"]
    appjs --> jsout["dist/assets/compiled/js/app.js"]
    style vite fill:#f59e0b,color:#000
    style nunjucks fill:#f59e0b,color:#000
    style master fill:#f59e0b,color:#000
    style cssout fill:#2d7d46,color:#fff
    style jsout fill:#2d7d46,color:#fff
    style init fill:#8b5cf6,color:#fff
    style darkjs fill:#8b5cf6,color:#fff
    style sidebarjs fill:#8b5cf6,color:#fff
    style bs fill:#8b5cf6,color:#fff
%% fig: Peta modul Mazer dari halaman Nunjucks sampai hasil build
%% desc: Halaman di src mewarisi layouts/master.html yang memuat partial serta aset, lalu vite.config.js mengubahnya menjadi berkas di dist/assets/compiled.
Fig. 1: Peta modul Mazer dari halaman Nunjucks sampai hasil buildHalaman di src mewarisi layouts/master.html yang memuat partial serta aset, lalu vite.config.js mengubahnya menjadi berkas di dist/assets/compiled.

layouts/master.html memuat assets/scss/app.scss, tema gelap themes/dark/app-dark.scss, skrip initTheme.js di awal <body>, sidebar, dan footer partial src/layouts/master.html:1-31. Nilai isDev menentukan skrip mana yang dipakai: assets/js/app.js sebagai module saat development, assets/compiled/js/app.js pada hasil build src/layouts/master.html:35-39. Plugin vite-plugin-nunjucks mengisi variabel tiap halaman, termasuk sidebarItems, horizontalMenuItems, dan web_title, serta menyediakan filter containString dan startsWith vite.config.js:28-40. Hasil build ditulis ke dist dengan target chrome58 dan aset dikelompokkan ke assets/compiled/ vite.config.js:152-175.

app.js mengganti elemen [data-feather] dengan ikon Feather, lalu mengimpor ./mazer src/assets/js/app.js:1-8. Modul mazer.js menempelkan bootstrap.bundle ke window.bootstrap dan mengimpor static/js/components/sidebar src/assets/js/mazer.js:1-8. Tema dibaca lebih awal oleh initTheme.js, yang hanya menyalin nilai localStorage ke atribut data-bs-theme pada elemen html src/assets/static/js/initTheme.js:1-5, sedangkan dark.js menyediakan toggleDarkTheme, setTheme, dan initTheme dengan kunci penyimpanan theme src/assets/static/js/components/dark.js:1-24.

Fitur utama

KemampuanWujud di repository
Bootstrap 5"bootstrap": "5.3.3" package.json:32-69
Tanpa dependensi jQuery di intipernyataan README README.md:5
Layout Nunjucksblok stylesfirst, styles, content, js di master src/layouts/master.html:1-31
Navigasi berbasis datasrc/sidebar-items.json sebagai sumber menu sidebar src/sidebar-items.json:1-10
Mode gelapatribut data-bs-theme dan localStorage src/assets/static/js/components/dark.js:1-24
Build dengan Vitevite 5.0.2 dan vite-plugin-nunjucks package.json:70-84
Layout RTLrtlcss pada dist/assets/compiled/css package.json:1-17

Ketergantungan pustaka

dependencies memuat pustaka UI yang dipakai halaman demo, antara lain bootstrap, apexcharts, chart.js, datatables.net-bs5, filepond, flatpickr, choices.js, parsleyjs, quill, summernote, tinymce, sweetalert2, toastify-js, jsvectormap, dan perfect-scrollbar package.json:32-69. devDependencies berisi perkakas build dan rilis: vite, vite-plugin-nunjucks, vite-plugin-static-copy, sass, postcss, prettier, bestzip, dan release-it package.json:70-84.

Setiap modul extension disalin ke assets/extensions lewat viteStaticCopy, dengan tanda true/false yang menentukan apakah yang disalin hanya isi folder dist atau seluruh paket vite.config.js:28-40. Stylesheet inti dirangkai di app.scss: variabel Mazer dimuat lebih dulu, lalu Bootstrap, bootstrap-icons, font, perfect-scrollbar, dan _mazer src/assets/scss/app.scss:1-21.

Perlu diperhatikan

⚠️ Klaim "tanpa jQuery" berlaku untuk inti template, bukan untuk seluruh halaman demo. Halaman table-datatable-jquery.html memuat assets/extensions/jquery/jquery.min.js dan assets/extensions/datatables.net/js/jquery.dataTables.min.js src/table-datatable-jquery.html:558-559.

Template ini juga memiliki porta komunitas untuk berbagai framework, seperti Laravel, Nuxt, Django, Flask, Ruby on Rails, dan Next JS, yang dicantumkan di README README.md:106-120.

Halaman berikutnya