前言
最近从网上看到AdminLTE这个web前端的主题挺好的,我平时用python就是写一些后台,准备以后就用这个框架了,这里就是把这个用django初始化一下这个项目。
基础环境介绍
Python 3.6.0
Django 1.11
AdminLTE lasted # git clone from github
环境准备
创建一个lte的django项目,不需要创建app,我们就做个index页面能展示就行了,以后用哪部分改哪部分就行了。AdminLTE从github上下载最新的解压到一个路径就好了,然后把在django的项目中做如下操作
mkdir static
cd static
mkdir {css,js,plugins}
然后把bower_components,dist,plugins都放到plugins目录里面,打开index.html,我们发现这里面引用了一个google的css文件,直接wget下来,然后放到static/css目录下,命名为googleapis.css。在templates下面创建如下5个文件
mojideMacBook-Pro-2:templates hongzhi.wang$ tree -a
.
├── base.html
├── content-header.html
├── header.html
├── index.html
└── sidebar.html
把整个index.html都copy到base.html里面。
部署
具体操作如下:
{% load static %} base.html开头
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
改成
<link rel="stylesheet" href="{% static 'plugins/bower_components/Ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
改成
<link rel="stylesheet" href="{% static 'plugins/dist/css/skins/_all-skins.min.css' %}">
其他的引用都如此做,我写了一个python的正则,大家可以参考一下print(re.sub('([\w]+/[\w\.\-/]+)',r"{% static 'plugins/\1' %}",s))
,我用这个替换了index.html,然后都放到base里面
接着根据index.html的结构拆分成5个html文件
views 编写
lte/views.py
文件如下
from django.views.generic import TemplateView
class IndexView(TemplateView):
template_name = 'index.html'
def get(self, request, *args, **kwargs):
return super(IndexView, self).get(request, *args, **kwargs)
urls 编写
lte/urls.py
文件如下
from django.conf.urls import url
from django.contrib import admin
from .views import IndexView
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', IndexView.as_view(), name='index'),
]
运行结果
然后运行就能看到这个AdminLTE这个index的页面了,如果我们想临时看AdminLTE这个主题的效果可以在git clone下载的主目录下面python -m SimpleHTTPServer 8000
,然后就能通过8000端口访问这个示例的主题了。