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>邮箱:[email protected] &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里面

相关推荐
mahuifa40 分钟前
(7)python开发经验
python·qt·pyside6·开发经验
学地理的小胖砸2 小时前
【Python 操作 MySQL 数据库】
数据库·python·mysql
安迪小宝2 小时前
6 任务路由与负载均衡
运维·python·celery
Blossom.1182 小时前
使用Python实现简单的人工智能聊天机器人
开发语言·人工智能·python·低代码·数据挖掘·机器人·云计算
lisw052 小时前
Python高级进阶:Vim与Vi使用指南
python·vim·excel
ayiya_Oese2 小时前
[模型部署] 3. 性能优化
人工智能·python·深度学习·神经网络·机器学习·性能优化
SoraLuna2 小时前
「Mac畅玩AIGC与多模态40」开发篇35 - 用 Python 开发服务对接 SearxNG 与本地知识库
python·macos·aigc
noravinsc3 小时前
redis是内存级缓存吗
后端·python·django
王学政23 小时前
LlamaIndex 第九篇 Indexing索引
人工智能·python
百锦再4 小时前
大数据技术的主要方向及其应用详解
大数据·linux·网络·python·django·pygame