为什么在 Flask 中扩展模板会破坏其余代码？答案

【问题标题】：Why is extending a template in Flask breaking the rest of the code?为什么在 Flask 中扩展模板会破坏其余代码？
【发布时间】：2019-02-12 17:58:19
【问题描述】：

我正在学习 Flask，这是我第一个项目的文件结构：

这是我的 app.py：

from flask import Flask, request, render_template
from data import Articles

app = Flask(__name__)

Articles = Articles()

@app.route('/')
def index():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

@app.route('/contact')
def contact():
    return render_template('contact.html')

@app.route('/articles')
def articles():
    return render_template('articles.html', articles = Articles)

@app.route('/article/<string:id>/')
def article(id):
    return render_template('article.html', id=id)

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

这是我的 layout.html：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    {% block head %}
    <meta charset="utf-8">
    <title>Learning Flask - App</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    {% endblock head %}
  </head>
  <body>
    {% include 'components/_navbar.html' %}
    <div class='container'>
    {% block content %}
    {% endblock %}
  </div>
  </body>
</html>

这是我的 home.html，它是唯一正常工作的页面：

{% extends 'layout.html' %}

{% block content %}
<div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
  </div>
{% endblock %}

这是我的contact.html，在导航栏之后没有显示任何内容，其余模板也存在同样的问题：

{% extends 'layout.html' %}

{% block content %}


      <h1>WHY THE HELL DOESNT THIS SHOW UP!!</h1>


{% endblock %}

【问题讨论】：

这听起来很傻，但您可以确保保存所有文件，然后重新启动服务器，看看问题是否仍然存在。
我已经做过很多次了。
只是想知道这是否不是 CSS 问题。如果您将 class="display-3" 添加到此行，它会显示吗
为什么地狱不显示！
您是否通过浏览器内的开发人员工具检查了您的页面 DOM？那里有你要找的代码吗？此外，它可能是 @gittert 所说的 CSS 代码或修改页面的 JS 代码，因此您想要查看的块被隐藏/删除。

标签： python html templates inheritance flask

【解决方案1】：

好吧，更改导航栏 HTML 解决了这个问题。不知道究竟是什么导致了这个问题，但可能是 CSS 冲突的问题。

【讨论】：

为什么地狱不显示！