【发布时间】：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的内容，并且子模板的内容没有加载到浏览器中。
标签： python django django-templates django-views django-settings