css - Flask 为绝对存在的 css 文件提供 404
问题描述
我正在构建一个基于烧瓶的网站,但我似乎无法弄清楚如何指向 css 文件(而不是将它们嵌入到 html 文件中)。
这种安排按预期工作:
目录结构如下:
.
├── controller.py
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
和 structure.html 以及文件中包含的 css,如下所示:
<!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>
但是,如果我尝试从 structure.html 指向一个 css 文件,则 css 不会加载:
文件结构:
.
├── controller.py
├── styles
│ └── main_style.css
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
结构.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>
main_style.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;
}
据我所知,基于这样的答案:应用程序未获取 .css 文件(flask/python)我做对了。我究竟做错了什么?
编辑:
这是我的控制器.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)
根据命令行,正在寻找正确路径的 css 文件,但返回 404。
$ 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 -
解决方案
好的,使用这个答案得到它: 如何在 Flask 中提供静态文件 我想从现在开始我将明确定义静态和模板路径以避免混淆。
这对我有用:
控制器.py
#!/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
├── static
│ └── css
│ └── main_style.css
└── templates
├── private
│ └── bio.html
├── public
│ └── index.html
└── structure.html
结构.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>
推荐阅读
- c++ - 如何在 C++11 中安全且可移植地创建和使用临时文件?
- java - 想要对应用程序进行编程以连接到蓝牙设备
- numeric - r 考试类型编号:答案 Inf
- html - Flexbox,盒子里面的盒子
- vue.js - 有条件地将事件侦听器和处理程序附加到 Vue 组件
- typescript - Jasmine/Typescript - 使用“this”变量
- lisp - 在常见的 lisp 中,您如何在未捕获错误的地方重新启动?
- python - 如何递归地遍历 2 个字典,并根据另一个修改原始字典?
- javascript - Javascript 使用过滤器问题过滤对象数组
- haskell - 模式匹配是多余的,haskell