首页 > 解决方案 > 尝试扩展基本 html 但无法正常工作

问题描述

当按下导航栏上的按钮时,我有一个表单试图访问。我有一个基本模板文件,其中包含导航栏和背景颜色的代码,我还有另一个包含表单代码的模板。每次我删除导航栏按钮似乎都可以工作,{% extends 'base.html' %}但只显示表单。我希望能够扩展基本模板,以便导航栏背景颜色和导航栏也显示出来,但这不起作用。

来自 base.html 的代码片段

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/">TweetyBird</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Twitter Bot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">To be added</a>
        </li>
      </ul>
    </div>

  </nav>

搜索.html

% extends 'base.html' %}
{%load static%}

  <body>

    
      <container >  
        <form action="/searchoutput/" method="post">
          {% csrf_token %}
          Input Text:
          <input type="text" name="param" required> <br><br>
          {{data_external}}<br><br>
          {{data}}
          <br><br>
          <input type="submit" value="Check tweet">

          </form>
      </container>


  </body>

来自 url.py 的片段

    path('', views.noreq), #shows the html template for the website 
    path('search/',views.search),
    path('searchoutput/',views.searchoutput),
    

来自views.py的片段

def noreq(request):
  #when no request is made the html is rendered 
  return render(request,'base.html')
################The method above is required############################################


def search(request):
  return render(request,'search.html')




      

标签: pythonhtmlcssdjangobootstrap-4

解决方案


这里有几个问题。一方面,我注意到您% extends 'base.html' %}在 search.html 中没有左括号,但我不确定这是否只是此处的粘贴错误。

其次,您没有内容块。您需要指定扩展模板的内容在 base.html 中的位置。例如:

示例 base.html:

   <html>
    <head>
    <title>My Site</title>
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/">TweetyBird</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Twitter Bot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">To be added</a>
        </li>
      </ul>
    </div>
  </nav>
    {% block content %}
    
    {% endblock %}
    </body>
    </html>

在扩展 base.html 的模板中:

{% extends 'base.html' %}
{%load static%}

{% block content %}
<container >  
        <form action="/searchoutput/" method="post">
          {% csrf_token %}
          Input Text:
          <input type="text" name="param" required> <br><br>
          {{data_external}}<br><br>
          {{data}}
          <br><br>
          <input type="submit" value="Check tweet">

          </form>
      </container>
{% endblock %}

更多文档:https ://docs.djangoproject.com/en/3.0/ref/templates/language/


推荐阅读