Question

我正在实现一个导航栏，我想将Django模板用于DRY原理。第一张图片是模板化之前的外观，第二张图片是模板化之后的外观。（https://imgur.com/a/FOEqKFB）

如何获取CSS文件以在继承的html文件中正确呈现？我以为是我没有在base.html中调用CSS文件的情况（像这样的another similar answer），但是我检查了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>标签的 outside 之外。那是无效的HTML。您只需将其移至<body>内，或查看Where should I put <script> tags in HTML markup?即可获得有关如何将其全部放入<head>的建议。

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

1 个答案: