AdminLTE用django部署

前言

最近从网上看到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端口访问这个示例的主题了。