Django 模板不加载子模板的内容
Posted
技术标签:
【中文标题】Django 模板不加载子模板的内容【英文标题】：Django templates doesn't load the content of child templates 【发布时间】：2018-09-24 16:11:26 【问题描述】：我正在使用 Django(1.11) 开发一个项目，在该项目中我创建了一个 base.html 模板，我在该模板中定义了我的项目的所有通用 HTML 代码，例如所需的 CSS 和 js 文件。
但是当我在我的子模板中扩展这个模板时，它只加载基本模板而不是子模板的内容。
这是我尝试过的：
base.html：
% load static %
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Favicons -->
<link rel="apple-touch-icon" href="% static 'images/kit/free/apple-icon.png' %"/>
<link rel="apple-touch-icon" href="% static 'images/kit/free/favicon.png' %"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
<link rel="stylesheet" href="% static 'css/material-kit.css' %">
% block title %
<title> Docrest Web Gui </title>
% endblock %
</head>
<body class="signup-page">
<nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#">Docrest Gui </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="material-icons">apps</i> Components
</a>
<div class="dropdown-menu dropdown-with-icons">
<a href="#" class="dropdown-item">
<i class="material-icons">layers</i> All Components
</a>
<a href="http://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item">
<i class="material-icons">content_paste</i> Documentation
</a>
</div>
</li>
% if not user.is_authenticated %
<li class="nav-item">
<a class="nav-link" href="% url 'users:login' %">
<i class="material-icons">exit_to_app</i> Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="% url 'users:signup' %" target="_blank" data-original-title="Register to Deploy code!">
<i class="material-icons">settings_input_hdmi</i> Signup
</a>
</li>
% endif %
% if user.is_authenticated %
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="% url 'users:signup' %" target="_blank" data-original-title="Register to Deploy code!">
<i class="material-icons">settings_input_hdmi</i> Dashboard
</a>
</li>
% endif %
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" data-original-title="Like us on Facebook">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" data-original-title="Follow us on Instagram">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header header-filter" data-parallax="true" style=" background-image: url('../assets/img/kit/profile_city.jpg'); ">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="title">Your Story Starts With Us.</h1>
<h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
<br>
</div>
</div>
</div>
</div>
% block content %
% endblock %
% block js %
<!-- Core JS Files -->
<script src="% static 'js/core/jquery.min.js' %"></script>
<script src="% static 'js/core/popper.min.js' %"></script>
<script src="% static 'js/bootstrap-material-design.min.js' %"></script>
<!-- Plugin for Date Time Picker and Full Calendar Plugin -->
<script src="% static 'js/plugins/moment.min.js' %"></script>
<!-- Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
<script src="% static 'js/plugins/bootstrap-datetimepicker.min.js' %"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="% static 'js/plugins/nouislider.min.js' %"></script>
<!-- Material Kit Core initialisations of plugins and Bootstrap Material Design Library -->
<script src="% static 'js/material-kit.js' %"></script>
% endblock %
</body>
这是一个示例子模板signup.html：
% extends 'base.html' %
% block title %
<title> Signup </title>
% endblock %
% block content %
<div class="container">
<div class="row">
<div class="col-md-10 ml-auto mr-auto">
<div class="card card-signup">
<h2 class="card-title text-center">Register</h2>
<div class="card-body">
<div class="row">
<div class="col-md-5 ml-auto">
<div class="info info-horizontal">
<div class="icon icon-rose">
<i class="material-icons">timeline</i>
</div>
<div class="description">
<h4 class="info-title">Marketing</h4>
<p class="description">
We've created the marketing campaign of the website. It was a very
interesting collaboration.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-primary">
<i class="material-icons">code</i>
</div>
<div class="description">
<h4 class="info-title">Fully Coded in HTML5</h4>
<p class="description">
We've developed the website with HTML5 and CSS3. The client has access to
the code using GitHub.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-info">
<i class="material-icons">group</i>
</div>
<div class="description">
<h4 class="info-title">Built Audience</h4>
<p class="description">
There is also a Fully Customizable CMS Admin Dashboard for this product.
</p>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="social text-center">
<button class="btn btn-just-icon btn-round btn-twitter">
<i class="fa fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-round btn-dribbble">
<i class="fa fa-dribbble"></i>
</button>
<button class="btn btn-just-icon btn-round btn-facebook">
<i class="fa fa-facebook"> </i>
</button>
<h4> or be classical </h4>
</div>
<form class="form" method="" action="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">face</i>
</span>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">mail</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">lock_outline</i>
</span>
</div>
<input type="password" placeholder="Password..." class="form-control"/>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
I agree to the
<a href="#something">terms and conditions</a>.
</label>
</div>
<div class="text-center">
<a href="#pablo" class="btn btn-primary btn-round">Get Started</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
% endblock %
这里是模板的设置：
TEMPLATES = [
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS':
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
,
,
]
此模板的呈现方式如下：
class SignUpView(generic.CreateView):
form_class = forms.SignUpForm
template_name = 'users/signup.html'
success_url = reverse_lazy('users:login')
form_valid_message = 'User has been created successfully!'
form_invalid_message = 'Something wrong'
子模板是从 Django auth 的默认登录视图渲染的，但它只显示基本模板的内容，为什么不加载子模板的内容？
我已经查看了所有相关问题，但找不到任何解决方案。
【问题讨论】：
我已经添加了查看代码！ 你需要做% extends "base.html" %不包括。 Include 会将基本标记放在页面顶部，然后将其余部分放在页面下方。
% extends "base.html" % 也不起作用！
@AbdulRehman 好的，这是朝着正确方向和正确使用模板扩展迈出的一步。所以现在实际渲染到页面的内容因为“它只加载基本模板而不是子模板的内容”将不会是真的，现在你正在正确扩展 base.html 块。
嗨@markwalker_，它仍然只加载base.html的内容，并且子模板的内容没有加载到浏览器中。
【参考方案1】：
我不认为模板语言会喜欢：
% block head %
% block title % % endblock %
% endblock %
尝试在两个文件中将其替换为以下内容。
% block title % % endblock %
另外，如果你有% load static %，你不应该需要% load staticfile %
【讨论】：
嗨@HenryM，它仍然没有加载子模板的内容，因为我只在signup.html 模板中添加了title 标记为Signup，但它仍然显示基本模板的标题.
实际上，我忘记在此处更新base.html 代码，但是当我加载此模板时，它应该显示signup.html 的标题。我说的对吗？以上是关于Django 模板不加载子模板的内容的主要内容，如果未能解决你的问题，请参考以下文章