README

简介

每次我开始一个项目，我都会花大量时间裁剪和整理 AdminLTE 模板以适应我的视图，并安排变量和其他自定义选项。我决定对视图进行抽象，包括所有依赖项（正在更新到在线CDN中！）。

安装

配置

配置文件包括

• 应用名称

  Laravel安装会创建包含变量 APP_NAME 的 .env 文件，此值将在视图文件中提供，并提供公司名称的回退。

• 应用简称

  与应用名称不同，此变量未设置。您必须更新您的 .env 文件并添加变量名 APP_SHORT_NAME。如果不这样做，视图文件将显示 SHB，无论何时需要显示应用名称的简短版本。

使用方法

您创建的每个页面都有以下选项来包含

• @section('otherMETA') 您要添加到标准 </meta> 标签的任何其他 </meta> 标签。
• @section('otherCSS') 您要添加到标准 </link> 文件的任何其他 </link> 文件（在现有文件下方）。
• @section('otherJS') 您要添加到标准 </script> 的任何其他 </script>（在现有文件下方）。
• @section('contentTitle') 此部分将在以下两个位置使用：
  • 页面标题：{ CONTENT TITLE | APP NAME } </title>
  • 页面标题：内容页面的顶部 </h1>

• @section('contentTitleDesc') 这将跟随页面标题在 </small>
• @section('contents') 您页面的实际内容，请查看 ./samples/* 以获取现成的页面
• @section('version') 这将显示应用当前版本在页面右下角（页脚部分）

可选标签

您可以将设置选项添加到用户，这将允许用户保留他们的UX自定义。

选项

• 皮肤 skin

  选项

  • 蓝色 skin-blue（默认）
  • 黑色 skin-black
  • 紫色 skin-purple
  • 绿色 skin-green
  • 红色 skin-red
  • 黄色 skin-yellow
  • 浅蓝色 skin-blue-light
  • 浅黑色 skin-black-light
  • 浅紫色 skin-purple-light
  • 浅绿色 skin-green-light
  • 浅红色 skin-red-light
  • 浅黄色 skin-yellow-light

• 布局 layout

  选项

  • 原始 {EMPTY_STRING}（默认）
  • 固定 fixed
  • 框形 layout-boxed
  • 固定 & 框形 fixed layout-boxed

• 导航侧边栏（左侧）sideBar

  选项

  • 迷你 sidebar-mini（默认）
  • 折叠 sidebar-collapse
  • 悬停展开 sidebar-expanded-on-hover

• 控制侧边栏（右侧）

  选项

  • 隐藏 {EMPTY_STRING}（默认）
  • 打开 control-sidebar-open
  • 深色皮肤 control-sidebar-dark

依赖项

此包包含某些库。我正在努力用在线CDN替换这些文件（除了特定于此主题的文件）；同时，以下是库

可用库

在框架内可使用的CSS和JS文件链接。基本链接已包含在JS和CSS文件中；如果需要，其他链接需要添加

注意： 示例页面包含所需的库，请检查 /adminlte/samples/ 中的文件

JS

• <!-- jQuery 3 --> <script src="{{ asset('js/jquery.min.js') }}"></script> (已包含)

• <!-- jQuery UI 1.11.4 --> <script src="{{ asset('js/jquery-ui.min.js') }}"></script>

• <!-- 解决jQuery UI提示框与Bootstrap提示框的冲突 --> <script>$.widget.bridge('uibutton', $.ui.button);</script>

• <!-- Bootstrap 3.3.7 --> <script src="{{ asset('js/bootstrap.min.js') }}"></script> (已包含)

• <!-- Morris.js图表 --> <script src="{{ asset('js/raphael.min.js') }}"></script> <script src="{{ asset('js/morris.min.js') }}"></script>

• <!-- Sparkline --> <script src="{{ asset('js/jquery.sparkline.min.js') }}"></script>

• <!-- jvectormap --> <script src="{{ asset('js/jquery-jvectormap-1.2.2.min.js') }}"></script> <script src="{{ asset('js/jquery-jvectormap-world-mill-en.js') }}"></script>

• <!-- jQuery Knob Chart --> <script src="{{ asset('js/jquery.knob.min.js') }}"></script>

• <!-- daterangepicker --> <script src="{{ asset('js/moment.min.js') }}"></script> <script src="{{ asset('js/daterangepicker.js') }}"></script>

• <!-- datepicker --> <script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>

• <!-- Bootstrap WYSIHTML5 --> <script src="{{ asset('js/bootstrap3-wysihtml5.all.min.js') }}"></script>

• <!-- Slimscroll --> <script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script> (已包含)

• <!-- FastClick --> <script src="{{ asset('js/fastclick.js') }}"></script> (已包含)

• <!-- AdminLTE App --> <script src="{{ asset('js/adminlte.min.js') }}"></script> (已包含)

• <!-- AdminLTE仪表板演示（仅用于演示目的） --> <script src="{{ asset('js/pages/dashboard.js') }}"></script>

• <!-- AdminLTE用于演示目的 --> <script src="{{ asset('js/demo.js') }}"></script> (已包含)

CSS

• <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"> (已包含)

• <!-- Font Awesome --> <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}"> (已包含)

• <!-- Ionicons --> <link rel="stylesheet" href="{{ asset('css/Ionicons/css/ionicons.min.css') }}"> (已包含)

• <!-- 主题样式 --> <link rel="stylesheet" href="{{ asset('css/AdminLTE.min.css') }}"> (已包含)

• <!-- AdminLTE皮肤。从css/skins文件夹中选择皮肤而不是下载所有，以减少加载量。 --> <link rel="stylesheet" href="{{ asset('css/skins/_all-skins.min.css') }}"> (已包含)

• <!-- Morris图表 --> <link rel="stylesheet" href="{{ asset('css/morris.css') }}">

• <!-- jvectormap --> <link rel="stylesheet" href="{{ asset('css/jquery-jvectormap.css') }}">

• <!-- 日期选择器 --> <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker.min.css') }}">

• <!-- 日期范围选择器 --> <link rel="stylesheet" href="{{ asset('css/daterangepicker.css') }}">

• <!-- bootstrap wysihtml5 - 文本编辑器 --> <link rel="stylesheet" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">

• <!-- Google字体 --> <link rel="stylesheet" href="https://fonts.googleapis.ac.cn/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> (已包含)