Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解

發(fā)布時(shí)間：2020-09-30 09:05:38 來源：腳本之家閱讀：129 作者：klvchen 欄目：web開發(fā)

在 views.py 上修改

...
def ordered(req):
  return render(req, "ordered.html")
def shopping_car(req):
  return render(req, "shopping_car.html")

在 urls.py 上修改

...
  path('ordered/', views.ordered),
  path('shopping_car/', views.shopping_car),
...

在 tmplates 文件夾下創(chuàng)建 base.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .page-header{
      height:50px;
      background-color: rebeccapurple;
    }
    .page-body .menu{
      height: 500px;
      background-color: antiquewhite;
      float: left;
      width: 20%;
    }
    .page-body .content{
      height: 500px;
      background-color: cornflowerblue;
      float: left;
      width: 80%
    }
    .page-footer{
      height:50px;
      background-color: green;
      clear: both;
    }
  </style>
</head>
<body>
<div>
  <div class="page-header"></div>
  <div class="page-body">
    <div class="menu">
      <a href="/ordered/" rel="external nofollow" >訂單</a><br>
      <a href="/shopping_car/" rel="external nofollow" >購(gòu)物車</a>
    </div>
    {% block content %}
    {% endblock %}
  </div>
  <div class="page-footer"></div>
</div>
</body>
</html>

ordered.html 文件

{% extends "base.html" %}
{% block content %}
    <div class="content">
      訂單
    </div>
{% endblock %}
shopping_car.html 文件
{% extends "base.html" %}
{% block content %}
    <div class="content">
      購(gòu)物車
    </div>
{% endblock %}

效果如下：

Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解

總結(jié)

以上所述是小編給大家介紹的Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

向AI問一下細(xì)節(jié)

Django模板繼承 extend標(biāo)簽實(shí)例代碼詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽