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

相关推荐
一晌小贪欢4 小时前
Python 爬虫进阶:如何利用反射机制破解常见反爬策略
开发语言·爬虫·python·python爬虫·数据爬虫·爬虫python
Java编程爱好者4 小时前
2026版Java面试八股文总结(春招+秋招+社招),建议收藏。
后端
躺平大鹅4 小时前
5个实用Python小脚本,新手也能轻松实现(附完整代码)
python
yukai080084 小时前
【最后203篇系列】039 JWT使用
python
朱昆鹏4 小时前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
REDcker4 小时前
gRPC开发者快速入门
服务器·c++·后端·grpc
figo10tf4 小时前
Spring Boot项目集成Redisson 原始依赖与 Spring Boot Starter 的流程
java·spring boot·后端
zhangyi_viva4 小时前
Spring Boot(七):Swagger 接口文档
java·spring boot·后端
程序员敲代码吗5 小时前
Spring Boot与Tomcat整合的内部机制与优化
spring boot·后端·tomcat
独好紫罗兰5 小时前
对python的再认识-基于数据结构进行-a006-元组-拓展
开发语言·数据结构·python