Python

3.Django模板语言

2020-07-12  本文已影响0人  免跪姓黄

Django模板语言

  1. 常用语法

    • 变量相关的用{{ }}
    • 逻辑相关的用{% %}

  1. 变量

    • 在Django的模板语言使用变量的方式为：{{ 变量名 }}。
    • 当模版引擎遇到一个变量，它将计算这个变量，然后用结果替换掉它本身。 变量的命名包括任何字母数字以及下划线的组合。 变量名称中不能有空格或标点符号。
    • 点(.)在模板语言中有特殊的含义。当模版系统遇到点(.)，它将以这样的顺序查询：
      • 字典查询（Dictionary lookup）
      • 属性或方法查询（Attribute or method lookup）
      • 数字索引查询（Numeric index lookup）
    • 注意事项：
      • 如果计算结果的值是可调用的，它将被无参数的调用。 调用的结果将成为模版的值。
      • 如果使用的变量不存在， 模版系统将插入 string_if_invalid 选项的值， 它被默认设置为'' (空字符串) 。

  1. Filters（模板过滤器）

    • 在Django的模板语言中，通过使用（过滤器）来改变变量的显示。
    • 过滤器的语法： {{ value|filter_name:参数 }}，使用管道符"|"来应用过滤器，其中value表示变量名称，filter_name表示使用的过滤器。
    • 注意事项：
      • 过滤器支持“链式”操作。即一个过滤器的输出作为另一个过滤器的输入。
      • 过滤器可以接受参数，例如：{{ sss|truncatewords:30 }}，这将显示sss的前30个词。
      • 过滤器参数包含空格的话，必须用引号包裹起来。比如使用逗号和空格去连接一个列表中的元素，如：{{ list|join:', ' }}
      • '|'左右没有空格没有空格没有空格。
    • Django的模板语言中提供了大约六十个内置过滤器。

  1. Tags（模板标签）

    • 模板标签都是放在{% %}括号里的，常见的模板标签有{% load xxx %}, {% block xxx %}, {% if xxx %}, {% url 'xxxx' %}。这些模板标签的本质也是函数，标签名一般即为函数名。这些标签的主要作用包括载入代码渲染模板或对传递过来的参数进行一定的逻辑判断或计算后返回。

  1. 母板

    • Django母版页用于处理html页面相同部分内容，避免在不同的页面中重复出现。

    • 块（block）

      • 通过在母板中使用{% block xxx %}来定义"块"。在子页面中通过xxx定义母板中的block名来对应替换母板中相应的内容。

        {% block page-main %}
  <p>这是在子页面中的块内容，用于替换模板中占位的块</p>
{% endblock %}

    • 组件

      • 可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方按如下语法导入即可。

        {% include 'navbar.html' %}

  1. 母版的创建

    • 在manage.py文件相同目录下的templates文件夹中保存母版页html文件

    • 添加母版页Base.html，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>Title</title>
    {# 母板中定义专用的CSS块，方便子页面进行替换 #}
    {% block page-css %}
  
    {% endblock %}
</head>
<body>

    <h1>这是母板的标题</h1>
    {# 使用 block进行占位，page-mian是给block起的一个名字，子页面中通过这个名字找到要替换内容的位置 #}
    {% block page-main %}

    {% endblock %}
    <h1>母板底部内容</h1>
    
    {# 母板中定义专用的JS块，方便子页面进行替换 #}
    {% block page-js %}

    {% endblock %}
</body>
</html>

      注意：我们通常会在母板中定义专用的CSS块和JS块，方便子页面替换。

    • 由于母版页和子页面不在同一个app下，需要在主模块的settings.py 文件里面进行路径配置,在同一app下则不需要配置，在TEMPLATES 下的DIRS里面配置母版页所在路径。

  1. 母板的继承

  1. 静态文件相关

    为了规避setting.py中STATIC_URL = '/static/'的/static/被修改成其他名称，会造成所有引入静态文件失效的问题，Django的模板语言可以通过如下方式对静态文件加载。

    • 方式一（自动拼接，首选这种方式）：{% static %}

      {% load static %}
<img src="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" />

{# 某个文件多处被用到可以存为一个变量 #}
{% load static %}
{% static "images/photo.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

    • 方式二（手动拼接）：{% get_static_prefix %}

      {% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />

  1. simple_tag

    • 和自定义filter类似，只不过simple_tag可以更灵活的接受参数。

    • 第一步：在app下新建一个templatetags包（Python Package），将自定义simple_tag文件放入其中。

    • 第二步：在templatetags包中创建自定的simple_tag文件，这里创建一个名为my_simple_tag.py的文件。

    • 第三步：编辑my_simple_tag.py（有固定格式）。

      # 从django中导入template（固定写法）
from django import template
# 生成一个注册器（固定写法）
register = template.Library()

# 通过装饰器告诉注册器生成了一个叫做my_simple_tag的simple_tag
@register.simple_tag(name="my_simple_tag")
def my_simple_tag(arg1, arg2, arg3):
    return F"{arg1}+{arg2}+{arg3}"

    • 第四步：在HTML文件中使用自定义的simple_tag。

      {% load my_simple_tag %}
{% my_simple_tag "你好" "我好" "大家好" %}

    • 第五步：重启Django后查看自定义simple_tag是否生效。

  1. inclusion_tag

    • 多用于返回HTML代码片段。

    • 第一步：在app下新建一个templatetags包（Python Package），将自定义inclusion_tag文件放入其中。

    • 第二步：在templatetags包中创建自定的inclusion_tag文件，这里创建一个名为my_inclusion_tag.py的文件。

    • 第三步：编辑my_inclusion_tag.py（有固定格式）。

      # 从django中导入template（固定写法）
from django import template
# 生成一个注册器（固定写法）
register = template.Library()

# 通过装饰器告诉注册器生成了一个叫做my_inclusion_tag.html的inclusion_tag
@register.inclusion_tag('my_inclusion_tag.html')
def my_inclusion_tag(n):
    n = 1 if n < 1 else int(n)
    data = ["第{}项".format(i) for i in range(1, n+1)]
    return {"data": data}

    • 第四步：在Django项目的templates文件夹中，创建一个my_inclusion_tag.html

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

    • 第五步：在HTML文件中，使用inclusion_tag。

      <!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 inclusion_tag_test %}

{% show_results 10 %}
</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读