python学习笔记15 django（3）网站模板使用

学习比较零散，现在说的是django网站模板的使用。
django据说是（作为初学者感觉实际也是）非常适合从头建站的框架，易搭建，易整合，里面的功能也非常丰富。
但是，作为一个上班族也没时间一点点学习去弄，就想通过改个现成网站来边看边学django。

这里下载了一个网站模板：H-ui.admin.page_3.1.1.2.zip
照猫画虎，现在主流的是bootstrap的网站模板，上面的就是，然后根据网上的教程开始学习，关于bootstrap模板可能你会用到下面的链接：
https://www.runoob.com/bootstrap/bootstrap-tutorial.html

目录

一.问题记录

二.模板还原

三.模板改造

一.遇到的问题记录：

1.第一个大坑，页面中css，js等静态文件的引用，路径问题。
现象：cmd python manage.py runserver 127.0.0.1 进入主页以后诸如以下的错误：
1.Not Found: /base/lib/layer/2.4/layer.js 找不到js
2.Not Found: /base/ 找不到页面
或者在页面中报错模板不存在。
解决方案：
1.首先将网站模板中的静态文件（除页面文件html外）单独放到django的static文件夹中（没有static就自己建一个，和template平级），然后template文件夹里面建一个mysite文件夹，把页面文件都放进来。
2.路径设置。settings.py里设置templates和static的路径

import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),os.path.join(BASE_DIR, 'templates/mysite'),
                os.path.join(BASE_DIR, 'static').replace('\\', '/'),os.getcwd().replace('\\', '/')],

STATIC_ROOT = os.path.join(BASE_DIR, 'static').replace('\\', '/')
STATICFILES_DIRS = (
    ('h-ui', os.path.join(STATIC_ROOT, 'h-ui').replace('\\', '/')),
    ('h-ui.admin', os.path.join(STATIC_ROOT, 'h-ui.admin').replace('\\', '/')),
    ('lib', os.path.join(STATIC_ROOT, 'lib').replace('\\', '/')),
    ('temp', os.path.join(STATIC_ROOT, 'temp').replace('\\', '/')),
    ('image', os.path.join(STATIC_ROOT, 'image').replace('\\', '/')),
    '/static/h-ui.admin/css/','/lib/Hui-iconfont/1.0.8/',
)

urls.py里设置，注意引用

from django.conf import settings
from django.conf.urls.static import static
#from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) 
#staticfiles_urlpatterns() 这个好像不好用

页面里添加

{% load static %}

注意href或者src的路径起始目录都是static或者template
所以路径都要从以上目录往下写，如下：
<link rel="stylesheet" type="text/css" href="{% static 'h-ui/css/H-ui.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'h-ui.admin/css/H-ui.admin.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'lib/Hui-iconfont/1.0.8/iconfont.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'h-ui.admin/skin/default/skin.css' %}" id="skin" />
<link rel="stylesheet" type="text/css" href="{% static 'h-ui.admin/css/style.css' %}" />

<script type="text/javascript" src="{% static 'lib/jquery/1.9.1/jquery.min.js' %}"></script> 
<script type="text/javascript" src="{% static 'lib/layer/2.4/layer.js' %}"></script>
<script type="text/javascript" src="{% static 'h-ui/js/H-ui.js' %}"></script> 
<script type="text/javascript" src="{% static 'h-ui.admin/js/H-ui.admin.page.js' %}"></script> 

二.模板还原

网站初始化完成后，即能打开http://127.0.0.1后，下载bootstrap模板。相关内容参考之前的介绍。

下载模板解压后，首先将网站模板中的静态文件（除页面文件html外）单独放到django的static文件夹中（没有static就自己建一个，和template平级），然后template文件夹里面建一个mysite文件夹，把页面文件都放进来。

然后就可以开始配置了。先配置settings.py添加静态文件路径和模板路径。找到TEMPLATES 里的DIRS增加mysite和增加STATIC_ROOT，STATICFILES_DIRS

import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),os.path.join(BASE_DIR, 'templates/mysite'),
                os.path.join(BASE_DIR, 'static').replace('\\', '/'),os.getcwd().replace('\\', '/')],

STATIC_ROOT = os.path.join(BASE_DIR, 'static').replace('\\', '/')
STATICFILES_DIRS = (
    ('h-ui', os.path.join(STATIC_ROOT, 'h-ui').replace('\\', '/')),
    ('h-ui.admin', os.path.join(STATIC_ROOT, 'h-ui.admin').replace('\\', '/')),
    ('lib', os.path.join(STATIC_ROOT, 'lib').replace('\\', '/')),
    ('temp', os.path.join(STATIC_ROOT, 'temp').replace('\\', '/')),
    ('image', os.path.join(STATIC_ROOT, 'image').replace('\\', '/')),
    '/static/h-ui.admin/css/','/lib/Hui-iconfont/1.0.8/',
)

1.views.py
写一个主页的view

from django.template.loader import get_template
from django.http import HttpResponse
# Create your views here.
def base(request):
    template = get_template('index.html')
    return HttpResponse(template.render(locals()))

2.urls.py
添加url

from django.contrib import admin
from django.urls import path
from testreport import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'base/',views.base,name='base'),

]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) 

3.index.html
添加静态文件引用，并更换href和src

{% load static %}

注意href或者src的路径起始目录都是static或者template
所以路径都要从以上目录往下写，如下：
<link rel="stylesheet" type="text/css" href="{% static 'h-ui/css/H-ui.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'h-ui.admin/css/H-ui.admin.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'lib/Hui-iconfont/1.0.8/iconfont.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'h-ui.admin/skin/default/skin.css' %}" id="skin" />
<link rel="stylesheet" type="text/css" href="{% static 'h-ui.admin/css/style.css' %}" />

<script type="text/javascript" src="{% static 'lib/jquery/1.9.1/jquery.min.js' %}"></script> 
<script type="text/javascript" src="{% static 'lib/layer/2.4/layer.js' %}"></script>
<script type="text/javascript" src="{% static 'h-ui/js/H-ui.js' %}"></script> 
<script type="text/javascript" src="{% static 'h-ui.admin/js/H-ui.admin.page.js' %}"></script> 

4.分离模板
比如base.html, header.html, footer.html等
这里的话如果都是同一个框架，那就｛% extends ‘base.html’ %｝,如果只是用如header.html 就用 ｛% include ‘header.html‘ %｝,当然前面还要｛% load static %｝如base.html如下：

<!DOCTYPE html 用base的时候就开头用｛% extends 'base.html' %｝>
<html lang="en">
    {% load  static %}
<body>
    {% include 'header.html' %}
</body>
</html>