大家好,这是皮爷给大家带来的最新的学习Python能干啥?之Django教程,从零开始,到最后成功部署上线的项目。这一节,在Django中集成AdminLTE。
这一章节,我们将会介绍一个非常好用的东西,他叫Adminlte。
官方地址:https://adminlte.io/
在线Demo地址:https://adminlte.io/themes/AdminLTE/index2.html
最新Demo地址(我们就是要继承这个):https://adminlte.io/themes/v3/index3.html
可以看到这个是一个很完美的Dashboard框架,我们今天就要把这个东西集成到我们的网站里面,一起来跟我做吧。
下载源码
既然要集成这个东西,我们首先就要找到他的源码。源码很简单,就在首页有个Download按钮,点进去之后,就会跳转到Github里面,我们这里选择下载它最新的AdminLTE 3.0.4版本(如果你看到此文的时候,可能AdminLTE的最新版本不是3.0.4,请不用担心,本文所讲的东西,如果不发生重大变化,依然是可以在最新版本上面使用的):
点击下面的Source Code.zip下载:
下载好之后,打开文件,是这个样子的:
可以看到这个文件夹里面有index1.html, index2.html和index3.html三个文件,其实这三个文件就是对应的Dashboard v1,Dashboard v2和Dashboard v3这三个页面,我们随便点击开一个,这里点击的index3.html,就是以下界面:
这个不就是之前官网的在线Demo。随后我们要找到登录页面,就在左侧的Extras底下的Login:
点击开,整个登录页面长这个样子:
下一步我们就把这个网页集成到我们的系统里。
集成代码
集成这个网页到我们的系统,首先在templates目录下创建Login.html:
然后我们启动gulp,将URL进入到index.html路径下:
好,目前我们看到的就是那个login.html文件里面的内容。
接下来,我们就先来到AdminLTE的Login页面,右键点击“查看网页源码”:
进入到网页源码的页面,其实这里面的代码,就在路径:…/AdminLTE-3.0.4/pages/examples/login.html 下。
我们把这部分网页源码复制黏贴到我们的Login.html文件中,然后在gulp的帮助下,看一下前端变成了什么样子: