先上效果图:
很显然,content部分没有正确渲染,应该是被用来渲染navbar的函数(CSS?)渲染了。
注意,这里应该是是首页index.html。
同时,还注意到,404 Not Found页面也有几乎相同的问题。如图:
而它们都继承自base.html页面,因此判断,应该是base.html出了问题。
这里分别附上index.html、404.html、base.html的代码。
index.html
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
</div>
{{ wtf.quick_form(form)}}
{% endblock %}
404.html
{% extends "base.html" %}
{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Not Found</h1>
</div>
{% endblock %}
base.html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr=only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
<div> <!-- 这里出了问题,标签没有闭合,应该为</div> -->
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}
错误的代码,已在base.html中指出。
补充:
1.log(其实log中无任何与此问题有关的错误信息。):
(venv_flask_henry) henry@henry-virtual-machine:~/dev/flask_henry$ python hello.py
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [29/Nov/2017 11:07:35] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Nov/2017 11:07:52] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Nov/2017 11:13:25] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Nov/2017 11:13:50] "GET /fuck HTTP/1.1" 404 -
127.0.0.1 - - [29/Nov/2017 11:22:54] "GET /fuck HTTP/1.1" 404 -
2.项目结构:
henry@henry-virtual-machine:~/dev/flask_henry$ ls
hello.py hello.pyc README.md templates venv_flask_henry
henry@henry-virtual-machine:~/dev/flask_henry/templates$ ls
404.html 500.html base.html index.html
小结:
1.抄代码也要小心点。。
2.还是少用文本编辑器吧,如果用的是IDE,核对可以大大减少这种问题。。
参考文献:
1.全靠自己的逻辑分析。。