📌  相关文章
📜  如何在烧瓶中渲染 css - CSS (1)

📅  最后修改于: 2023-12-03 15:24:39.581000             🧑  作者: Mango

如何在烧瓶中渲染 CSS

在 Flask 框架中，使用烧瓶（Bottle）模板引擎可以方便地渲染 HTML 页面，但是如果需要添加样式，就需要渲染 CSS。本文将介绍如何在烧瓶中渲染 CSS。

1. 创建静态文件夹

在 Flask 应用程序中，可以通过配置 app.static_folder 来设置静态文件夹的路径。默认情况下，静态文件夹被设置为 /static 目录。

from flask import Flask

app = Flask(__name__)
app.static_folder = 'static'  # 设置静态文件夹路径

在静态文件夹中新建一个 CSS 文件夹，命名为 css。将所有的 CSS 文件放在这个文件夹中。

.
├── app.py
└── static
    └── css
        ├── style.css
        └── ...
2. 在 HTML 文件中引入 CSS 文件

在烧瓶中渲染 HTML 页面时，使用 url_for 函数来生成 CSS 文件的 URL，然后将其添加到 HTML 页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask CSS</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Hello Flask!</h1>
</body>
</html>

其中，url_for('static', filename='css/style.css') 会生成 CSS 文件的 URL，例如 http://127.0.0.1:5000/static/css/style.css。

3. 编写 CSS 文件

在 css 文件夹中编写 CSS 文件。以下是一个简单的样式表示例。

body {
    background-color: white;
    color: black;
}

h1 {
    font-size: 48pt;
    font-family: Arial, sans-serif;
}
4. 运行 Flask 应用程序

最后，运行 Flask 应用程序即可看到 CSS 样式效果。

if __name__ == '__main__':
    app.run(debug=True)

注意，debug=True 会启用调试模式，不应在生产环境中使用。

以上就是在烧瓶中渲染 CSS 的详细步骤。

参考资料：