Django开发企业网站实战之模板套用

最近一直在学习django，顺便做一个企业官网，之前用过python的轻量框架flask，它的模板使用起来非常方便，给我印象深刻，所以在这次django学习开发中，我也特别留意了django的模板使用，这个对于像企业官网之类的项目特别有用，可以复用很多的部分。

一、django模板的系统简介

在Django中我们把模板称为Template，它的存在大大提高了我们html代码的复用率，并且使得HTMl和View视图彻底解耦，它是设计模式中的T层，在项目中，T层是这样实现的，当我们用Django创建了一个项目后，在同级别的目录下面创建一个名为templates的文件夹，然后进行简单的设置，就可以使用template目录中的文件作为T层了，其具体的实现都是由Django来完成。

二、企业官网模板的模板分解

一个企业官网的基本页面我们基本可以分成顶部，正文，底部三个部分。也就是说，我的网站任意一个页面都有这三个部分，所以，我们可以把模板分开，便于复用。

我们把原本的inde.html拆分成三个文件，head.html，foot.html,base.html。

head.html的代码：

<div id="header">
<!--===================== PC顶部信息 =====================-->
<div class="h-top">
  <div class="container cl">
    <div class="h-name fl">
      <p>欢迎来到{{ SiteSet.SiteName }}企业官网</p>
    </div>
    <div class="language fr">
      <p><a href="/viewdoc/?p1=1">关于我们</a>|<a href="/viewdoc/?p1=2">联系我们</a>  </p>
    </div>
  </div>
</div>
<!--===================== End PC顶部信息 =====================-->

<div class="i-center">
  <!--===================== PC头部横幅 =====================-->
  <div class="container">
    <div class="grid-box two">
      <div class="column cl">
        <div class="logo fl"> <a href="/"><img src="/static/image/logo.png" alt="{{ SiteSet.SiteName }}"></a> </div>
        <div class="logo-text fl">
          <h3 class="font-22">专业研发生产聚酰亚胺薄膜</h3>
          <p class="font-18">PI膜解决方案提供商</p>
        </div>
      </div>
      <div class="column cl">
        <div class="i-tel fr">
          <h3 class="font-18">全国咨询热线</h3>
          <p class="font-22">{{SiteSet.mobile}}</p>
        </div>
      </div>
      <div class="logo fr"> <a href="/"><img src="/static/image/wx-1.jpg" alt="" height="70" width="70"></a> </div>
    </div>
  </div>
  <!--===================== End PC头部横幅 =====================-->

  <!--===================== PC导航栏菜单 =====================-->
  <div class="nav">
    <div class="container">
      <div class="menu-box">
        <div class="menu-menu-container">
          <ul id="menu-menu" class="menu">
            <li id="menu-item-1567" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-1567"><a href="/index">首页</a></li>
            {% for a in myLMDH %}
            <li id="menu-item-1567" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1567"><a href="/index">{{a.nName}}</a></li>
            {% endfor %}
            <li id="menu-item-2427" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-2427"><a href="">ppppp</a>
              <ul class="sub-menu">
                <li id="menu-item-2575" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2575"><a href="">AAAAAA</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!--===================== End PC导航栏菜单 =====================-->
</div>
</div>

foot.html的代码：

<div id="footer">
  <div class="footer-top">
    <div class="container">
      <div class="i-link">
        <ul class="cl">
          <li><a href="/">首页</a></li>
          {%for a in myLMDH%}
          <li><a href="">{{a.nName}}</a></li>
          {%endfor%}
        </ul>
      </div>
      <div class="grid-box five">
        <div class="column i-logo"> <a href="/"><img src="/static/image/logo2.png" alt="{{SiteSet.SiteName}}"></a> </div>
        <div class="column i-add">
          <h2>{{SiteSet.SiteName}}</h2>
          <ul>
            <li>地址：{{SiteSet.address}}</li>
            <li>电话：{{SiteSet.tele}}</li>
            <li>传真：{{SiteSet.fax}}</li>
            <li>QQ：{{SiteSet.QQ}}</li>
          </ul>
        </div>
        <div class="column i-product">
          <h2>产品中心</h2>
          <ul>
            <li class="cat-item cat-item-155"><a href="" ><%=rs2("lmmc")%></a> </li>
          </ul>
        </div>
        <div class="column i-news">
          <h2>新闻资讯</h2>
          <ul>
            <li class="cat-item cat-item-155"><a href="<%=myurl(url3,rs2("bh"),rs2("lmid"),"")%>" ><%=rs2("lmmc")%></a> </li>
          </ul>
        </div>
        <div class="column i-qr">
          <p><img src="<%=wxtp%>"></p>

        </div>
      </div>
    </div>
  </div>
  <style>
#footer .footer-bottom p {line-height: 30px;}
</style>
  <div class="footer-bottom">
    <div class="container">
      <p>版权所有：<a href="/">{{ SiteSet.SiteName }}</a>  地址：{{ SiteSet.address }}
      <br>
      备案号：<%=icp%>

      </p>

    </div>
  </div>
</div>

base.html的代码：

<!DOCTYPE html>
<html>
<head>
    {% include 'cssjs.html'%}
    <title>{{ SiteSet.SiteName }}</title>
</head>
    <body>
    {% include 'head.html'%}
    {% block Content %}
    {% endblock %}
    {% include 'foot.html'%}
    </body>
</html>

构建一个主页面index.html代码如下：

{% extends 'base.html'%}
{% block title%}
{% endblock%}
{% block Content%}}
{% endblock%}