Python 使用django{%block content%}时不显示导航栏{%extends';base.html';%}
当我使用{%extends'base.html%}时,我的导航栏显示正确,但当我使用{%block content%}Hello World{%endblock content%}时,我的导航栏消失,我只看到文本“Hello World”。我真的不知道该怎么做。这看起来很直截了当,但很明显,直到你真正知道为止Python 使用django{%block content%}时不显示导航栏{%extends';base.html';%},python,html,css,django,Python,Html,Css,Django,当我使用{%extends'base.html%}时,我的导航栏显示正确,但当我使用{%block content%}Hello World{%endblock content%}时,我的导航栏消失,我只看到文本“Hello World”。我真的不知道该怎么做。这看起来很直截了当,但很明显,直到你真正知道为止 {% extends "base.html" %} {% block content %}<h1>Hello World</h1>{% end
{% extends "base.html" %}
{% block content %}<h1>Hello World</h1>{% endblock content %}
{%extends“base.html”%}
{%block content%}你好世界{%endblock content%}
我的“base.html”文件
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% endblock %}
</body>
{%load static%}
{%block head%}
我的头衔在这里
{%endblock%}
{%block content%}
世界真相
接触
关于
返回
付款
交付
贮藏
{%endblock%}
将base.html更改为以下内容。发生的情况是,您正在用模板中的内容覆盖内容块(“Hello world”)。如果您想坚持这样做,在您的子模板中,将{{block.super}
放在{%block content%}
之后,但“正确”的方法是使用下面的方法更改base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% block content %}
{% endblock %}
</body>
{%load static%}
{%block head%}
我的头衔在这里
{%endblock%}
世界真相
接触
关于
返回
付款
交付
贮藏
{%block content%}
{%endblock%}