Question

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

file structure

这是我的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 %}

home.html

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

{% extends 'layout.html' %}

{% block content %}


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


{% endblock %}

contact.html

Answer 1

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

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

1 个答案: