VSCode中Flask模板控制结构与HTML标签无法正常工作

问题情况 #

正在做大学作业的Flask网站，app.py代码如下：

from app import app
from flask import render_template

@app.route('/')
def index():
    return render_template('index.html', title='KRFL Homepage')

@app.route('/TeamCreation')
def TeamCreation(): 
    return render_template('Team_Creation.html', title='KRFL Team Creation' )

尝试使用{% block content %}、{% endblock %}、{% if %}等Flask模板控制结构，或在{% %}内使用HTML标签时完全不生效，基础HTML代码如下：

<html>
  <head>
    <title>KCFL Homepage 
        <link href ="{{ url_for('static', filename = 'css/style.css') }}" rel ="stylesheet">
  </title>
  </head>
    <body> 
    {% block content %}
  <h1> KRFL Homepage </h1>
    {% endblock %}
    </body>
</html> 

排查与修复步骤 #

• 确认模板文件位置
  Flask默认从项目根目录下的templates文件夹读取模板，项目结构必须符合规则：

  your_project/
  ├── app.py
  ├── templates/
  │   ├── index.html
  │   └── Team_Creation.html
  └── static/
      └── css/
          └── style.css
  

  若自定义了模板路径，检查app.config['TEMPLATE_FOLDER']是否配置正确。

• 修复HTML结构错误
  提供的基础HTML存在标签未闭合、元素嵌套错误：<title>标签内嵌套了<link>且未闭合，会导致浏览器解析异常，间接影响模板渲染。修正后的基础模板（建议命名为base.html）：

  <html>
    <head>
      <title>{{ title }}</title>
      <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    </head>
    <body> 
      {% block content %}
        <h1>KRFL Homepage</h1>
      {% endblock %}
    </body>
  </html>
  

• 正确使用模板继承（按需）
  若要让Team_Creation.html继承基础模板结构，必须在子模板开头添加{% extends %}声明，示例：

  {% extends "base.html" %}
  
  {% block content %}
    <h1>KRFL Team Creation</h1>
    <!-- 此处添加团队创建页面的自定义内容 -->
  {% endblock %}
  

  无extends声明时，block标签会被当作普通文本输出，无法生效。

• 开启调试模式自动重载
  运行Flask应用时开启调试模式，修改模板后自动重载，避免缓存导致的不生效问题：

  if __name__ == '__main__':
      app.run(debug=True)
  

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