Mazer 是一套面向数据看板、内部运营系统和管理工具的 Bootstrap 5 多页面后台模板。本地 1.0.0 下载包提供 58 个页面模板,覆盖仪表盘、组件、表单、富文本编辑器、数据表、图表、认证和错误页,并附带 Nunjucks、SCSS 与 Laravel Mix 构建源码。它采用 MIT License,但账户、聊天、邮件、结算和数据查询仍是前端演示,需要自行接入真实后端。

资源目录同时保留 src 和 dist:前者是用于修改布局、侧栏和样式的源文件,后者是已经生成的静态页面。只需要查看或替换文案时,可以直接从 dist/index.html 开始;需要统一调整页面骨架、导航项目或主题样式时,则应修改 Nunjucks、sidebar-items.json 和 SCSS 后重新构建。
58 个页面模板如何分布
| 页面组 | 数量 | 包含内容 |
|---|---|---|
| 仪表盘 | 1 | 统计卡片、访问图表、地区数据、评论和消息列表 |
| 基础与扩展组件 | 19 | 警告、按钮、卡片、轮播、模态框、分页、进度、头像、评分和提示消息等 |
| 布局 | 4 | 默认侧栏、单列、带顶部导航和横向菜单布局 |
| 表单与编辑器 | 11 | 输入、选择、单选、复选、文本域、表单布局及四种富文本编辑器 |
| 表格、图表与数据组件 | 7 | 基础表格、数据表、Chart.js、ApexCharts、文件上传和两类地图入口 |
| 小部件与图标 | 6 | 聊天框、价格卡、待办列表及三套图标页面 |
| 应用、认证与错误页 | 10 | 邮件、聊天、图库、结算、登录、注册、找回密码和 403/404/500 页面 |
上述分组共 58 个源页面模板。dist 目录实际可数到 59 个 HTML 文件,多出的 sidebar-items.html 是构建过程从侧栏数据生成的产物,不应算作独立业务页面。因此,资源属性使用“58 页 + 1 个构建文件”比直接照写 60 页更符合当前压缩包内容。
数据表、图表和待办组件具备哪些交互
数据表页面使用 Simple-DataTables,可以在浏览器端执行关键词检索、排序和分页;待办小部件通过 Dragula 支持拖动排序;仪表盘和图表示例分别使用 ApexCharts 与 Chart.js。SweetAlert、Toastify、评分组件、轮播和模态框也提供可操作示例,适合作为后台反馈、数据展示和组件状态的前端参考。
富文本部分包含 Quill、CKEditor、Summernote 与 TinyMCE 四套示例。模板的主要导航和 Bootstrap 组件不依赖 jQuery,但 Summernote 页面会单独加载 jQuery,因此整个资源包不能概括为“完全没有 jQuery 文件”。如果项目只使用 Quill、CKEditor 或 TinyMCE,可以删除 Summernote 页面及其对应资源,保持主要工程的原生 JavaScript 路线。
Nunjucks 与 Laravel Mix 如何组织源码
源页面通过 extends 复用 layouts/master.html 等布局文件,侧栏结构集中保存在 src/sidebar-items.json。修改菜单名称、链接和分组时,不必逐页编辑生成后的导航;构建配置会把同一份侧栏数据传给 Nunjucks,再输出到各个静态页面。
样式入口位于 src/assets/scss,包括 Bootstrap 定制、页面样式、组件样式和聊天、待办等小部件样式。包内脚本提供 npm run dev、npm run watch 和 npm run prod,由 Laravel Mix 6、Webpack 5 和 Sass 负责生成资源。本文只核对了文件与配置,没有执行依赖安装和生产构建,因此正式改造前仍应在目标 Node 环境中验证依赖兼容与构建输出。
认证、应用页面与文件上传有哪些边界
登录、注册和找回密码表单的提交目标都是本地 index.html,不会创建账户、发送重置邮件或保存会话。邮件编辑器的表单指向占位地址;聊天应用、照片图库、结算页、Google Map 和矢量地图页面在本地 1.0.0 源码中显示“Coming Soon”,不能视为已经实现的管理模块。
文件上传页集成 FilePond,并包含一个向第三方图片服务发送文件的 XMLHttpRequest 示例,其中还写有示例 API Key。正式项目不应直接沿用这个配置:应移除公开 Key,将上传目标换成自有受控接口,并在上传前说明文件去向、大小限制、格式校验和隐私政策。普通 FilePond 选取、预览和验证界面也不等于文件已经存入你的服务器。
在线演示与本地 1.0.0 包并非完全同步
当前在线演示仍属于 Mazer 管理后台,但导航中已经出现 RTL 布局、表单验证、Profile、Security、Leaflet Map 和 OpenLayers Map 等新增入口;这些页面没有包含在本地 1.0.0 下载包中。选择功能时应以实际压缩包为准,不能仅根据在线演示菜单判断资源内已有文件。
- 先从
dist选择实际需要的页面,删除“Coming Soon”和不使用的演示入口。 - 在
src/sidebar-items.json收缩菜单,并同步修改共用 Nunjucks 布局、页脚和品牌信息。 - 通过 SCSS 调整主色、间距、字体和卡片状态,不要直接把生成后的 CSS 作为唯一维护源。
- 将仪表盘数字、图表数组和数据表样例替换为接口数据,增加加载、空数据、失败和权限不足状态。
- 接入认证、会话、角色权限和服务端校验;邮件、聊天、结算和上传则根据业务单独设计接口。
- 处理外部字体、视频、文件上传和第三方编辑器依赖,最后再执行生产构建和多尺寸页面检查。
MIT License 允许使用、修改和分发源码,但在软件副本或重要代码部分中需要保留版权声明和许可文本。模板内的人名、头像、统计数字、评论、地图和交易相关信息均为演示内容,上线前应替换为有权使用且与实际业务一致的数据。














暂无评论内容