FAQ

常见问题

需要帮忙吗?

最常被问到的 21 个问题,快速解答。 使用搜索功能跳转至任意内容,或点击下方主题。

没有找到与您搜索匹配的问题。请尝试其他关键词,或 发起讨论.

入门指南

4 个问题

AdminLTE 到底是什么?
一个免费的、MIT 许可的管理后台模板。它是一套基于 Bootstrap 5.3 构建的 HTML、CSS 和 JavaScript 文件——不是框架,也不是 npm 组件库。你只需将它放入你的项目,修改标记以适配你的应用,然后发布即可。
使用它需要构建步骤吗?
不需要。入门指南展示了纯 CDN 方式——将四个 <link> 标签和四个 <script> 标签复制到你的 HTML 中就完成了。如果你想要自定义 SCSS 变量或对 JavaScript 进行摇树优化,也可以使用基于 npm 的工作流。
v4 需要哪个版本的 Bootstrap?
Bootstrap 5.3.x。当前 package.json 锁定为 5.3.8——更早的 5.3 小版本应该也能用,但未经测试。Bootstrap 5.0 / 5.1 / 5.2 将无法使用(颜色模式和 data-bs-theme 系统是在 5.3 中引入的)。
我可以在 AdminLTE 4 中使用 jQuery 吗?
不需要 jQuery——AdminLTE 4 的 JavaScript 是原生 JS。如果你现有的应用已经使用了 jQuery,它们可以很好地共存。但 AdminLTE 4 自身的插件都不会调用 jQuery,也没有 $.fn.xxx() 这类插件垫片。
AdminLTE 可以用于 WordPress 吗?
可以——它只是 HTML/CSS/JS。典型的做法是构建一个自定义 WordPress 主题,将 AdminLTE 的标记包裹在 wp_head()wp_footer() 和 WordPress 循环周围。AdminLTE 不提供针对 WordPress 的专用构建版本;移植导航 Walker 类和认证表单的工作需要由你来完成。
Laravel?Symfony?Yii?Django?Rails?
都可以使用。AdminLTE 是一个服务端渲染模板——将演示页面复制到你的视图/模板中,将静态内容替换为你框架的模板变量,然后像往常一样配置路由/认证即可。社区中有针对 Laravel 和 Symfony 的 Composer/Packagist 包,但它们通常会落后于上游版本——在依赖它们之前,请先确认它们提供的是 v4 版本。
React, Vue, Svelte, Angular?

可以使用但不太自然。AdminLTE 的 JavaScript 插件使用 DOM 生命周期钩子(DOMContentLoaded、MutationObserver 模式),这些会与框架的协调机制产生冲突。如果你使用 SPA 框架,请考虑:

  • 将 AdminLTE 用于 CSS——保留视觉风格,但为交互部分自行编写 React/Vue 组件。
  • 或者选择专为你的框架构建的组件库(PrimeReact、Vuetify 等)。

我们不建议将 AdminLTE 的 jQuery 时代插件封装在 SPA 框架组件中——这会带来维护负担,得不偿失。

定制

3 个问题

如何更改主色?

:root 中覆盖 --bs-primary(及其对应的 RGB 值):

:root {
  --bs-primary: #6610f2;
  --bs-primary-rgb: 102, 16, 242;
}

如需更深层控制(侧边栏宽度、breakpoint、间距比例),请参阅自定义与主题

如何添加日期选择器 / 多选 / 富文本编辑器?
AdminLTE 刻意不捆绑这些组件——它们会使框架变得臃肿。推荐集成页面列出了一流的第三方库(Flatpickr、Tom Select、Quill 等),并附有可复制粘贴的安装代码片段。
我可以使用 FontAwesome 代替 Bootstrap Icons 吗?
可以。演示中默认使用 Bootstrap Icons,是因为它采用 MIT 许可、随 Bootstrap 一同提供,并且基于 SVG——但 AdminLTE 的 CSS 或 JS 中没有任何部分强制要求使用它。引入 FontAwesome 的样式表,然后将全文中的 <i class="bi bi-x"> 替换为 <i class="fas fa-x"> 即可。

版本与更新

3 个问题

我如何获取新版本的通知?
关注 GitHub 仓库(仅限 Releases 模式),或订阅 RSS 源:https://github.com/ColorlibHQ/AdminLTE/releases.atom
AdminLTE 3 的文档在哪里?
仍然在线,地址为 adminlte.io/docs/3.2,更早版本的文档也在那里提供链接。GitHub 上的 v3 分支会继续接收关键错误修复;新功能仅会在 v4 中发布。
如何从 v3 升级到 v4?
请参阅专门的从 v3 迁移指南。简而言之:类名发生了变化(.wrapper.app-wrapper),data-toggledata-bs-toggle,深色模式使用 data-bs-theme 替代 .dark-mode,并且不再需要 jQuery。

许可

3 个问题

AdminLTE 可以免费用于商业用途吗?
可以——采用 MIT 许可。你可以将其用于商业产品、SaaS 应用、客户项目等任何场景。唯一的要求是在源文件(adminlte.css / adminlte.js)中保留版权声明。你不需要在界面中显示署名信息。
我需要在应用中注明 AdminLTE 的出处吗?
不需要。MIT 许可要求你在分发的源文件中保留许可声明——仅此而已。你不必在渲染后的界面、关于页面或 README 中提及 AdminLTE。
我可以销售使用 AdminLTE 制作的产品吗?
可以。MIT 许可明确允许这样做。你还可以转售 AdminLTE 本身的修改版本(主题市场经常这样做)——只需保留原始版权声明即可。

故障排除

5 个问题

点击侧边栏按钮,侧边栏没有收起。
请检查 PushMenu 插件是否已加载。它已捆绑在 adminlte.js 中——请确保该脚本标签在页面上,并且位于其操作的目标标记之后。同时,请确认你的汉堡按钮使用了 data-lte-toggle="sidebar"(而不是 v3 版本的属性 data-widget="pushmenu")。
深色模式在刷新后不会保持。
内置的明暗模式切换后会以 lte-theme 为键名写入 localStorage。如果你使用了不同的切换实现,请确保它既设置了 document.documentElement.setAttribute('data-bs-theme', ...),又在变更时写入 localStorage。
按 ESC 键时 Bootstrap 模态框关闭了,但 AdminLTE 的侧边栏也同时收起了。
该问题已在 v4.0.0 中修复(#5993)。如果你仍然遇到此问题,说明你使用的是较旧的 RC 版本——请更新到最新版本。
我自定义的 SCSS 没有覆盖 AdminLTE 的默认值。
请将你的覆盖内容放在 AdminLTE 的 SCSS @import。AdminLTE 在其变量上使用了 !default,这意味着首次声明的值生效。有关导入顺序,请参阅自定义与主题
npm install 因 peer 依赖错误而失败。
我们在 package.json 中使用了 npm 的 overrides 区块来解决 peer 依赖问题——请确保你使用的 npm 版本为 8.3+,该版本支持此配置。如果你使用的是更旧的 npm 版本,请使用 --legacy-peer-deps 进行安装。

还需要帮助吗?

在 GitHub 上发起讨论, 或浏览文档以获取更深入的解答。