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

2021-06-17 20:34:33 阅读：220 来源： 互联网

标签：menu server HTML endblock path Django block 页面

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

要实现公用，需要用到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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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