Question

我的home.html运行得很好。我制作了我的子模板，404自定义错误页面继承了home.html文件。但是，当我运行它时，错误页面继承home.html而不渲染404.html上的其余html。我究竟做错了什么？

site.py ：

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

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

# not working 
@app.errorhandler(404)
def page_not_found(e):
    return render_template("404.html"), 404

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

home.html （父级）：

<!Doctype html>
<html>
<head>
<title>Katherine Low's Blog</title>
<style>
.menu {
    text-align: center;
    font-size: 1em;
    margin: 10%;
}
.button {
  display: inline-block;
  width: 20%;  
  height: 20%;
}
#current_page {
    text-decoration: underline;
}
a {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}
</style>
</head>
<body>
<div class="menu">
    <div class="button" id="current_page"><a href="http://localhost:5000/blog/" />BLOG</div>
    <div class ="button"><a href="http://localhost:5000/about/">KATHERINE LOW</a></div>
    <div class="button"><a href="http://localhost:5000/projects/">PROJECTS</a></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="{{
  url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.button').hover(
      function(){
        $('#current_page').css("text-decoration", "none");
      }, function() {
        $('#current_page').css("text-decoration", "underline");
      }
    );

  });
</script>
</body>
</html>

404.html （孩子）：

{% extends "home.html" %}
{% block title %}Page Not Found{% endblock %}
{% block body %}
  <h1>404 Error: Page Not Found</h1>
  <p>What you were looking for is just not there.
  <p><a href="{{ url_for('index') }}">go somewhere nice</a>
{% endblock %}

Answer 1

认为您忘了在{% block %}

中添加home.html标记

<!Doctype html>
<html>
<head>
{% block title %}
<title>Katherine Low's Blog</title>
{% endblock %}
<style>
.menu {
    text-align: center;
    font-size: 1em;
    margin: 10%;
}
.button {
  display: inline-block;
  width: 20%;  
  height: 20%;
}
#current_page {
    text-decoration: underline;
}
a {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}
</style>
</head>
<body>
{% block body %}

<div class="menu">
    <div class="button" id="current_page"><a href="http://localhost:5000/blog/" />BLOG</div>
    <div class ="button"><a href="http://localhost:5000/about/">KATHERINE LOW</a></div>
    <div class="button"><a href="http://localhost:5000/projects/">PROJECTS</a></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="{{
  url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.button').hover(
      function(){
        $('#current_page').css("text-decoration", "none");
      }, function() {
        $('#current_page').css("text-decoration", "underline");
      }
    );

  });
{% endblock %}
</script>
</body>
</html>

python flask：自定义404子模板仅呈现父模板的html文件

1 个答案: