[英]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.