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里面

相关推荐
Metaphor69225 分钟前
使用 Python 在 Excel 中查找并高亮显示
python·信息可视化·excel
ConardLi41 分钟前
啊?我刚开源的 Skills 已经 7K Star 了?!
前端·人工智能·后端
旦莫1 小时前
AI测试Agent的两种架构路径:谁做主控?
人工智能·python·架构·自动化·ai测试
搬石头的马农1 小时前
从零配置Claude自动修Bug:6步打造全自动开发流程
java·人工智能·python·bug·ai编程
道友可好1 小时前
Git Worktree:一个仓库,多个分身
前端·后端·程序员
暗夜猎手-大魔王1 小时前
转载--Hermes Agent 04 | Agent 主循环:一次对话背后发生了什么
人工智能·python·算法
Wonderful U1 小时前
基于Python+Django的在线题库与智能阅卷系统:从痛点分析到完整实现
开发语言·python·django
码语智行1 小时前
拦截器、接口限流、过滤器、防重发/幂等性功能说明
开发语言·网络·python
鱼鳞_1 小时前
苍穹外卖-Day10(Spring task)
java·后端·spring
我是一颗柠檬1 小时前
【Redis】事务与Lua脚本Day7(2026年)
数据库·redis·后端·lua·database