2022 年 2 月 4 日

定制和缩减 AdminLTE 以匹配您的业务

AdminLTE 目前被全球数万用户使用。
至关重要的是，AdminLTE 提供了一种简单的方法来重新品牌和定制
原始设计以匹配业务的其余部分。幸运的是，它
已经非常容易让 AdminLTE 看起来与其他
实现方式截然不同。在这篇文章中，我们将学习如何使用这些功能
更改整个框架的颜色并删除我们可能不需要的代码
而不删除文件。我们将利用 LESS 变量和导入来实现我们的
目标。

LESS

LESS 框架是一个很棒的 CSS 预处理工具，它允许我们使用
变量和函数，导入其他文件等等。如果您不熟悉
LESS，请查看他们的 文档
以全面了解其功能。如果您熟悉 CSS，
学习 LESS 不需要超过 30 分钟。

编译 LESS

为了能够使用 LESS，我们需要学习如何将 LESS
代码编译成纯 CSS。一种方法是使用图形工具，例如
Koala，它适用于 Windows、Mac 和 Linux。
但是，这不是我最喜欢的选择。我更喜欢使用 Grunt,
它是一个 JS 框架，可以在命令行中运行 JavaScript 任务。出于
本教程的目的，我们将使用 Grunt，因为 AdminLTE 已经有了 Grunt 配置。如果您是
Windows 用户，请查看
此问题
来启动并运行。所有其他用户都应该可以使用
正常流程来安装
和使用 Grunt。

重新品牌 AdminLTE

重新品牌意味着更改模板的颜色以匹配整个业务的颜色。
在我们开始之前，请下载 AdminLTE 的最新副本。
在主文件夹中，您将找到 build/less 文件夹，其中包含我们的 LESS
文件。我们唯一需要自定义的文件是 variables.less 和
AdminLTE.less.

准备 Grunt

现在我们有了 Grunt 和 AdminLTE，我们应该在 AdminLTE 的
主目录中运行安装命令。

sudo npm install

上面的命令将安装开发 AdminLTE 功能所需的所有依赖项。
它还会警告您是否缺少或需要更新的内容。
从现在开始，Grunt 将监控文件更改，将 less 文件编译成 CSS 并压缩
纯 CSS 文件以最小化其大小。所有这些都只需最少的努力！

选择颜色和定制 AdminLTE

所以现在我们准备为我们的仪表板选择新的颜色。我发现
Coolors 是一个很好的来源
用于漂亮的调色板。我们选择了
此调色板。

在您最喜欢的代码编辑器中打开 variables.less。在此文件中，
有很多变量可以极大地改变 AdminLTE 的外观和感觉
如果进行了定制。因此，探索该文件以查看有哪些内容可以定制。
在本部分中，我们将关注颜色部分。以下是该部分
的样子。

//COLORS
//--------------------------------------------------------
//Primary
@light-blue: #3c8dbc;
//Danger
@red: #dd4b39;
//Success
@green: #00a65a;
//Info
@aqua: #00c0ef;
//Warning
@yellow: #f39c12;
        
@blue: #0073b7;
@navy: #001F3F;
@teal: #39CCCC;
@olive: #3D9970;
@lime: #01FF70;
@orange: #FF851B;
@fuchsia: #F012BE;
@purple: #605ca8;
@maroon: #D81B60;
@black: #111;
@gray: #d2d6de;

品牌颜色是列表中的前五种颜色。其余的只是一组颜色
您可以使用它们来突出显示某些元素。所以让我们用我们的
新调色板替换这些值。以下是更改后的样子。

//COLORS
//--------------------------------------------------------
//Primary
@light-blue: #FA7921;
//Danger
@red: #E55934;
//Success
@green: #9BC53D;
//Info
@aqua: #5BC0EB;
//Warning
@yellow: #FDE74C;

@blue: #0073b7;
@navy: #001F3F;
@teal: #39CCCC;
@olive: #3D9970;
@lime: #01FF70;
@orange: #FF851B;
@fuchsia: #F012BE;
@purple: #605ca8;
@maroon: #D81B60;
@black: #111;
@gray: #d2d6de;

完成更改后，键入以下命令来编译和压缩
less 文件。该命令将创建 adminlte.css、adminlte.min.css
以及所有皮肤文件，这些文件也将反映新的更改。

grunt less

或者，您可以运行 grunt watch 命令，Grunt 将在您每次保存时自动编译
LESS 文件。太棒了！

以下是使用 .skin-blue 皮肤的新颜色外观。

让我们用变量再做一件事来巩固这个想法。这一次，我们
将更改侧边栏的大小，使其变为 300 像素。在 variables.less 中
文件中，找到变量 @sidebar-width 并将其值更改为 300px。
以下是该行应该是什么样子。

@sidebar-width: 300px

然后再次运行 grunt less 命令（如果您没有运行 grunt watch）。

grunt less

您看到了它的简单性吗？我认为这非常有用，我希望您能享受这些功能。
由于我们更改了所有主要颜色，现在皮肤会自动更新以呈现这些
更改。让我们看看新的皮肤。

缩减

本教程的第二部分是关于删除可能对我们无用的部分
我们的应用程序。AdminLTE 带有许多组件，有时我们不需要所有这些组件。但是，
由于我们使用 LESS 来调节 AdminLTE，因此我们可以简单地删除不需要的组件。
为此，请打开 build/less/AdminLTE.less 并查看导入。每一行
正在导入一个特定的组件。要删除一个组件，只需注释掉（或删除）该
行。使用 // 来注释掉一行。完成操作后，运行 grunt less。您
将立即注意到 dist/css/adminlte.min.css 文件的大小已减小。
因此，非常简单有效地减少了应用程序的加载时间。

结论

在本教程中，我们学习了如何使用 LESS 变量来定制 AdminLTE 并重新品牌它
以适合我们业务的风格。我们还学习了如何删除不需要的组件
我们的应用程序。我们在这里学习的方法可以用于许多其他使用
CSS 预处理器的框架，例如 Bootstrap 和其他模板。

希望您喜欢本教程并发现它有用。请在下面留言并分享
您的想法。