1.1.直接使用

前言

  • 通过本章节，你将会了解如何把这套静态后台加入自己的项目中。
  • 你的项目可能是java web、php、node，只要是基于模板系统的，都可以套用。

下载

  • git方式
  1. git clone https://git.oschina.net/docafe/adminlte2-itcast.git
  • 下载zip包
  1. http://git.oschina.net/docafe/adminlte2-itcast/repository/archive/master

发布目录说明

  1. release\dsit                发布目录
  2.             \pages          页面
  3.             \plugins        插件库
  4.             \img            图片
  5.             \css            css

创建模板步骤

  1. 安置静态文件

    请把 plugins 、img 、css 三个目录放入模板系统的静态目录，在你的项目下可能是 assets 、static 、public

    假设你是放在 public 下：

  1. \public\plugins
  2. \public\img
  3. \public\css

  1. 开始第一个页面，后台首页

    • 复制 /release/dist/pages/all-admin-index.html 到你的项目模板目录中

    • 替换文件路径

      • 默认路径是相对的 ../plugins/xxx , 在你的模板系统下可以这样替换

      • 查找 ../plugins/ , 替换成 <%=public_path%>/plugins/

        <%=public_path%> 是你模板系统的静态资源目录,请酌情修改

    • 运行你的项目看看效果

      后台首页

模板化拆分页面

/release/dist/pages/all-admin-index.html 为例

  • 页面结构说明

    页面结构

    分为4个部分 顶部导航 、 侧栏菜单 、 底部版权 、 内容区域

  • dom 说明

    页面dom

  • 如支持 Layout 创建母版

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <!-- 页面meta /-->
  5.         <!-- 页面css /-->
  6.     </head>
  7.     <body class="hold-transition skin-purple sidebar-mini">
  8.         <div class="wrapper">
  9.             <!-- 页面头部 /-->
  10.             <!-- 导航侧栏 /-->
  11.             <!-- 内容区域 /-->
  12.             <!-- 底部版权 /-->
  13.         </div>
  14.         <!-- 页面js /-->
  15.     </body>
  16. </html>
  • 直接使用 内容区域 html
    • 在发布目录下，有单独的 内容区域 html 方便大家使用
    • 如: 后台首页 admin-index ，会提供两个文件对应
      • /release/dist/pages/all-admin-index.html 全部html
      • /release/dist/pages/admin-index.html 内容区域的html

下载已套好的模板套件

感谢传智播客老师辛苦劳动~