模板標簽及模板的繼承與引用
阿新 • • 發佈：2019-03-24
ogg sheet lap tcs info icon ets nts -h
1.常用的模板標簽
- 作用是什麽:提供各種邏輯
view.py:
def index(request):
#模板標簽
--常用標簽
總結：語法
{% tag %} {% endtag %}
{% tag 參數 參數 %}
示例
展示頁index.html，包含for標簽，if標簽，url標簽
{% extends ‘teacher/base.html‘ %} {% load static %} {% load customer_filter %} {% load customer_tags %} {% block title %}首頁{% endblock %} {% block link %}<link href="{% static ‘teacher/css/starter-template.css‘ %}" rel="stylesheet"> {% endblock %} {% block content %} <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> {# <h1>當前時間：{% current %}</h1>#} <div class="starter-template"> <table class="table"> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> {% for stu in student %} <tr {% if stu.sex == 0 %}style="color: red" {% endif %}> #女性顯示為紅色 <td><a href="{% url ‘teacher:detail‘ stu.id %}">{{ forloop.counter }}</a></td> {# 硬編碼#} {# # forloop 計數器，獲取當前的叠代次數#} <td>{{ stu.name }}</td> <td>{{ stu.age }}</td> <td>{{ stu.sex|male:‘en‘ }}</td> {# <td>{% show_list_as_ul stu.course ‘button‘ %}</td>#} </tr> {% endfor %} </tr> </table> </div> </div><!-- /.container --> <div style=‘position: fixed;bottom: 0px;‘> {% include ‘teacher/ad.html‘ %} </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write(‘<script src="../../assets/js/vendor/jquery.min.js"><\/script>‘)</script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> {% endblock %}
views.py代碼如下：
def index(request): students = [ {‘id‘:10,‘name‘:‘tuple‘,‘age‘:18,‘sex‘:1}, {‘id‘:20,‘name‘:‘xinlan‘,‘age‘:15,‘sex‘:0}, {‘id‘:30,‘name‘:‘xiaopo‘,‘age‘:21,‘sex‘:0}, {‘id‘:40,‘name‘:‘gulu‘,‘age‘:19,‘sex‘:1}, {‘id‘:50,‘name‘:‘shiwei‘,‘age‘:20,‘sex‘:0}, ] format_str = ‘%Y-%m-%d %H:%M:%S‘ return render(request,‘teacher/index.html‘,context={ ‘student‘:students, ‘format_str‘:format_str })
頁面效果如下：
2.模板的繼承與引用
-引用 include 標簽 廣告插入，在index.html中使用include標簽引用廣告頁。
<div style=‘position: fixed;bottom: 0px;‘> {% include ‘teacher/ad.html‘ %} </div>
繼承 extends 標簽
block
模板標簽及模板的繼承與引用