Django模板中{% include %}引入导航栏与页脚失效问题求助

问题核心是你给navbar.html和footer.html写了完整的HTML文档结构（包含<html>、<head>、<body>标签），用{% include %}插入到base.html的<body>内部后，浏览器解析时会因为嵌套的文档结构出现错误，导致导航栏只有<hr>被渲染出来。

修正步骤： #

1. 简化导航栏模板（navbar.html）

删除完整的HTML框架，只保留导航栏的核心内容，同时把静态资源引用改成Django标准的{% static %}标签，URL用{% url %}避免硬编码：

{% load static %}
<nav class="login_nav">
  <p> login </p>
</nav>
<hr class="solid">
<nav>
  <img src="{% static 'images/user_logo.png' %}">
  <ul class="nav_links">
    <li><a href="{% url 'artists' %}"> apple </a></li>
    <li><a href="{% url 'gallery' %}"> banana </a></li>
    <li><a href="{% url 'about' %}"> grape </a></li>
  </ul>
</nav>
<hr class="solid">

2. 简化页脚模板（footer.html）

同样删除完整的HTML框架，只保留页脚内容：

{% load static %}
<nav>
  <p class="a"> Google </p>
  <p class="b"> 1600 Amphitheatre Parkway, Mountain View, CA </p>
</nav>

3. 调整base.html

把导航栏和页脚的CSS文件统一引入到<head>中，同时简化{% include %}的路径（Django会自动在INSTALLED_APPS下的templates目录查找，不需要写完整路径），还可以添加内容区块方便子模板填充：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>home</title>
  <link rel="stylesheet" href="{% static 'css/homestyle.css' %}">
  <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
  <link rel="stylesheet" href="{% static 'css/footer.css' %}">
</head>
<body>
  {% include 'pages/navbar.html' %}
  <!-- 子模板可以在这里填充内容 -->
  {% block content %}{% endblock %}
  {% include 'pages/footer.html' %}
</body>
</html>

额外说明 #

• {% include %}的作用是插入代码片段，不是引入完整页面，所以被引入的模板不能有独立的<html>、<head>、<body>标签。
• 如果需要更灵活的模板复用，建议用{% extends %}做模板继承：base.html定义好导航栏、页脚和内容区块，其他页面继承base.html后只需要填充内容区块即可，这是Django推荐的模板复用方式。

内容的提问来源于stack exchange，提问作者TILTNGO