在烧瓶中链接自定义 CSS - Python (1)

📌 相关文章

📜 在烧瓶中链接自定义 CSS - Python (1)

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

在烧瓶中链接自定义 CSS - Python

在使用 Flask 构建 Web 应用程序时，经常需要在 HTML 页面中链接自定义CSS，这有助于我们美化网页，让其更加美观和易于使用。

Flask 路由

在 Flask 中，可通过路由实现不同 URL 地址的响应。在应用程序中，可通过 route() 装饰器指定 URL 地址和 HTTP 请求方法，例如：

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello World'

本例中，将 route() 装饰器用于 index() 函数，使其响应应用程序的根 URL http://localhost:5000/。在浏览器中访问该 URL，应该看到 "Hello World" 的输出。

链接自定义 CSS

为了链接自定义 CSS 文件，需在 HTML 文件中使用 link 元素来指定 CSS 文件的位置。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

本例中，在 <head> 元素中使用了 link 元素。rel 属性用于指定链接的文件类型，type 属性用于指定链接的 MIME 类型，href 属性用于指定链接的文件路径。

在这里，我们使用了 Flask 的内置函数 url_for() 来生成 CSS 文件的 URL。该函数使用了 Flask 应用程序的静态文件夹 static 中的 styles.css 文件。

Flask 静态文件夹

为了使 Flask 应用程序能够访问静态文件，例如 CSS、JavaScript 和图像文件，需在应用程序的根目录下创建一个名为 static 的文件夹。

my_app/
  __init__.py
  static/
    styles.css
  templates/
    index.html

在这里，我们创建了一个名为 static 的文件夹，并在其中放置了 styles.css 文件。应用程序使用 Flask 的内置函数 send_from_directory() 来将静态文件夹中的文件发送给浏览器。

from flask import Flask, send_from_directory
app = Flask(__name__)

@app.route('/static/<path:path>')
def send_static(path):
    return send_from_directory('static', path)

@app.route('/')
def index():
    return render_template('index.html')

在这里，我们创建了一个名为 send_static() 的视图函数，该函数接收一个路径参数，将静态文件夹中的文件发送给浏览器。

完整代码如下：

from flask import Flask, render_template, send_from_directory
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/static/<path:path>')
def send_static(path):
    return send_from_directory('static', path)

现在，我们已经成功链接了自定义 CSS 文件，并将其发送给了浏览器。

总结

在 Flask 中，可通过路由实现不同 URL 地址的响应，通过静态文件夹可以使应用程序能够访问静态文件。通过链接自定义 CSS 文件，我们可以使 Web 应用程序更加美观和易于使用。