在 Flask 中创建静态文件夹

Salman Mehmood 2024年2月15日
在 Flask 中创建静态文件夹

通过这个解释,我们将学习如何在静态目录中使用静态资产或静态文件。我们还将学习如何将自定义 CSS 文件导入 Flask。

在 Flask 中创建静态文件夹

在 Flask 应用程序中,显示图像和加载自定义 CSS 类以及使用自定义 JavaScript 有一种奇怪的方式。所以,让我们继续开始吧。

由于我们是从头开始,我们将创建一个全新的项目。我们将从 Flask 中导入一些类,将模块写成小写,然后创建一个 app 对象。

from flask import Flask, render_template

app = Flask(__name__)

我们将创建一个名为 index() 的基本主页函数。我们将在单独的装饰器中设置两个根为 '/home''/'

添加两个根的目的是向你展示我们可以在单个函数中使用多个 route(),这意味着这两个不同的路由都可以访问该函数。

我们将使用 return 关键字返回 render_template() 并传递 home.html 文件。

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

要运行我们的应用程序,我们需要使用以下代码。

run() 方法将帮助运行 Flask 应用程序。我们必须传递 debug 等于 True,因为我们想看到调试,但是当你将站点带到生产级别时,你可以通过编写 False 来关闭它。

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

现在,我们需要设置一个模板文件夹,我们将在其中放置所有 HTML 文件;为此,我们将创建一个新文件夹并将其命名为 templates。然后,我们需要创建另一个新文件夹,我们将其称为 static

现在,我们可能已经能够知道我们将放置特定文件的位置。我们将进入 templates 文件夹并创建一个名为 base.html 的新文件,然后我们将创建一个名为 home.html 的新文件。

让我们在 base.html 文件中编写一个非常基本的 HTML 代码,在 head 中,我们将设置一个块标题,在 body 标签内,我们将添加另一个块内容。

Flask 应用程序为我们所有的 static 文件设置了默认值,这些文件将保存在名为 static 的文件夹中,这意味着你需要将此文件夹设为静态。现在,我们将引用我们想要的特定文件名;我们将把 {{ url_for('static',filename='style.css') }} 传递给 href 属性并在其周围加上双引号。

这样,我们将使用 link 标记中的 Python 代码来获取 static 文件夹的 URL,这将为我们提供 URL,然后指定确切的文件名。

<html>
  <head>
    <title>{% block title %}{% endblock  %}</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

现在,我们有了我们的 base 模板。让我们使用 home.html 文件中的 {% extends 'base.html' %} jinja 代码扩展这个 base 模板,并使用一些块来访问 base.html 元素。

{% extends 'base.html' %}
{% block title %}
    Home Page
{% endblock  %}
{% block content %}
    <h1> Home Page</h1>
{% endblock  %}

现在,我们将讨论在我们的 static 目录中创建一个 static 文件以及如何导入我们的自定义 CSS。我们需要在我们的 static 目录中创建一个新的 CSS 文件,并将其命名为 style.css;不管你怎么称呼它。

你可以更改文件名而不是扩展名,但请确保记住该名称。我们现在将在 style.css 文件中编写一个基本样式以保持简单。

我们将设置一个 CSS body 选择器,使用 color 属性,然后传递 crimson 颜色值。

body {color: crimson;}

我们完成了。现在,我们可以开始运行这个应用程序了。

from flask import Flask, render_template

app = Flask(__name__)


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


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

现在,打开网络浏览器,并导航到带有标题的主页。

Flask 静态文件夹输出

作者: Salman Mehmood
Salman Mehmood avatar Salman Mehmood avatar

Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.

LinkedIn