前言
最近從網上看到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端口訪問這個示例的主題了。