Flask开发问题：无法正确渲染HTML模板扩展内容

核心问题 #

你的base.html里没定义content块，子模板login.html中写的{% block content %}内容找不到对应的插入位置，所以页面只会渲染base.html的原有内容，不会加载子模板的扩展部分。

修复方法 #

修改base.html，在导航栏结束后、脚本代码之前，添加content块的占位：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      crossorigin="anonymous"
    />

    <title>{% block title %}Home{% endblock %}</title>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbar"
        >
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
          <div class="navbar-nav">
            <a class="nav-item nav-link" id="home" href="/">Home</a>
            <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
            <a class="nav-item nav-link" id="login" href="/login">Login</a>
            <a class="nav-item nav-link" id="signUp" href="/sign-up">Sign Up</a>
          </div>
        </div>
      </nav>

    <!-- 新增content块，子模板内容会插入这里 -->
    {% block content %}{% endblock %}

    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

额外注意事项 #

1. 规范子模板的块语法：login.html里的{%block content %}建议改成{% block content %}（块名前后加空格），虽然Flask兼容无空格写法，但规范写法能避免潜在问题。
2. 检查蓝图URL前缀：如果__init__.py中注册蓝图时设置了url_prefix='/auth'，那实际访问路径应该是/auth/login，而非导航栏里的/login，这时候要修改导航链接或者去掉url_prefix参数，避免路由不匹配。

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