Django——母版&继承&组件&静态文件

就近似于python当中的类,可以有继承效果,规定好母版后,后续的子文件直接继承即可

就是很多html中,有多个子页面的页首,页眉,菜单栏都是一样的。将这些一样的东西添加到母版中。

母版:

1. 设定一个母版

就是一个普通的html文件。

2. 在母版中定义块

就是将需要修改的区域定义一个块,给子页面进行修改。

可以针对于某一个属性参数进行设置。

{% block content %}

{% endblock %}

继承:

1. 在一个子页面中,继承母版内容

继承的内容:

  • 一定要在页面的第一行写,不能有其他内容
  • 如果母版不写字符串的话,那么就会当成一个变量进行查找。
  • 默认继承CSS和js, 如果需要单独的,就在母版创建block即可
{% extends 'base.html' %}

2. 替换block内容

必须要写在block内,如果写在外面将不会显示

{% block content %}
编写子页面内容
{% endblock %}

组件:

上面的模板是对整个页面的复制,粘贴,但是如果整个页面很大,或者只想用页面的页头。那么全部导入后再逐个修改,就会不合适了。

使用组件将一个网页拆分成多个小页面。那么就可以将用的部分导入子页面,不用就不需要导入。

使用页面:

{% include 'nav.html' %}

inclusion_tag

  • 多用于在页面中会更改的母版中使用。
  • 不像组件那样,导入的是固定值,必须要在后端进行处理才行
  • 像页面翻页一样,是点一下才会获取新页面,而不是直接就获取所有的信息进行分页。

示例:

templatetags/my_inclusion.py
from django import template

register = template.Library()

@register.inclusion_tag('result.html')   #需要写入渲染的名称
def show_results(n):
    n = 1 if n < 1 else int(n)
    data = ["第{}项".format(i) for i in range(1, n+1)]
    return {"data": data}


templates/result.html

<ul>
  {% for choice in data %}
    <li>{{ choice }}</li>
  {% endfor %}
</ul>

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>inclusion_tag test</title>
</head>
<body>

{% load my_inclusion %}

{% show_results 10 %}
</body>
</html>

URL

  • 用于配置网页的反向解析。
  • 将页面的URL配置为动态的路径。
  • 可直接配置模板。
  • 适用于多路径路由配置
<ul class="nav nav-treeview">
    <li class="nav-item">
        <a href="{% url 'network_app:net_index' %}" class="nav-link">
            <p>网络-首页</p>
        </a>
    </li>
</ul>

1. 配置settings中的INSTALLED_APPS

2. 配置APP中urls的app_name.

静态文件:

如果涉及到settings.py中的STATIC_URL更改。那么会导致所有的html文件中的css和js静态导入都要进行更改。

如果想要便捷的处理,就需要设置static静态文件。

{% load static %}
<link rel="stylesheet" href="{% static '/css/index.css' %}">
posted @   新兵蛋Z  阅读(73)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2022-04-13 Python——池
点击右上角即可分享
微信分享提示