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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值