尝试扩展基本 html 但无法正常工作
Posted
技术标签:
【中文标题】尝试扩展基本 html 但无法正常工作【英文标题】：Trying to extend a base html but not working properly 【发布时间】：2020-10-15 06:17:09 【问题描述】：按下导航栏上的按钮时，我尝试访问一个表单。我有一个基本模板文件，其中包含导航栏和背景颜色的代码，我还有另一个包含表单代码的模板。每次我删除 % extends 'base.html' % 时，导航栏按钮似乎都可以工作，但只显示表单。我希望能够扩展基本模板，以便导航栏背景颜色和导航栏也显示出来，但这不起作用。
base.html 中的代码 sn-p
<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 的 sn-p
path('', views.noreq), #shows the html template for the website
path('search/',views.search),
path('searchoutput/',views.searchoutput),
来自views.py的sn-p
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')
【问题讨论】：
【参考方案1】：这里有几个问题。一方面，我注意到您在 search.html 中的 % extends 'base.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/
【讨论】：
【参考方案2】：好吧，你的想法是对的，但实施起来有点错误，让我解释一下。
base.html
在您的基础 html 中，您想要放置每个页面通常共享的所有内容：% load static %, <!DOCTYPE html>, <html>, <head>, <body>, <footer>, etc 看看下面您的基础 html 会是什么样子。
% load static %
% load employee_filters %
<!DOCTYPE html>
<html lang="en">
<header>
Site Header
</header>
<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>
% block content %% endblock % 是关键。那是代码将放置在另一个文件扩展的地方。因此，在您的 search.html 中，您将拥有以下内容：
% extends 'base.html' %
% block content %
<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>
% endblock %
这样想，您是说search.html 是从base.html 扩展而来，然后您将用新文件中的任何内容替换% block content %。
【讨论】：
以上是关于尝试扩展基本 html 但无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章