day05-模板templates

如果使用 django.http.HttpResponse() 来输出 "内容!"。该方式将数据与视图混合在一起,不符合 Django 的 MVC 思想。所以在Django框架中,提供了模板(templates),模板是可以帮助开发者快速生成呈现给用户页面的工具

1.如何使用模板??

在视图views.py里面写入


image.png

新建一个templates文件夹,在里面写html文件


image.png

在settings.py 58行
DIRS 写入'DIRS': [os.path.join(BASE_DIR),'templates'],

image.png

这一步是为了能找到templates文件夹的文件

2.模板语法

解析标签: {% 标签 %}, 标签有for,if,comment,block,extends,end
解析变量: {{ 变量 }}
例如:

image.png

注意有开始标签就要写结束标签

单行注解

注释源码中可见,可运行

<!-- 注解1 -->

注释源码中不可见,不可运行

{# 注解2 #}

多行注释

注释源码中不可见,不可运行

% comment %}

{% endcomment %}

循环

{{ forloop.counter }} ---------循环编号从1自增长
{{ forloop.counter0 }} ---------循环编号从0自增长
{{ forloop.revcounter }} ---------循环编号倒叙
forloop.first ---------循环到第一次的时候是True
forloop.last ---------循环到最后一次的时候是True

3.练习

使用数据库中的学生数据创建一个表格分别有学生编号,学生姓名
学生年龄,学生班级并把第一个对象的姓名变成红色,字体大小设置成10

<table>
        <thead>
        {# th标题加粗 #}
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>


        </thead>
        <tbody>
            {% for stu in students %}
            <tr>
                <td>{{ forloop.first }}</td>
                <td>{{ forloop.last }}</td>
            <td> {{ forloop.counter }}</td>
            <td>{{ stu.id }}</td>
            <td
                {% if forloop.counter == 1%}
                style="color:red;"
                {% endif %}>
                {{ stu.name }}

            </td>
            <td
               {% ifequal forloop.counter 1 %}
               style="font-size:10px;"
               {% endifequal %}>
                {{ stu.age }}
            </td>
            <td>{{ stu.grade.g_name }}</td>

             </tr>
             {%  endfor  %}
        </tbody>

</table>

if/else 标签
例如:
{% if condition1 %}
   ... display 1
{% elif condition2 %}
   ... display 2
{% else %}
   ... display 3
{% endif %}

ifequal/ifnotequal 标签
{% ifequal %} 标签比较两个值,当他们相等时,
显示在 {% ifequal %} 和 {% endifequal %} 之中所有的值
例如:
{% ifequal user currentuser %}
    <h1>Welcome!</h1>
{% endifequal %}

效果图


image.png

4.挖坑

父模板base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
        
    </title>
     {% block css %}
     {% endblock %}
    
</head>
<body>
    {% block content %}
    {% endblock %}

</body>
</html>

填坑

子模板继承父模板就不用重复构建代码,只需要将内容写入填好的坑中就行

{% extends 'base.html' %}


{% block title %}
    内容
{% endblock%}

{% block css %}
    内容
{% endblock %}


{% block content %}
    内容
{% endblock%}


5.如何加载css文件??

新建一个static文件夹在里面再建一个css文件夹,把css文件放在里面


image.png

在settings.py 127行写
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')

]
image.png

在子模板中写

image.png

6.如何加载JS文件??

在父模板写

{
{% block js %}
{% endblock %}
}

在子模板写

{% block js %}
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
{% endblock %}

7.继承的两种情况

(1).父模板写了内容子模板不写 ,就会直接继承

父模板

      {% block title %}
           lml999
        {% endblock %}

(2).父模板写了内容,子模板写了里面却没有内容的话,就会把父模板覆盖,就等于没有继承成功

父模板

      {% block title %}
           lml999
        {% endblock %}

子模板

      {% block title %}
           
        {% endblock %}

如果想和父模板一样要写{{ block.super }}
例如:
{% block xxx %}
{{ block.super }}
{% endblock %}


通过中间继承渲染

可以新建一个base_main.html,继承base.html的代码,把渲染的js放在base_main.html

base.html
base_main.html

然后index.html再继承base_main.html代码

index.html

继承关系
base.html <-----继承----- base_main.html <----继承----index.html

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第二章:视图和URL 2.1第一个Django驱动的页面 页面的内容由视图函数(view function)生成,...
    m风满楼阅读 4,676评论 0 12
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 30,068评论 8 265
  • Django 准备 “虚拟环境为什么需要虚拟环境:到目前位置,我们所有的第三方包安装都是直接通过 pip inst...
    33jubi阅读 5,139评论 0 5
  • 那些无聊的事 那些小小的事 那些奇怪的事 那些每天的事 都因为你,变得有趣。 特别特别有趣
    Spancer_Wu阅读 1,351评论 0 0
  • 有时真的不想一直装贤妻良母,我虽然深知当母亲后所要承担的责任,但我仍然还有拥有自己的空间,哪怕一次也好的朋友聚...
    海星_31e6阅读 1,450评论 0 0

友情链接更多精彩内容