其他分享
首页 > 其他分享> > Django里HTML页面共用导航栏和底部申明栏

Django里HTML页面共用导航栏和底部申明栏

作者：互联网

页面如下，顶部和底部是公用的
在这里插入图片描述

要实现公用，需要用到Django里的block
贴一下这个页面的源代码：


<html >
<head>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    {% block title%}<title>列表页</title>{% endblock %}
</head>
<body>
     <!-- 导航栏 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/event_manage/">CCTESTER MockServer</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active" id="menu_server"><a href="{% url "mock:server" %}">SERVER</a></li>
            <li id="menu_router"><a href="/router_list/">Router</a></li>
             <li id="menu_response"><a href="/response_list/">Response</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              {%  if request.user.is_authenticated %}
                   <li><a href="#">{{request.user.username }}</a></li>
                  <li><a href="/logout/">退出</a></li>
              {% endif %}

         </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>





{% block content %}
    <div class="container theme-showcase" role="main">

      <!--查询-->
      <div class="page-header" style="margin-top: 80px;">
        <div id="navbar" class="navbar-collapse collapse" style="float:left;">
          <form class="navbar-form" method="get" action="/server_list/">
            <div class="form-group">
              <input name="server_name" type="text" placeholder="name" class="form-control" >
            </div>
            <button type="submit" class="btn btn-success" >搜索</button>
          </form>
        </div><!--/.navbar-collapse -->
        <div style="float:right;">
          <button type="submit" class="btn btn-primary" onclick="window.location.href='{% url 'add_server' %}'" style="margin-top: 8px;">添加</button>
        </div>
      </div>

      <!--表单-->
      <div class="row" >
        <div class="col-md-6" style="width: 900px;">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>id</th>
                <th>name</th>
                <th>path</th>

              
              </tr>
            </thead>
            <tbody>
                {% for server in all_server %}
                    <tr>
                      <td>{{ server.id }}</td>
                      <td>{{ server.name }}</td>
                      <td>{{ server.path }}</td>
                      <td><a href="/server_id/2" >编辑</a></td>
                      <td><a href="/del_api/2">删除</a></td>
                </tr>
                {% endfor %}
            </tbody>
          </table>
        </div>

      </div>
</div>



{% endblock %}


    <div class="container theme-showcase" role="main">
      <div class="page-header">
      </div>
      <footer class="footer">
        <p>&copy; Company 2020, Author:鲲鹏 CCTESTER</p>
      </footer>
    </div> <!-- /container -->

    
     <script>
            window.onload = function () {
                 var menu_server = document.getElementById("menu_server")
                 var menu_router = document.getElementById("menu_router")
                 var menu_response = document.getElementById("menu_response")
                menu_server.className='active'
                menu_router.className=''
                menu_response.className=''
            }
    </script>

</body>
</html>

切换页面，需要替换中间的一段内容，所以在这段代码前后加上{% block content %}和{% endblock %}
然后再看一下替换这个页面中间一部分内容的代码：
在这里插入图片描述

{% extends "mock/base.html" %}
{% block title%}<title>新增 Server</title>{% endblock %}
{% block content %}
    <!--添加表单-->
      <div class="row" style="margin-top: 80px;">
        <div class="page-header">
            <h3 style="margin-left: 150px;"> 添加API_SERVER </h3>
        </div>
        <div class="col-md-6" style="width: 800px;">
          <form class="form-horizontal" role="form" action="" method="post" style="margin-left: 30px;">
                  <div class="form-group">
                      <label for="firstname" class="col-sm-2 control-label">name:</label>
                      <div class="col-sm-10">
                         <input name="name" type="text" >
                      </div>
                  </div>

                <div class="form-group">
                      <label for="lastname" class="col-sm-2 control-label">path:</label>
                      <div class="col-sm-10">
                         <input name="path" type="text" >
                      </div>
                </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
              </div>
            </div>
          </form>
        </div>
      </div>>
{% endblock %}

效果
在这里插入图片描述

标签：menu,server,HTML,endblock,path,Django,block,页面
来源： https://blog.csdn.net/qq_38175040/article/details/117992795