Django模板不会加载子模板的内容

时间:2018-04-14 12:44:50

标签: python django django-templates django-views django-settings

我正在使用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&apos;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的默认登录视图渲染的,但它只显示基本模板的内容,子模板的内容为什么不加载?

我已经看过所有相关问题,但找不到任何解决方案。

1 个答案:

答案 0 :(得分:0)

我不认为模板语言会像:

{% block head %}
    {% block title %} {% endblock %}
{% endblock %}

尝试在两个文件中使用以下内容替换它。

{% block title %} {% endblock %}

此外,如果您有{% load staticfile %}

,则不需要{% load static %}