Day61 Django框架--模板语言2

最新推荐文章于 2022-09-27 19:56:53 发布

转载最新推荐文章于 2022-09-27 19:56:53 发布 · 116 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lianyeah/p/9897224.html

本文详细介绍了在网页开发中如何使用母板进行页面布局的重复利用，以及如何通过组件来增强页面的模块化和可维护性。同时，还讲解了如何动态拼接静态文件路径，自定义simpletag和inclusion_tag的使用方法，为开发者提供了实用的前端开发技巧。

一，母板

　　1.什么情况下使用母板?

　　　　当多个页面的大部分内容都一样的时候，我们可以把相同的部分提取出来，放到一个单独的母板文件中

　　2.使用母板

　　　　0.通常用法：

<!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>
  {% block page-css %}
       
  {% endblock %}
</head>
<body>

<h1>这是母板的标题</h1>

{% block page-main %}

{% endblock %}
<h1>母板底部内容</h1>
{% block page-js %}

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

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

　　　　1.继承母板

　　　　　　在子页面中在页面最上方使用下面的语法来继承母版

{% extends '母板.html' %}

　　　　2.定义块(block)

　　　　　　通过在母板中使用{% block xxx %}来定义"块"

　　　　　　在子页面中通过定义母板中的block名来对应替换母板中相应的内容

{% block page-main %}
  <p>世情薄</p>
  <p>人情恶</p>
  <p>雨送黄昏花易落</p>
{% endblock %}

二，组件

　　1.什么时候用组件？

　　　　页面上相对独立的某个部分可以单独拿出来放到一个单独的html文件中

　　2.如何使用

　　　　在需要导入组件的地方加一句

{% include '组件.html' %}

三，静态文件相关

　　1.为什么要使用动态拼接的路径？

　　　　把静态文件的路径改成动态拼接的，避免在HTML页面中硬编码静态的导入路径（就是不要写死了）

　　2.使用方法　　　

{# 引用JS文件时使用 #}
{% load static %}
<script src="{% static "mytest.js" %}"></script>

{# 引用图片时 #}
{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

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

　　3.使用get_static_prefix

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


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

四，自定义simpletag

　　自定义tag比自定义filter功能更强大一点，可以接收更灵活的参数

　　1.定义注册simple tag

@register.simple_tag(name="plus")
def plus(a, b, c):
    return "{} + {} + {}".format(a, b, c)

　　2.使用自定义simple tag

{% load app01_demo %}

{# 调用plus并传参 #}
{% plus "1" "2" "abc" %}

五，inclusion_tag:多用于返回html代码片段

　　例子：

　　　　1.用于替换的HTML代码片段

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
      {% for i in data %}
        <li><a href="#">{{ i }}</a></li>
      {% endfor %}
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

　　　　　2.HTML中调用自定义的tag --page

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}">
</head>
<body>
<h1>自定义的simple_tag示例</h1>
{% load my_extends %}   {# 导入my_extends.py #}
{% page 5 %}
{% page 10 %}
{% page 100 %}
</body>
</html>

　　　　2.templatetags\my_extends.py中的tag函数

from django import template
register = template.Library()

@register.inclusion_tag(filename='xx.html', name='page')
def my_page(num):
    data = [i for i in range(1, num+1)]
    return {'data': data}

　　　　　2.views.py

def t(request):
    return render(request, 't.html')

转载于:https://www.cnblogs.com/lianyeah/p/9897224.html