对于肯定存在的css文件，给出404
我正在构建一个基于flask的网站，但我似乎不知道如何指向css文件（而不是将它们嵌入html文件） 这项安排如预期般有效： 目录结构如下：对于肯定存在的css文件，给出404,css,flask,path,Css,Flask,Path,我正在构建一个基于flask的网站，但我似乎不知道如何指向css文件（而不是将它们嵌入html文件） 这项安排如预期般有效： 目录结构如下： . ├── controller.py └── templates ├── private │ └── bio.html ├── public │ └── index.html └── structure.html <!DOCTYPE html> <html lang="en"> &
.
├── controller.py
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
/* IMPORTED FONTS GET EMBEDDED HERE, SELECT IMPORT OPTION FROM FONT PAGE
site : https://fonts.google.com/?selection.family=Montserrat|Oswald
add font-family CSS info below, add to style for page element
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Oswald&display=swap');
*
{
margin: 0px;
padding: 0px;
}
body{
font-family: '',serif;
background-color: grey;
}
.title {
font-family: 'Oswald', sans-serif;
font-size: 50px;
margin-left: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
/* TITLE STYLES */
#titlediv {
background-color:cornflowerblue;
width: 100%;
height: 100px;
padding-top: 20px;
}
h3{color: black;
text-shadow: #e0e0e0 1px 1px 0;
}
nav {
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
z-index: 2;
}
/* BODY STYLES */
#bodydiv {
background-color:grey;
width: 100%;
height: auto;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
height: 2000px;
z-index: 1;
/* BODT GRADIENT GOES HERE : https://www.colorzilla.com/gradient-editor/ */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /*
*/
}
input, td {
padding: 5px;
}
</style>
<head>
<!-- This is NOT displayed in the browser's VIEWPORT -->
<meta charset="utf-8">
{% if METADATA["page_title"] %}
<title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
{% else %}
<title>{{ METADATA["website_title"] }}</title>
{% endif %}
</head>
<body>
<div id="titlediv">
<h3 class="title">My website</h3>
</div>
<!-- This is displayed in the browser's viewport -->
{% block viewport %}
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/gallery"> Gallery</a>
</li>
</ul>
</nav>
<div id="bodydiv">
{% block main_section %}
<!-- Everything not in the navigation, right now -->
<p>this is from `main_section`</p>
{% endblock %}
{% endblock %}
</div>
</body>
</html>
.
├── controller.py
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
/* IMPORTED FONTS GET EMBEDDED HERE, SELECT IMPORT OPTION FROM FONT PAGE
site : https://fonts.google.com/?selection.family=Montserrat|Oswald
add font-family CSS info below, add to style for page element
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Oswald&display=swap');
*
{
margin: 0px;
padding: 0px;
}
body{
font-family: '',serif;
background-color: grey;
}
.title {
font-family: 'Oswald', sans-serif;
font-size: 50px;
margin-left: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #111;
}
/* TITLE STYLES */
#titlediv {
background-color:cornflowerblue;
width: 100%;
height: 100px;
padding-top: 20px;
}
h3{color: black;
text-shadow: #e0e0e0 1px 1px 0;
}
nav {
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
z-index: 2;
}
/* BODY STYLES */
#bodydiv {
background-color:grey;
width: 100%;
height: auto;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
height: 2000px;
z-index: 1;
/* BODT GRADIENT GOES HERE : https://www.colorzilla.com/gradient-editor/ */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /*
*/
}
input, td {
padding: 5px;
}
</style>
<head>
<!-- This is NOT displayed in the browser's VIEWPORT -->
<meta charset="utf-8">
{% if METADATA["page_title"] %}
<title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
{% else %}
<title>{{ METADATA["website_title"] }}</title>
{% endif %}
</head>
<body>
<div id="titlediv">
<h3 class="title">My website</h3>
</div>
<!-- This is displayed in the browser's viewport -->
{% block viewport %}
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/gallery"> Gallery</a>
</li>
</ul>
</nav>
<div id="bodydiv">
{% block main_section %}
<!-- Everything not in the navigation, right now -->
<p>this is from `main_section`</p>
{% endblock %}
{% endblock %}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main_style.css') }}">
<head>
<!-- This is NOT displayed in the browser's VIEWPORT -->
<meta charset="utf-8">
{% if METADATA["page_title"] %}
<title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
{% else %}
<title>{{ METADATA["website_title"] }}</title>
{% endif %}
</head>
<body>
<div id="titlediv">
<h3 class="title">My website</h3>
</div>
<!-- This is displayed in the browser's viewport -->
{% block viewport %}
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/gallery"> Gallery</a>
</li>
</ul>
</nav>
<div id="bodydiv">
{% block main_section %}
<!-- Everything not in the navigation, right now -->
<p>this is from `main_section`</p>
{% endblock %}
{% endblock %}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% if METADATA["page_title"] %}
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/main_style.css') }}">
<title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
{% else %}
<title>{{ METADATA["website_title"] }}</title>
{% endif %}
</head>
<body>
<div id="titlediv">
<h3 class="title">My website</h3>
</div>
{% block viewport %}
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/bio"> Bio</a>
</li>
</ul>
</nav>
<div id="bodydiv">
{% block main_section %}
<!-- Everything not in the navigation, right now -->
<p>this is from `main_section`</p>
{% endblock %}
{% endblock %}
</div>
</body>
</html>
#!/usr/bin/env python3
import os
from flask import Flask, render_template, request, session
app = Flask(__name__)
app.secret_key = SECRET_KEY = os.urandom(28)
METADATA = {'website_title':'My Site\' Application',
'page_title': '',
'post_title': ''}
@app.route('/', methods=['GET'])
def frontpage():
METADATA['page_title'] = 'Are you loving it?'
return render_template('public/index.html',
METADATA=METADATA)
@app.route('/bio')
def choose_file():
METADATA['page_title'] = "My bio"
return render_template('/private/bio.html',
METADATA=METADATA)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5002, debug=True)
#!/usr/bin/env python3
import os
from flask import Flask, render_template, request, session
app = Flask(__name__)
app = Flask(__name__,
static_url_path='',
static_folder='static',
template_folder='templates')
app.secret_key = SECRET_KEY = os.urandom(28)
METADATA = {'website_title':'My Site\' Application',
'page_title': '',
'post_title': ''}
@app.route('/', methods=['GET'])
def frontpage():
METADATA['page_title'] = 'Are you loving it?'
return render_template('public/index.html',
METADATA=METADATA)
@app.route('/bio')
def choose_file():
METADATA['page_title'] = "My bio"
return render_template('static/private/bio.html',
METADATA=METADATA)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5002, debug=True)
$ python controller.py
* Serving Flask app "controller" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: on
* Running on http://0.0.0.0:5002/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 157-650-631
127.0.0.1 - - [28/Dec/2019 19:36:07] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [28/Dec/2019 19:36:08] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [28/Dec/2019 19:36:08] "GET /static/css/main_style.css HTTP/1.1" 404 -
127.0.0.1 - - [28/Dec/2019 19:36:08] "GET /favicon.ico HTTP/1.1" 404 -
好的，用这个答案得到： 我认为从现在起，我将明确定义静态和模板路径，以避免混淆 以下是对我有效的方法： controller.py
#!/usr/bin/env python3
import os
from flask import Flask, render_template, request, session
app = Flask(__name__)
app.secret_key = SECRET_KEY = os.urandom(28)
METADATA = {'website_title':'My Site\' Application',
'page_title': '',
'post_title': ''}
@app.route('/', methods=['GET'])
def frontpage():
METADATA['page_title'] = 'Are you loving it?'
return render_template('public/index.html',
METADATA=METADATA)
@app.route('/bio')
def choose_file():
METADATA['page_title'] = "My bio"
return render_template('/private/bio.html',
METADATA=METADATA)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5002, debug=True)
#!/usr/bin/env python3
import os
from flask import Flask, render_template, request, session
app = Flask(__name__)
app = Flask(__name__,
static_url_path='',
static_folder='static',
template_folder='templates')
app.secret_key = SECRET_KEY = os.urandom(28)
METADATA = {'website_title':'My Site\' Application',
'page_title': '',
'post_title': ''}
@app.route('/', methods=['GET'])
def frontpage():
METADATA['page_title'] = 'Are you loving it?'
return render_template('public/index.html',
METADATA=METADATA)
@app.route('/bio')
def choose_file():
METADATA['page_title'] = "My bio"
return render_template('static/private/bio.html',
METADATA=METADATA)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5002, debug=True)
.
├── controller.py
├── styles
│ └── main_style.css
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
.
├── controller.py
├── static
│ └── css
│ └── main_style.css
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
<!DOCTYPE html>
<html lang="en">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main_style.css') }}">
<head>
<!-- This is NOT displayed in the browser's VIEWPORT -->
<meta charset="utf-8">
{% if METADATA["page_title"] %}
<title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
{% else %}
<title>{{ METADATA["website_title"] }}</title>
{% endif %}
</head>
<body>
<div id="titlediv">
<h3 class="title">My website</h3>
</div>
<!-- This is displayed in the browser's viewport -->
{% block viewport %}
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/gallery"> Gallery</a>
</li>
</ul>
</nav>
<div id="bodydiv">
{% block main_section %}
<!-- Everything not in the navigation, right now -->
<p>this is from `main_section`</p>
{% endblock %}
{% endblock %}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% if METADATA["page_title"] %}
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/main_style.css') }}">
<title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
{% else %}
<title>{{ METADATA["website_title"] }}</title>
{% endif %}
</head>
<body>
<div id="titlediv">
<h3 class="title">My website</h3>
</div>
{% block viewport %}
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/bio"> Bio</a>
</li>
</ul>
</nav>
<div id="bodydiv">
{% block main_section %}
<!-- Everything not in the navigation, right now -->
<p>this is from `main_section`</p>
{% endblock %}
{% endblock %}
</div>
</body>
</html>
{%if元数据[“页面标题]]%}
{{METADATA[“页面标题”]}-{{METADATA[“网站标题”]}
{%else%}
{{元数据[“网站标题”]}
{%endif%}
我的网站
{%block viewport%}
-
-
{%block main_section%}
这是“main_”部分的内容`
{%endblock%}
{%endblock%}