[英]python quart rendering templates
我在渲染 html / css 时遇到问题。 我发现
主要的:
from quart import Quart, render_template, redirect, url_for
app = Quart(__name__)
@app.route("/")
async def index():
return await render_template("index.html")
app.run(debug=True)
索引.html:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="index/style.css">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Amethyst Dashboard</title>
</head>
<body>
<div class="container">
<img src="index/some_image.png" alt="something" style="width:50%;">
<a href="/login">
<button class="button button_Login">Login</button>
</a>
</div>
</body>
</html>
样式.css:
.container {
position: relative;
text-align: center;
}
.container .button_Login {
position: absolute;
bottom: 1%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
border: 3px solid #eeccff;
color: white;
padding: 15px 32px;
text-align: center;
border-radius: 4px;
font-size: 20px;
transition-duration: 0.4s
}
.container .button_Login:hover {
color: black;
background-color: #eeccff;
}
.button_Login:active {
position: relative;
top: 2px;
}
body {
background: black;
}
文件结构:
app
templates
index
some_image.png
style.css
index.html
main.py
当我在 pycharm 中查看预览时,一切工作正常,但是当我尝试运行代码时,网站显示 css 和 png 文件存在,但其中没有任何内容
chrom 显示三个错误:加载资源失败:服务器响应状态为 404 () style.css:1
加载资源失败:服务器响应状态为 404 () Amethyst.png:1
加载资源失败:服务器响应状态为 404 () style.css:1
Static 文件应放在 static 目录中, docs 。 因此,对于您的示例,文件结构应该是,
app
static
some_image.png
style.css
templates
index.html
main.py
然后在 index.html 文件中,您可以使用url_for
链接到它们,即
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="{ url_for('static', filename='style.css') }}">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Amethyst Dashboard</title>
</head>
<body>
<div class="container">
<img src="{ url_for('static', filename='some_image.png') }}" alt="something" style="width:50%;">
<a href="/login">
<button class="button button_Login">Login</button>
</a>
</div>
</body>
</html>
请注意,链接的文档适用于 Flask,但相同的 API 和规则适用于 Quart。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.