简介sbadmin后台管理系统HTML静态模板是一套面向前端开发者与Web项目初学者的企业级管理界面快速搭建方案聚焦响应式UI开发与工程化实践。资源共162个文件涵盖58个JavaScript交互脚本、29个CSS样式表含Bootstrap、DataTables等核心UI库、20个LESS源文件支持主题定制、15个HTML页面含仪表盘、用户管理、表格、图表等典型后台模块以及字体、图标、数据模拟等配套资源整体包体仅1.38MB轻量易集成。已有162人学习下载适合希望掌握Bootstrap栅格布局、jQuery交互增强、Gulp自动化构建及Bower依赖管理的实战学习者。资源目录结构规范清晰dist为可直接部署的生产文件less/js/vendor分层存放源码与第三方库.gitignore与bower.json体现标准化工程配置data目录提供示例数据便于快速启动与二次开发。1. 不用框架也能跑通的后台管理系统sbadmin HTML 静态模板到底在解决什么问题你刚接手一个内部运营工具需求老板说“先搭个能看数据、能查日志、能配开关的后台页面下周要给业务方演示”。没有后端接口、没有登录鉴权、甚至没分配 Node.js 环境——但你得交出一个看起来专业、导航清晰、表格可排序、侧边栏能折叠的界面。这时sbadmin这类 HTML 静态模板就不是“过时的遗产”而是零依赖快速交付的最小可行界面MVP UI。它本质是一套基于 Bootstrap 5 的预编译 HTML 文件集合不依赖构建工具、不调用 API、不打包 JS 模块直接双击index.html就能在浏览器里打开完整布局顶部导航栏、左侧可折叠菜单、响应式卡片式仪表盘、带分页的表格、表单验证提示框——所有结构都固化在div classcard和>meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription contentsbadmin 后台管理系统静态模板 meta nameauthor contentStart Bootstrap其中viewport声明决定响应式行为是否生效charset错误会导致中文乱码description虽不影响运行但影响 SEO 可读性。若看到meta http-equivX-UA-Compatible contentIEedge可安全删除——该标签仅对 IE 有效现代浏览器已弃用。2.2 本地无服务启动用 Python 或 Live Server 插件绕过跨域限制直接双击index.html会触发浏览器安全策略XMLHttpRequest请求vendor/datatables/dataTables.bootstrap5.css时被拦截因 file:// 协议禁止跨文件加载 CSS/JS。解决方案只有两个且必须二选一2.2.1 Python 快速起服务推荐给命令行用户在模板根目录执行python3 -m http.server 8000然后访问http://localhost:8000/index.html。此命令启动的是 Python 内置 HTTP 服务器无需安装额外包且自动处理 MIME 类型.css返回text/css.js返回application/javascript。注意Python 2 用户需改用python -m SimpleHTTPServer 8000但强烈建议升级至 Python 3。2.2.2 VS Code Live Server 插件推荐给前端开发者安装插件后右键index.html→ “Open with Live Server”自动打开http://127.0.0.1:5500/index.html。它比 Python 方案多出热重载能力修改css/sb-admin-2.css后保存浏览器自动刷新。但需注意其默认端口可能被占用可在插件设置中修改为5501。注意禁用浏览器缓存调试。Chrome 开发者工具F12→ Network 标签页 → 勾选 “Disable cache”否则修改 CSS 后仍显示旧样式。2.3 核心布局组件拆解从 DOM 结构理解 sbadmin 的可定制边界sbadmin 的 DOM 结构遵循严格层级body→div idwrapper主容器→nav idsidebar-wrapper左侧菜单→div idcontent-wrapper右侧内容区。这种结构决定了所有定制必须围绕三个锚点展开锚点位置HTML 片段示例可定制范围不可更改项侧边栏菜单ul classnavbar-nav li classnav-item a classnav-link hrefindex.htmlDashboard/a /li /ul修改a文本、href地址、增删li条目不可删除navbar-nav类否则丢失 Bootstrap 样式顶部导航栏nav classnavbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow替换bg-white为bg-dark修改static-top为sticky-top不可移除navbar-expand否则小屏下菜单不折叠主内容区div idcontent classcontainer-fluid ... /div在内部插入任意 Bootstrap 组件卡片、表格、进度条不可将container-fluid改为container否则大屏留白验证方法在浏览器中按 CtrlShiftI 打开开发者工具点击左上角箭头图标悬停任意区域查看对应 HTML。你会发现所有交互如点击菜单折叠均由 Bootstrap 的 data 属性驱动而非自定义 JS——这意味着你无需碰js/sb-admin-2.js文件即可完成 80% 的 UI 调整。3. 动态交互注入用原生 JS 补齐静态模板缺失的数据绑定能力3.1 表格数据动态填充不用 jQuery 也能操作 DataTablessbadmin 默认集成 DataTables 插件位于vendor/datatables/但它在静态 HTML 中仅提供初始化脚本不包含数据源。常见误区是直接修改index.html中的table行数但这会导致分页、搜索功能失效。正确做法是用原生 JS 注入 JSON 数据3.1.1 准备结构化数据并挂载到 window 对象在index.html的body底部添加script // 模拟后端返回的 JSON 数据 window.tableData [ { id: 1, name: 订单系统, status: 运行中, uptime: 99.98% }, { id: 2, name: 用户中心, status: 维护中, uptime: 92.1% }, { id: 3, name: 支付网关, status: 运行中, uptime: 99.99% } ]; /script3.1.2 用原生 JS 初始化 DataTables 并绑定数据在js/sb-admin-2.js末尾追加或新建custom-table.js引入// 等待 DOM 加载完成 document.addEventListener(DOMContentLoaded, function() { // 检查 DataTables 是否已加载 if (typeof DataTable ! undefined) { const table new DataTable(#dataTable, { data: window.tableData, columns: [ { data: id, title: ID }, { data: name, title: 服务名称 }, { data: status, title: 状态, render: function(data) { return span classbadge ${data 运行中 ? bg-success : bg-warning}${data}/span; } }, { data: uptime, title: 可用率 } ], pageLength: 5, // 每页显示 5 条 language: { url: https://cdn.datatables.net/plug-ins/1.13.7/i18n/zh-CN.json // 中文语言包 } }); } });逻辑说明new DataTable()构造函数替代了旧版$(#dataTable).DataTable()避免依赖 jQueryrender函数实现状态 Badge 的条件渲染language.url指向 CDN 上的中文翻译文件确保“搜索”“每页显示”等文字为中文。参数pageLength必须显式设置否则默认为 10 条与 sbadmin 默认卡片高度冲突。3.2 下拉菜单与模态框的纯 Bootstrap 实现绕过 jQuery 依赖sbadmin 的下拉菜单如顶部用户头像菜单和模态框如“新增用户”弹窗在 Bootstrap 5 中已完全脱离 jQuery但需确保 HTML 结构符合规范3.2.1 下拉菜单的>div classdropdown a href# classdropdown-toggle>div classdropdown a href# classnav-link dropdown-toggle rolebutton >!-- 触发按钮 -- button typebutton classbtn btn-primary>:root[data-bs-themedark] { --bs-primary: #0d6efd; --bs-primary-rgb: 13, 110, 253; --bs-body-color: #dee2e6; --bs-body-bg: #212529; --bs-border-color: #495057; --bs-card-bg: #343a40; --bs-card-color: #f8f9fa; } :root[data-bs-themedark] .navbar { background-color: #343a40 !important; } :root[data-bs-themedark] .card { background-color: #343a40; border-color: #495057; }4.1.2 在 HTML 中添加主题切换按钮与 JS 控制逻辑在index.html的body顶部添加!-- 主题切换按钮 -- div classd-flex justify-content-end p-2 button idthemeToggle classbtn btn-sm btn-outline-secondary i classfas fa-moon/i 切换深色模式 /button /div在js/sb-admin-2.js末尾添加document.getElementById(themeToggle).addEventListener(click, function() { const html document.documentElement; if (html.getAttribute(data-bs-theme) dark) { html.removeAttribute(data-bs-theme); this.innerHTML i classfas fa-sun/i 切换深色模式; } else { html.setAttribute(data-bs-theme, dark); this.innerHTML i classfas fa-moon/i 切换浅色模式; } });注意必须将dark-mode.css放在bootstrap.min.css之后引入否则变量覆盖无效>media (max-width: 768px) { #sidebar-wrapper { transform: translateX(-100%); transition: transform 0.3s ease; } #sidebar-wrapper.active { transform: translateX(0); } #content-wrapper { margin-left: 0 !important; /* 移除固定 left 值 */ } #content-wrapper.toggled { margin-left: 250px !important; /* 展开时预留侧边栏宽度 */ } }4.2.2 同步控制侧边栏与内容区的 toggle 状态在js/sb-admin-2.js中找到侧边栏 toggle 函数修改为// 原始代码通常只操作 sidebar需补充 content-wrapper document.querySelector(#sidebarToggle).addEventListener(click, function() { document.querySelector(#sidebar-wrapper).classList.toggle(active); document.querySelector(#content-wrapper).classList.toggle(toggled); });验证方法用 Chrome 开发者工具切换设备为 iPhone X点击汉堡图标观察侧边栏是否平滑滑入内容区是否同步右移且无滚动条出现。5. 生产环境部署前的三项硬性检查确保静态模板零故障上线5.1 资源路径完整性扫描用 curl 批量验证所有 CSS/JS 文件可访问在 Linux/macOS 终端中进入模板根目录执行以下命令检查所有外部资源是否能被 HTTP 服务器正确返回# 提取所有 href/src 属性中的 URL grep -oP (href|src)[^]* index.html | sed s/href//;s/src//;s/$// | sort -u | while read url; do if [[ $url http* ]]; then echo 远程资源: $url curl -s -o /dev/null -w %{http_code}\n $url | grep -q 200 || echo ❌ 失败: $url elif [[ $url ! # $url ! javascript:void(0) ]]; then echo 本地资源: $url if [ ! -f $url ]; then echo ❌ 缺失: $url fi fi done该脚本会遍历index.html中所有href和src值对以http开头的远程链接如 CDN用curl检查 HTTP 状态码对本地路径如css/sb-admin-2.css检查文件是否存在。输出中若出现❌ 缺失或❌ 失败必须立即修复——否则上线后会出现空白样式或功能中断。5.2 字体与图标加载验证Font Awesome 图标不显示的定位流程当i classfas fa-user/i显示为方块时按以下顺序排查检查vendor/fontawesome-free/css/all.min.css是否被正确引入在浏览器开发者工具的 Network 标签页中筛选all.min.css确认状态码为200验证字体文件路径打开all.min.css查找url(../webfonts/fa-solid-900.woff2)确认vendor/fontawesome-free/webfonts/目录下存在fa-solid-900.woff2文件排除 CORS 问题若字体文件请求状态为blocked说明服务器未配置Access-Control-Allow-Origin头——此时需将字体文件改为相对路径引用或使用 CDN 版本link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css5.3 表单验证逻辑加固用 HTML5 原生约束替代 JavaScript 模拟sbadmin 的表单常依赖required、typeemail等原生属性但部分浏览器如旧版 Safari对pattern属性支持不全。必须为关键字段添加 fallback 验证5.3.1 密码强度验证的双重保障在密码输入框中同时使用 HTML5 属性和 JS 监听input typepassword classform-control idpassword pattern(?.*\d)(?.*[a-z])(?.*[A-Z]).{8,} title至少8位含数字、小写字母、大写字母 required并在js/sb-admin-2.js中添加document.getElementById(password).addEventListener(input, function(e) { const pwd e.target.value; const hasDigit /\d/.test(pwd); const hasLower /[a-z]/.test(pwd); const hasUpper /[A-Z]/.test(pwd); const isValid pwd.length 8 hasDigit hasLower hasUpper; e.target.setCustomValidity(isValid ? : 密码不符合要求); });逻辑说明pattern提供基础正则匹配setCustomValidity()在输入时动态设置验证消息覆盖浏览器默认提示input事件比blur更及时用户输入过程中即可反馈。此方案兼容所有现代浏览器且无需引入第三方验证库。最终交付物应是一个压缩包内含index.html、css/、js/、vendor/四个目录所有路径均为相对路径无任何绝对 URL 或外部依赖。上线后只需将该包解压至 Nginx 的html/目录或对象存储的静态网站托管桶中即可通过域名直接访问。本文还有配套的精品资源点击获取 
长河君 · 2026/9/14 7:33:02 · 阅读 1.2k sbadmin静态模板：零依赖后台MVP界面快速搭建指南
简介sbadmin后台管理系统HTML静态模板是一套面向前端开发者与Web项目初学者的企业级管理界面快速搭建方案聚焦响应式UI开发与工程化实践。资源共162个文件涵盖58个JavaScript交互脚本、29个CSS样式表含Bootstrap、DataTables等核心UI库、20个LESS源文件支持主题定制、15个HTML页面含仪表盘、用户管理、表格、图表等典型后台模块以及字体、图标、数据模拟等配套资源整体包体仅1.38MB轻量易集成。已有162人学习下载适合希望掌握Bootstrap栅格布局、jQuery交互增强、Gulp自动化构建及Bower依赖管理的实战学习者。资源目录结构规范清晰dist为可直接部署的生产文件less/js/vendor分层存放源码与第三方库.gitignore与bower.json体现标准化工程配置data目录提供示例数据便于快速启动与二次开发。1. 不用框架也能跑通的后台管理系统sbadmin HTML 静态模板到底在解决什么问题你刚接手一个内部运营工具需求老板说“先搭个能看数据、能查日志、能配开关的后台页面下周要给业务方演示”。没有后端接口、没有登录鉴权、甚至没分配 Node.js 环境——但你得交出一个看起来专业、导航清晰、表格可排序、侧边栏能折叠的界面。这时sbadmin这类 HTML 静态模板就不是“过时的遗产”而是零依赖快速交付的最小可行界面MVP UI。它本质是一套基于 Bootstrap 5 的预编译 HTML 文件集合不依赖构建工具、不调用 API、不打包 JS 模块直接双击index.html就能在浏览器里打开完整布局顶部导航栏、左侧可折叠菜单、响应式卡片式仪表盘、带分页的表格、表单验证提示框——所有结构都固化在div classcard和>meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 meta namedescription contentsbadmin 后台管理系统静态模板 meta nameauthor contentStart Bootstrap其中viewport声明决定响应式行为是否生效charset错误会导致中文乱码description虽不影响运行但影响 SEO 可读性。若看到meta http-equivX-UA-Compatible contentIEedge可安全删除——该标签仅对 IE 有效现代浏览器已弃用。2.2 本地无服务启动用 Python 或 Live Server 插件绕过跨域限制直接双击index.html会触发浏览器安全策略XMLHttpRequest请求vendor/datatables/dataTables.bootstrap5.css时被拦截因 file:// 协议禁止跨文件加载 CSS/JS。解决方案只有两个且必须二选一2.2.1 Python 快速起服务推荐给命令行用户在模板根目录执行python3 -m http.server 8000然后访问http://localhost:8000/index.html。此命令启动的是 Python 内置 HTTP 服务器无需安装额外包且自动处理 MIME 类型.css返回text/css.js返回application/javascript。注意Python 2 用户需改用python -m SimpleHTTPServer 8000但强烈建议升级至 Python 3。2.2.2 VS Code Live Server 插件推荐给前端开发者安装插件后右键index.html→ “Open with Live Server”自动打开http://127.0.0.1:5500/index.html。它比 Python 方案多出热重载能力修改css/sb-admin-2.css后保存浏览器自动刷新。但需注意其默认端口可能被占用可在插件设置中修改为5501。注意禁用浏览器缓存调试。Chrome 开发者工具F12→ Network 标签页 → 勾选 “Disable cache”否则修改 CSS 后仍显示旧样式。2.3 核心布局组件拆解从 DOM 结构理解 sbadmin 的可定制边界sbadmin 的 DOM 结构遵循严格层级body→div idwrapper主容器→nav idsidebar-wrapper左侧菜单→div idcontent-wrapper右侧内容区。这种结构决定了所有定制必须围绕三个锚点展开锚点位置HTML 片段示例可定制范围不可更改项侧边栏菜单ul classnavbar-nav li classnav-item a classnav-link hrefindex.htmlDashboard/a /li /ul修改a文本、href地址、增删li条目不可删除navbar-nav类否则丢失 Bootstrap 样式顶部导航栏nav classnavbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow替换bg-white为bg-dark修改static-top为sticky-top不可移除navbar-expand否则小屏下菜单不折叠主内容区div idcontent classcontainer-fluid ... /div在内部插入任意 Bootstrap 组件卡片、表格、进度条不可将container-fluid改为container否则大屏留白验证方法在浏览器中按 CtrlShiftI 打开开发者工具点击左上角箭头图标悬停任意区域查看对应 HTML。你会发现所有交互如点击菜单折叠均由 Bootstrap 的 data 属性驱动而非自定义 JS——这意味着你无需碰js/sb-admin-2.js文件即可完成 80% 的 UI 调整。3. 动态交互注入用原生 JS 补齐静态模板缺失的数据绑定能力3.1 表格数据动态填充不用 jQuery 也能操作 DataTablessbadmin 默认集成 DataTables 插件位于vendor/datatables/但它在静态 HTML 中仅提供初始化脚本不包含数据源。常见误区是直接修改index.html中的table行数但这会导致分页、搜索功能失效。正确做法是用原生 JS 注入 JSON 数据3.1.1 准备结构化数据并挂载到 window 对象在index.html的body底部添加script // 模拟后端返回的 JSON 数据 window.tableData [ { id: 1, name: 订单系统, status: 运行中, uptime: 99.98% }, { id: 2, name: 用户中心, status: 维护中, uptime: 92.1% }, { id: 3, name: 支付网关, status: 运行中, uptime: 99.99% } ]; /script3.1.2 用原生 JS 初始化 DataTables 并绑定数据在js/sb-admin-2.js末尾追加或新建custom-table.js引入// 等待 DOM 加载完成 document.addEventListener(DOMContentLoaded, function() { // 检查 DataTables 是否已加载 if (typeof DataTable ! undefined) { const table new DataTable(#dataTable, { data: window.tableData, columns: [ { data: id, title: ID }, { data: name, title: 服务名称 }, { data: status, title: 状态, render: function(data) { return span classbadge ${data 运行中 ? bg-success : bg-warning}${data}/span; } }, { data: uptime, title: 可用率 } ], pageLength: 5, // 每页显示 5 条 language: { url: https://cdn.datatables.net/plug-ins/1.13.7/i18n/zh-CN.json // 中文语言包 } }); } });逻辑说明new DataTable()构造函数替代了旧版$(#dataTable).DataTable()避免依赖 jQueryrender函数实现状态 Badge 的条件渲染language.url指向 CDN 上的中文翻译文件确保“搜索”“每页显示”等文字为中文。参数pageLength必须显式设置否则默认为 10 条与 sbadmin 默认卡片高度冲突。3.2 下拉菜单与模态框的纯 Bootstrap 实现绕过 jQuery 依赖sbadmin 的下拉菜单如顶部用户头像菜单和模态框如“新增用户”弹窗在 Bootstrap 5 中已完全脱离 jQuery但需确保 HTML 结构符合规范3.2.1 下拉菜单的>div classdropdown a href# classdropdown-toggle>div classdropdown a href# classnav-link dropdown-toggle rolebutton >!-- 触发按钮 -- button typebutton classbtn btn-primary>:root[data-bs-themedark] { --bs-primary: #0d6efd; --bs-primary-rgb: 13, 110, 253; --bs-body-color: #dee2e6; --bs-body-bg: #212529; --bs-border-color: #495057; --bs-card-bg: #343a40; --bs-card-color: #f8f9fa; } :root[data-bs-themedark] .navbar { background-color: #343a40 !important; } :root[data-bs-themedark] .card { background-color: #343a40; border-color: #495057; }4.1.2 在 HTML 中添加主题切换按钮与 JS 控制逻辑在index.html的body顶部添加!-- 主题切换按钮 -- div classd-flex justify-content-end p-2 button idthemeToggle classbtn btn-sm btn-outline-secondary i classfas fa-moon/i 切换深色模式 /button /div在js/sb-admin-2.js末尾添加document.getElementById(themeToggle).addEventListener(click, function() { const html document.documentElement; if (html.getAttribute(data-bs-theme) dark) { html.removeAttribute(data-bs-theme); this.innerHTML i classfas fa-sun/i 切换深色模式; } else { html.setAttribute(data-bs-theme, dark); this.innerHTML i classfas fa-moon/i 切换浅色模式; } });注意必须将dark-mode.css放在bootstrap.min.css之后引入否则变量覆盖无效>media (max-width: 768px) { #sidebar-wrapper { transform: translateX(-100%); transition: transform 0.3s ease; } #sidebar-wrapper.active { transform: translateX(0); } #content-wrapper { margin-left: 0 !important; /* 移除固定 left 值 */ } #content-wrapper.toggled { margin-left: 250px !important; /* 展开时预留侧边栏宽度 */ } }4.2.2 同步控制侧边栏与内容区的 toggle 状态在js/sb-admin-2.js中找到侧边栏 toggle 函数修改为// 原始代码通常只操作 sidebar需补充 content-wrapper document.querySelector(#sidebarToggle).addEventListener(click, function() { document.querySelector(#sidebar-wrapper).classList.toggle(active); document.querySelector(#content-wrapper).classList.toggle(toggled); });验证方法用 Chrome 开发者工具切换设备为 iPhone X点击汉堡图标观察侧边栏是否平滑滑入内容区是否同步右移且无滚动条出现。5. 生产环境部署前的三项硬性检查确保静态模板零故障上线5.1 资源路径完整性扫描用 curl 批量验证所有 CSS/JS 文件可访问在 Linux/macOS 终端中进入模板根目录执行以下命令检查所有外部资源是否能被 HTTP 服务器正确返回# 提取所有 href/src 属性中的 URL grep -oP (href|src)[^]* index.html | sed s/href//;s/src//;s/$// | sort -u | while read url; do if [[ $url http* ]]; then echo 远程资源: $url curl -s -o /dev/null -w %{http_code}\n $url | grep -q 200 || echo ❌ 失败: $url elif [[ $url ! # $url ! javascript:void(0) ]]; then echo 本地资源: $url if [ ! -f $url ]; then echo ❌ 缺失: $url fi fi done该脚本会遍历index.html中所有href和src值对以http开头的远程链接如 CDN用curl检查 HTTP 状态码对本地路径如css/sb-admin-2.css检查文件是否存在。输出中若出现❌ 缺失或❌ 失败必须立即修复——否则上线后会出现空白样式或功能中断。5.2 字体与图标加载验证Font Awesome 图标不显示的定位流程当i classfas fa-user/i显示为方块时按以下顺序排查检查vendor/fontawesome-free/css/all.min.css是否被正确引入在浏览器开发者工具的 Network 标签页中筛选all.min.css确认状态码为200验证字体文件路径打开all.min.css查找url(../webfonts/fa-solid-900.woff2)确认vendor/fontawesome-free/webfonts/目录下存在fa-solid-900.woff2文件排除 CORS 问题若字体文件请求状态为blocked说明服务器未配置Access-Control-Allow-Origin头——此时需将字体文件改为相对路径引用或使用 CDN 版本link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css5.3 表单验证逻辑加固用 HTML5 原生约束替代 JavaScript 模拟sbadmin 的表单常依赖required、typeemail等原生属性但部分浏览器如旧版 Safari对pattern属性支持不全。必须为关键字段添加 fallback 验证5.3.1 密码强度验证的双重保障在密码输入框中同时使用 HTML5 属性和 JS 监听input typepassword classform-control idpassword pattern(?.*\d)(?.*[a-z])(?.*[A-Z]).{8,} title至少8位含数字、小写字母、大写字母 required并在js/sb-admin-2.js中添加document.getElementById(password).addEventListener(input, function(e) { const pwd e.target.value; const hasDigit /\d/.test(pwd); const hasLower /[a-z]/.test(pwd); const hasUpper /[A-Z]/.test(pwd); const isValid pwd.length 8 hasDigit hasLower hasUpper; e.target.setCustomValidity(isValid ? : 密码不符合要求); });逻辑说明pattern提供基础正则匹配setCustomValidity()在输入时动态设置验证消息覆盖浏览器默认提示input事件比blur更及时用户输入过程中即可反馈。此方案兼容所有现代浏览器且无需引入第三方验证库。最终交付物应是一个压缩包内含index.html、css/、js/、vendor/四个目录所有路径均为相对路径无任何绝对 URL 或外部依赖。上线后只需将该包解压至 Nginx 的html/目录或对象存储的静态网站托管桶中即可通过域名直接访问。本文还有配套的精品资源点击获取