学习比较零散,现在说的是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>