Django动态页面

一步一步跟着我理清楚。

一、在所有app之外创建templates,里面放的base.html是模板文件

base.html里面的具体代码如下,最重要的是这个地方content属于之后可动态替换的地方。

而这个load static 加载静态则代表一下全是固定的静态页面。

html 复制代码
{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">

<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>恒达科技|{% block title %}{% endblock%}</title>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.7.1.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

<body>

    <!-- 网页头部 -->
    <div class="container-top">
        <div class="row">
            <div class="col-md-6">
                <a>
                    <img class="img-responsive" src="{% static 'img/logo.jpg' %}">
                </a>
            </div>
            <div class="col-md-3 hidden-xs">
                <a class="phone ant">
                    <span class="glyphicon glyphicon-phone"></span>电话:400 1111 0000 &nbsp;&nbsp;
                </a>
            </div>
            <div class="col-md-3 hidden-xs">
                <a class="mail ant">
                    <span class="glyphicon glyphicon-envelope"></span>邮箱:hengDa@126.com &nbsp;&nbsp;
                </a>
            </div>
        </div>
    </div>

    <div>
        
    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item" id="home">
              <a class="nav-link" href="{% url "home" %}">首页<span class="sr-only">(current)</span></a>
            </li>

            <!-- 公司简介下拉选项 -->
            <li class="nav-item dropdown" id="about">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                公司简介
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="{% url "aboutApp:survey" %}">公司概况</a>
                <a class="dropdown-item" href="{% url "aboutApp:honor" %}">荣誉资质</a>
              </div>
            </li>

            <!--  后面导航内容部分自己完善 -->
            <!-- 科研基地-->
            <li class="nav-item" id="science">
              <a class="nav-link" href="{% url "science" %}">科研基地<span class="sr-only">(current)</span></a>
            </li>


             <!--  产品中心下拉选项 -->
             <li class="nav-item dropdown" id="news">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                  产品中心
                </a>
                <div class="dropdown-menu">
                    <!-- 参数的传递规则: 看productApp下的urls.py-->
                  <a class="dropdown-item" href="{% url 'productApp:products' 'robot' %}">机器人</a>
                  <a class="dropdown-item" href="{% url 'productApp:products' 'monitor' %}">智能监控</a>
                  <a class="dropdown-item" href="{% url 'productApp:products' 'face' %}">人脸识别</a>
                </div>
              </li>

          </ul>
        </div>
      </nav>
    </div>

    <div class="line"></div>

    

    <!-- 主体内容部分 : 设置成动态的内容-->
    {% block content %}
    {% endblock  %}



    <!-- 网页尾部-->
    <div class="web-footer">
        <!--站点地图-->
        <div class="row" id="map-footer">
            <div class="col-md-2">
                <dl>
                    <dt>公司简介</dt>
                    <dd><a href="{% url 'aboutApp:survey' %}">企业概况</a></dd>
                    <dd><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>产品中心</dt>
                    <dd><a href="#">家用机器人</a></dd>
                    <dd><a href="#">智能监控</a></dd>
                    <dd><a href="#">人脸识别解决方案</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="#">资料下载</a></dd>
                    <dd><a href="#">人脸识别开放平台</a></dd>
                </dl>
            </div>
         <div class="col-md-2">
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="#">资料下载</a></dd>
                    <dd><a href="#">人脸识别开放平台</a></dd>
                </dl>
            </div>
            <div class="col-md-2">
                <dl>
                    <dt>人才招聘</dt>
                    <dd><a href="#">欢迎咨询</a></dd>
                    <dd><a href="#">加入恒达</a></dd>
                </dl>
            </div>
            <div class="col-md-2" id="wx">
                <p>扫描二维码,关注我们</p>
                <img class="qrimg" src="{% static 'img/qr.png' %}" alt="wx">
                <p>客服热线:<b style="font-size:20px">400 111 2222</b></p>
            </div>
        </div>
        <!--版权-->
        <div class="row" id="patent-footer">
            <p>@ 2019 Python Web 企业门户 版权所有 | 苏 ICP 备 19006378 号</p>
        </div>
    </div>
  


    <script type="text/JavaScript">
        $('#{{active_menu}}').addClass('active')
    </script>
  

</body>

</html>

二、在setting加入模板文件路径

三、最后只需要在app里写上动态更改的内容就可以了

比如:在productapp这个app里。

引入外部模板html,然后加载静态页面。然后把要动态加载的页面封装到content里面

相关推荐
林的快手1 分钟前
209.长度最小的子数组
java·数据结构·数据库·python·算法·leetcode
从以前15 分钟前
准备考试:解决大学入学考试问题
数据结构·python·算法
Ven%32 分钟前
如何修改pip全局缓存位置和全局安装包存放路径
人工智能·python·深度学习·缓存·自然语言处理·pip
枫欢33 分钟前
将现有环境192.168.1.100中的svn迁移至新服务器192.168.1.4;
服务器·python·svn
测试杂货铺1 小时前
UI自动化测试实战实例
自动化测试·软件测试·python·selenium·测试工具·测试用例·pytest
余~~185381628001 小时前
NFC 碰一碰发视频源码搭建技术详解,支持OEM
开发语言·人工智能·python·音视频
苏三有春2 小时前
PyQt实战——使用python提取JSON数据(十)
python·json·pyqt
allnlei2 小时前
自定义 Celery的logging模块
python·celery
帅逼码农2 小时前
python爬虫代码
开发语言·爬虫·python·安全架构
跟德姆(dom)一起学AI2 小时前
0基础跟德姆(dom)一起学AI 自然语言处理05-文本特征处理
人工智能·python·深度学习·自然语言处理