在 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)
現在，開啟網路瀏覽器，並導航到帶有標題的主頁。
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