使用 Django 模板从 base.html 继承的导航栏无法正确呈现样式

Question

我正在实现一个导航栏，我想将 django 模板用于 DRY 原则。 第一张图是模板前的样子，第二张是模板后的样子。 ( https://imgur.com/a/FOEqKFB )

如何让 css 文件在继承的 html 文件中正确呈现？ 我认为这是我没有调用 base.html 中的 CSS 文件的情况（就像这个：另一个类似的答案），但我检查了 base.html 的代码，并且我已经为导航栏样式调用了 Bootstrap CDN标题。 我的代码出了什么问题？

这是问题的相关代码：base.html

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <title>{% block title %}Title{% endblock title %}</title>
    {% block head_favicon %}
        <link rel="icon" type="image/x-icon" href="/favicon.ico">
    {% endblock head_favicon %}

    {% block head_meta %}
        {% block head_meta_charset %}
            <meta charset="UTF-8">
        {% endblock head_meta_charset %}
        {% block head_meta_contentlanguage %}
            <meta http-equiv="X-UA-Compatible" content="ie=edge" value="en-US">
        {% endblock head_meta_contentlanguage %}
        {% block head_meta_viewport %}
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
        {% endblock head_meta_viewport %}
    {% endblock head_meta %}

    {% block head_css %}
        {% block head_css_site %}
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        {% endblock head_css_site %}
        {% block head_css_section %}{% endblock head_css_section %}
        {% block head_css_page %}{% endblock head_css_page %}
    {% endblock head_css %}

    {% block head_javascript %}
        {% block head_javascript_site %}
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" async></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" async></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" async></script>
        {% endblock head_javascript_site %}
        {% block head_javascript_section %}{% endblock head_javascript_section %}
        {% block head_javascript_page %}{% endblock head_javascript_page %}
    {% endblock head_javascript %}
</head>

<body>
{% block navbar %}
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">CCC</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/product">Products 1</a></li>
                <li><a href="/resultpage">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
    </nav>
{% endblock navbar %}

{% block content %}
    if you see this, something is wrong!
{% endblock content %}

</body>
</html>

CCC.html

{% extends 'CCC/base.html' %}

{% load static %}

{% block title %}Gift Countdown{% endblock title %}

{% block head_css_page %}
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'homepage/styles/cccStyle.css' %}">
{% endblock head_css_page %}

{% block head_javascript_page %}
    <script type='text/javascript' language='javascript' src="{% static 'homepage/scripts/homepage.js' %}" async></script>
{% endblock head_javascript_page %}

{% block content %}
  <div class='bg'></div>
  <div class="ctr">
    <p>It's</p>
      <div id="demo" onload="countdown();"></div>
    <p>Until Christmas!</p>
  </div>
  <form class = 'ctrform' action="{% url 'homepage' %}" method="POST">
    {%csrf_token%}
    {{Reminder}}
    <button type="submit">Submit</button>
  </form>
{% endblock content %}

Answer 1

Bootstrap 所需的 3 个脚本位于 base.html 的 footer_javascript_site 块中，位于<body>标记之外。 那是无效的 HTML。 您可以简单地将它移动到<body>或者查看HTML 标记中的 <script> 标签应该放在哪里？ 有关如何将其全部放入<head> 。

使用 Django 模板从 base.html 继承的导航栏无法正确呈现样式

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-07 11:37:22

使用 Django 模板从 base.html 继承的导航栏无法正确呈现样式

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-07 11:37:22

解决方案1
1 已采纳 2019-12-07 11:37:22