在 Flask 中建立靜態資料夾

Salman Mehmood 2022年7月12日
在 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 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