html静态模板继承,Templates & Static 模板和静态文件夹

模板(template)

1.  创建模板包并配置路径:

1.1 创建模板配置

settings.py中

TEMPLATES 变量中DIRS 指定templates的目录地址

'DIRS' : [os.path.join(BASE_DIR, 'templates')] -- 路径

os.path.dirname(文件的绝对路径) -->返回该路径的上一层

创建templates文件夹,和应用app / 工程项目是同一级

使用, 在views方法中返回页面

data = { 'stus' : stus }

render(request, '页面', data)  -- 传值必须是字典形式

image.png

1.2 模板继承(挖坑 / 填坑)

a. 基础模板(挖坑)：base.htmlhtml>

{% block title %}

{% endblock %}    

{% block extCss%}

{% endblock %}

{% block content %}

{% endblock %}

b. 中间模板 ·base_main.html·

继承基础模板，填写多个模板共有的代码块

c. 继承模板(填坑)'index.html'

**继承模块时注意路径 **:如 base_main.html在template文件夹里web文件下,则继承时写{% extends 'web/base_main.html' %}{% extends 'base_main.html' %}

{% block title %}

我是首页

{% endblock %}

{% block content %}

{{block.super}} --> 继承既有功能 / 方法

{% endblock %}

2. 创建static文件夹存放css / js / emages :

2.1 静态(STATIC) css / js / images

settings.py 中STATIC_URL = '/static/', 后面添加

STATICFILES_DIRS = { os.path.join(BASE_DIR, 'static') }

2.2 应用css / js / images

第一中 : (路径已写死,不好)

第二种 : (推荐)

{% load static %}

image.png

配置路径

image.png

2.  创建userapp (配置路径 & 定义调用函数)

image.png

3. 导入数据

user/views.py

return render(request, 'index.html', {'stus':stus})

templates/index.html

{{stus}}

4. 在index.html中操作数据,写python代码html>

首页    

{# 导入文件的标准写法 #}

{% load static %}    

I am the first page!

{#两个大括号,解析QuerySet#}

{{stus}}
{# 这是单行注解 #}

{% comment %}

这是多行注解

{% endcommet %}

{#编写python代码#}

{% for stu in stus %}    

编号: {{forloop.counter0}}

ID: {{stu.id}}    

{%if forloop.revcounter == 1 %}          学生: {{stu.s_name}}

{% else %}        

姓名: {{stu.s_name|upper}}

{% endif %}

{% ifequal forloop.revcounter 2 %}        年龄: {{stu.s_age}}

{% endifequal %}

年龄: {{stu.s_age}}    

语文: {{stu.yuwen|add:10}}

数学: {{stu.shuxue|add:-10}}    

班级: {{stu.g.g_name}}

{% for course in stu.course_set.all%}

课程: {{course.c_name}}

{% endfor %}

创建时间: {{stu.create_time|date:'Y-m-d h:m:s'}}

{% if stu.s_sex %}

性别: 男

{% else %}

性别: 女

{% endif %}{% endfor %}for循环 / if 分之语句

模板标签 : {%%} - 模板标签是一小段代码，生成要在网页中显示的信息。

模板变量 : {{ variable }} - 这些花括号不会出现在网页中，它们只是用于告诉Django我们使用了一个模板变量,并将变量variable的值显示在网页上{% for stu in stus  %}

{% endfor %}

{% ifequal  stu.id  1%}

{% endifequal %}

{% if stu.id == 1 %}

{% endif %}

forloop.counter - 当前循环次数{% if forloop.counter == 3 %}

alert('this is third forloop!')

{% endif %}

forloop,counter0

forloop.revcounter

forloop.revcounter0

forloop.first - 如果该循环是第一次,结果为True

forloop.last - 如果该循环是最后一次,结果为True

获取列表的某个元素 :  stus.0 stus.3.name过滤器

{% for stu in stus%}

{{ stu.s_name | lower / upper }}

{{ stu.s_age | add:10 / -10 }}

{{ stu.create_time |date: 'Y-m-d h:m:s' }}

{% endfor %}

{%  widthratio 5 1 100 %}

上面的代码表示：5/1 100，返回500，widthratio需要三个参数，它会使用 参数1/参数2参数3，所以要进行乘法的话，就将参数2=1即可

作者：十二右

链接：https://www.jianshu.com/p/7890d0fbdb70