鈴木  治

鈴木 治

1656881220

如何使用 htmx 和 Tailwind CSS 設置 Flask

在本教程中,您將學習如何使用htmxTailwind CSS設置 Flask 。htmx 和 Tailwind 的目標是簡化現代 Web 開發,以便您可以設計和啟用交互性,而無需離開 HTML 的舒適和易用性。我們還將了解如何使用Flask-Assets在 Flask 應用程序中捆綁和縮小靜態資源。

htmx

htmx是一個庫,允許您直接從 HTML 訪問現代瀏覽器功能,如 AJAX、CSS 轉換、WebSockets 和服務器發送事件,而不是使用 JavaScript。它允許您直接在標記中快速構建用戶界面。

htmx 擴展了瀏覽器中已經內置的幾個功能,例如發出 HTTP 請求和響應事件。例如,您可以使用 HTML 屬性在任何 HTML 元素上發送 GET、POST、PUT、PATCH 或 DELETE 請求,而不是只能通過a和元素發出 GET 和 POST 請求:form

<button hx-delete="/user/1">Delete</button>

您還可以更新部分頁面以創建單頁應用程序 (SPA):CodePen 鏈接

在瀏覽器的開發工具中打開網絡選項卡。https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode單擊該按鈕時,將向端點發送 XHR 請求。然後將響應附加到p具有idof 輸出的元素。

有關更多示例,請查看官方 htmx 文檔中的UI 示例頁面。

優點和缺點

優點

  1. 開發人員生產力:您可以在不接觸 JavaScript 的情況下構建現代用戶界面。有關這方面的更多信息,請查看SPA 替代方案
  2. 打包:庫本身很小(~10k min.gz'd),無依賴且可擴展

缺點

  1. 庫成熟度:由於庫很新,文檔和示例實現很少。
  2. 傳輸的數據大小:通常,SPA 框架(如 React 和 Vue)通過以 JSON 格式在客戶端和服務器之間來回傳遞數據來工作。接收到的數據然後由客戶端呈現。另一方面,htmx 從服務器接收呈現的 HTML,並將目標元素替換為響應。呈現格式的 HTML 在大小方面通常比 JSON 響應大。

順風 CSS

Tailwind CSS是一個“實用程序優先”的 CSS 框架。它沒有提供預先構建的組件(BootstrapBulma等框架專門從事這些組件),而是以實用程序類的形式提供構建塊,使人們能夠快速輕鬆地創建佈局和設計。

例如,採用以下 HTML 和 CSS:

<style>
.hello {
  height: 5px;
  width: 10px;
  background: gray;
  border-width: 1px;
  border-radius: 3px;
  padding: 5px;
}
</style>

<div class="hello">Hello World</div>

這可以使用 Tailwind 來實現,如下所示:

<div class="h-1 w-2 bg-gray-600 border rounded-sm p-1">Hello World</div>

查看CSS Tailwind 轉換器,將原始 CSS 轉換為 Tailwind 中的等效實用程序類。比較結果。

優點和缺點

優點

  1. 高度可定制:雖然 Tailwind 帶有預構建的類,但可以使用tailwind.config.js文件覆蓋它們。
  2. 優化:您可以配置Tailwind 以通過僅加載實際使用的類來優化 CSS 輸出。
  3. 暗模式:實現暗模式毫不費力——例如,<div class="bg-white dark:bg-black">.

缺點

  1. 組件:Tailwind 不提供任何官方預構建組件,如按鈕、卡片、導航欄等。組件必須從頭開始創建。Tailwind CSS ComponentsTailwind Toolbox等組件有一些社區驅動的資源,僅舉幾例。Tailwind 的製造商還提供了一個功能強大但已付費的組件庫,稱為Tailwind UI
  2. CSS 是內聯的:這結合了內容和設計,這增加了頁面大小並使 HTML 變得混亂。

燒瓶資產

Flask-Assets是一個擴展,旨在管理 Flask 應用程序中的靜態資產。使用它,您可以創建一個簡單的資產管道:

  1. 將SassLESS編譯為 CSS 樣式表
  2. 將多個 CSS 和 JavaScript 文件合併並縮小為每個文件的單個文件
  3. 創建資產包以在您的模板中使用

有了這個,讓我們看看如何在 Flask 中使用上述每個工具!

項目設置

首先,為我們的項目創建一個新目錄,創建並激活一個新的虛擬環境,然後安裝 Flask 和 Flask-Assets:

$ mkdir flask-htmx-tailwind && cd flask-htmx-tailwind
$ python3.10 -m venv venv
$ source venv/bin/activate
(venv)$

(venv)$ pip install Flask==2.1.1 Flask-Assets==2.0

接下來,讓我們安裝pytailwindcss並下載它的二進製文件:

(venv)$ pip install pytailwindcss==0.1.4
(venv)$ tailwindcss

接下來,添加一個app.py文件:

# app.py

from flask import Flask
from flask_assets import Bundle, Environment

app = Flask(__name__)

assets = Environment(app)
css = Bundle("src/main.css", output="dist/main.css")

assets.register("css", css)
css.build()

導入BundleEnvironment後,我們創建了一個新Environment的並通過Bundle.

我們創建的包將src/main.css作為輸入,然後在運行 Tailwind CSS CLI 時將其處理並輸出到dist/main.css 。

由於所有 Flask 靜態文件默認都駐留在“static”文件夾中,因此上述“src”和“dist”文件夾都駐留在“static”文件夾中。

有了這個,讓我們設置 Tailwind。

首先創建一個 Tailwind 配置文件:

(venv)$ tailwindcss init

此命令在項目的根目錄中創建了一個tailwind.config.js文件。所有與 Tailwind 相關的自定義設置都進入此文件。

像這樣更新tai​​lwind.config.js

module.exports = {
  content: [
    './templates/**/*.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意內容部分。在這裡,您可以配置項目 HTML 模板的路徑。Tailwind CSS 將掃描您的模板,搜索 Tailwind 類名稱。生成的輸出 CSS 文件將僅包含在您的模板文件中找到的相關類名的 CSS。這有助於保持生成的 CSS 文件較小,因為它們只包含實際使用的樣式。

將以下內容添加到static/src/main.css

/* static/src/main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

在這裡,我們定義了 Tailwind CSS 中的所有basecomponentsutilities類。

您現在已經連接了 Flask-Assets 和 Tailwind。接下來,我們將看看如何提供一個index.html文件來查看 CSS 的運行情況。

簡單示例

添加一個路由以及一個主塊以將 Flask 開發服務器運行到app.py,如下所示:

# app.py

from flask import Flask, render_template
from flask_assets import Bundle, Environment

app = Flask(__name__)

assets = Environment(app)
css = Bundle("src/main.css", output="dist/main.css")

assets.register("css", css)
css.build()


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


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

創建一個“模板”文件夾。然後,向其中添加一個base.html文件:

<!-- templates/base.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% assets 'css' %}
      <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}

    <title>Flask + htmlx + Tailwind CSS</title>
  </head>
  <body class="bg-blue-100">
    {% block content %}
    {% endblock content %}
  </body>
</html>

記下該{% assets 'css' %}塊。由於我們在應用環境中註冊了 CSS 包,我們可以使用註冊名稱訪問它css,並且{{ ASSET_URL }}會自動使用路徑。

此外,我們通過 為 HTML 正文添加了一些顏色,將背景顏色bg-blue-100更改為淺藍色。

添加index.html文件:

<!-- templates/index.html -->

{% extends "base.html" %}

{% block content %}
<h1>Hello World</h1>
{% endblock content %}

現在,在項目的根目錄中運行以下命令以掃描模板中的類並生成 CSS 文件:

(venv)$ tailwindcss -i ./static/src/main.css -o ./static/dist/main.css --minify

您應該會在“static”文件夾中看到一個名為“dist”的新目錄。

記下生成的static/dist/main.css文件。

通過啟動開發服務器python app.py並在瀏覽器中導航到http://localhost:5000以查看結果。

配置 Tailwind 後,讓我們將 htmx 添加到組合中並構建一個實時搜索,在您鍵入時顯示結果。

實時搜索示例

與其從 CDN 獲取 htmx 庫,不如下載它並使用 Flask-Assets 捆綁它。

從https://unpkg.com/htmx.org@1.7.0/dist/htmx.js下載庫並將其保存到“static/src”。

現在,要為我們的 JavaScript 文件創建一個新包,請像這樣更新app.py

# app.py

from flask import Flask, render_template
from flask_assets import Bundle, Environment

app = Flask(__name__)

assets = Environment(app)
css = Bundle("src/main.css", output="dist/main.css")
js = Bundle("src/*.js", output="dist/main.js") # new

assets.register("css", css)
assets.register("js", js) # new
css.build()
js.build() # new


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


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

在這裡,我們創建了一個名為 的新包js,它輸出到static/dist/main.js。由於我們在這裡沒有使用任何過濾器,因此源文件和目標文件將是相同的。

接下來,將新資產添加到我們的base.html文件中:

<!-- templates/base.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% assets 'css' %}
      <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}

    <!-- new -->
    {% assets 'js' %}
      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}

    <title>Flask + htmlx + Tailwind CSS</title>
  </head>
  <body class="bg-blue-100">
    {% block content %}
    {% endblock content %}
  </body>
</html>

為了讓我們有一些數據可以使用,請將https://github.com/testdrivenio/flask-htmx-tailwind/blob/master/todo.py保存到一個名為todo.py的新文件中。

我們將添加基於每個待辦事項標題的搜索功能。

像這樣更新index.html文件:

<!-- templates/index.html -->

{% extends 'base.html' %}

{% block content %}
<div class="w-small w-2/3 mx-auto py-10 text-gray-600">
  <input
    type="text"
    name="search"
    hx-post="/search"
    hx-trigger="keyup changed delay:250ms"
    hx-indicator=".htmx-indicator"
    hx-target="#todo-results"
    placeholder="Search"
    class="bg-white h-10 px-5 pr-10 rounded-full text-2xl focus:outline-none"
  >
  <span class="htmx-indicator">Searching...</span>
</div>

<table class="border-collapse w-small w-2/3 mx-auto">
  <thead>
    <tr>
      <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">#</th>
      <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Title</th>
      <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Completed</th>
    </tr>
  </thead>
  <tbody id="todo-results">
    {% include 'todo.html' %}
  </tbody>
</table>
{% endblock content %}

讓我們花點時間看看從 htmx 定義的屬性:

<input
  type="text"
  name="search"
  hx-post="/search"
  hx-trigger="keyup changed delay:250ms"
  hx-indicator=".htmx-indicator"
  hx-target="#todo-results"
  placeholder="Search"
  class="bg-white h-10 px-5 pr-10 rounded-full text-2xl focus:outline-none"
>
  1. 輸入向/search端點發送 POST 請求。
  2. 該請求是通過延遲 250 毫秒的keyup 事件觸發的。因此,如果在最後一次 keyup 之後的 250 毫秒之前輸入了新的 keyup 事件,則不會觸發請求。
  3. 來自請求的 HTML 響應隨後會顯示在#todo-results元素中。
  4. 我們還有一個指示器,一個加載元素,在請求發送後出現,在響應返回後消失。

添加模板/todo.html文件:

<!-- templates/todo.html -->

{% if todos|length>0 %}
  {% for todo in todos %}
    <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">{{todo.id}}</td>
      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">{{todo.title}}</td>
      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
        {% if todo.completed %}
          <span class="rounded bg-green-400 py-1 px-3 text-xs font-bold">Yes</span>
        {% else %}
          <span class="rounded bg-red-400 py-1 px-3 text-xs font-bold">No</span>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
{% endif %}

此文件呈現與我們的搜索查詢匹配的待辦事項。

最後,將路由處理程序添加到app.py

@app.route("/search", methods=["POST"])
def search_todo():
    search_term = request.form.get("search")

    if not len(search_term):
        return render_template("todo.html", todos=[])

    res_todos = []
    for todo in todos:
        if search_term in todo["title"]:
            res_todos.append(todo)

    return render_template("todo.html", todos=res_todos)

/search端點搜索 todos 並使用所有結果呈現todo.html模板

更新頂部的導入:

from flask import Flask, render_template, request
from flask_assets import Bundle, Environment

from todo import todos

接下來,更新輸出 CSS 文件:

(venv)$ tailwindcss -i ./static/src/main.css -o ./static/dist/main.css --minify

python app.py使用並再次導航到http://localhost:5000運行應用程序以對其進行測試:

演示

結論

在本教程中,我們研究瞭如何:

  • 設置 Flask-Assets、htmx 和 Tailwind CSS
  • 使用 Flask、Tailwind CSS 和 htmx 構建實時搜索應用程序

htmx 可以在不重新加載頁面的情況下呈現元素。最重要的是,您無需編寫任何 JavaScript 即可實現這一目標。儘管這減少了客戶端所需的工作量,但從服務器發送的數據可能會更高,因為它正在發送呈現的 HTML。

像這樣提供部分 HTML 模板在 2000 年代初期很流行。htmx 為這種方法提供了現代的轉折。一般來說,由於 React 和 Vue 等框架的複雜性,提供部分模板再次變得流行。您也可以將 WebSockets 添加到組合中以提供實時更改。著名的Phoenix LiveView也使用了同樣的方法。您可以在Web 軟件的未來是 HTML-over-WebSocketsHTML Over WebSockets中閱讀更多關於 HTML over WebSockets 的內容。

圖書館還很年輕,但未來看起來很光明。

來源:  https ://testdriven.io

#flask #htmx #tailwindcss 

What is GEEK

Buddha Community

如何使用 htmx 和 Tailwind CSS 設置 Flask
鈴木  治

鈴木 治

1656881220

如何使用 htmx 和 Tailwind CSS 設置 Flask

在本教程中,您將學習如何使用htmxTailwind CSS設置 Flask 。htmx 和 Tailwind 的目標是簡化現代 Web 開發,以便您可以設計和啟用交互性,而無需離開 HTML 的舒適和易用性。我們還將了解如何使用Flask-Assets在 Flask 應用程序中捆綁和縮小靜態資源。

htmx

htmx是一個庫,允許您直接從 HTML 訪問現代瀏覽器功能,如 AJAX、CSS 轉換、WebSockets 和服務器發送事件,而不是使用 JavaScript。它允許您直接在標記中快速構建用戶界面。

htmx 擴展了瀏覽器中已經內置的幾個功能,例如發出 HTTP 請求和響應事件。例如,您可以使用 HTML 屬性在任何 HTML 元素上發送 GET、POST、PUT、PATCH 或 DELETE 請求,而不是只能通過a和元素發出 GET 和 POST 請求:form

<button hx-delete="/user/1">Delete</button>

您還可以更新部分頁面以創建單頁應用程序 (SPA):CodePen 鏈接

在瀏覽器的開發工具中打開網絡選項卡。https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode單擊該按鈕時,將向端點發送 XHR 請求。然後將響應附加到p具有idof 輸出的元素。

有關更多示例,請查看官方 htmx 文檔中的UI 示例頁面。

優點和缺點

優點

  1. 開發人員生產力:您可以在不接觸 JavaScript 的情況下構建現代用戶界面。有關這方面的更多信息,請查看SPA 替代方案
  2. 打包:庫本身很小(~10k min.gz'd),無依賴且可擴展

缺點

  1. 庫成熟度:由於庫很新,文檔和示例實現很少。
  2. 傳輸的數據大小:通常,SPA 框架(如 React 和 Vue)通過以 JSON 格式在客戶端和服務器之間來回傳遞數據來工作。接收到的數據然後由客戶端呈現。另一方面,htmx 從服務器接收呈現的 HTML,並將目標元素替換為響應。呈現格式的 HTML 在大小方面通常比 JSON 響應大。

順風 CSS

Tailwind CSS是一個“實用程序優先”的 CSS 框架。它沒有提供預先構建的組件(BootstrapBulma等框架專門從事這些組件),而是以實用程序類的形式提供構建塊,使人們能夠快速輕鬆地創建佈局和設計。

例如,採用以下 HTML 和 CSS:

<style>
.hello {
  height: 5px;
  width: 10px;
  background: gray;
  border-width: 1px;
  border-radius: 3px;
  padding: 5px;
}
</style>

<div class="hello">Hello World</div>

這可以使用 Tailwind 來實現,如下所示:

<div class="h-1 w-2 bg-gray-600 border rounded-sm p-1">Hello World</div>

查看CSS Tailwind 轉換器,將原始 CSS 轉換為 Tailwind 中的等效實用程序類。比較結果。

優點和缺點

優點

  1. 高度可定制:雖然 Tailwind 帶有預構建的類,但可以使用tailwind.config.js文件覆蓋它們。
  2. 優化:您可以配置Tailwind 以通過僅加載實際使用的類來優化 CSS 輸出。
  3. 暗模式:實現暗模式毫不費力——例如,<div class="bg-white dark:bg-black">.

缺點

  1. 組件:Tailwind 不提供任何官方預構建組件,如按鈕、卡片、導航欄等。組件必須從頭開始創建。Tailwind CSS ComponentsTailwind Toolbox等組件有一些社區驅動的資源,僅舉幾例。Tailwind 的製造商還提供了一個功能強大但已付費的組件庫,稱為Tailwind UI
  2. CSS 是內聯的:這結合了內容和設計,這增加了頁面大小並使 HTML 變得混亂。

燒瓶資產

Flask-Assets是一個擴展,旨在管理 Flask 應用程序中的靜態資產。使用它,您可以創建一個簡單的資產管道:

  1. 將SassLESS編譯為 CSS 樣式表
  2. 將多個 CSS 和 JavaScript 文件合併並縮小為每個文件的單個文件
  3. 創建資產包以在您的模板中使用

有了這個,讓我們看看如何在 Flask 中使用上述每個工具!

項目設置

首先,為我們的項目創建一個新目錄,創建並激活一個新的虛擬環境,然後安裝 Flask 和 Flask-Assets:

$ mkdir flask-htmx-tailwind && cd flask-htmx-tailwind
$ python3.10 -m venv venv
$ source venv/bin/activate
(venv)$

(venv)$ pip install Flask==2.1.1 Flask-Assets==2.0

接下來,讓我們安裝pytailwindcss並下載它的二進製文件:

(venv)$ pip install pytailwindcss==0.1.4
(venv)$ tailwindcss

接下來,添加一個app.py文件:

# app.py

from flask import Flask
from flask_assets import Bundle, Environment

app = Flask(__name__)

assets = Environment(app)
css = Bundle("src/main.css", output="dist/main.css")

assets.register("css", css)
css.build()

導入BundleEnvironment後,我們創建了一個新Environment的並通過Bundle.

我們創建的包將src/main.css作為輸入,然後在運行 Tailwind CSS CLI 時將其處理並輸出到dist/main.css 。

由於所有 Flask 靜態文件默認都駐留在“static”文件夾中,因此上述“src”和“dist”文件夾都駐留在“static”文件夾中。

有了這個,讓我們設置 Tailwind。

首先創建一個 Tailwind 配置文件:

(venv)$ tailwindcss init

此命令在項目的根目錄中創建了一個tailwind.config.js文件。所有與 Tailwind 相關的自定義設置都進入此文件。

像這樣更新tai​​lwind.config.js

module.exports = {
  content: [
    './templates/**/*.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意內容部分。在這裡,您可以配置項目 HTML 模板的路徑。Tailwind CSS 將掃描您的模板,搜索 Tailwind 類名稱。生成的輸出 CSS 文件將僅包含在您的模板文件中找到的相關類名的 CSS。這有助於保持生成的 CSS 文件較小,因為它們只包含實際使用的樣式。

將以下內容添加到static/src/main.css

/* static/src/main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

在這裡,我們定義了 Tailwind CSS 中的所有basecomponentsutilities類。

您現在已經連接了 Flask-Assets 和 Tailwind。接下來,我們將看看如何提供一個index.html文件來查看 CSS 的運行情況。

簡單示例

添加一個路由以及一個主塊以將 Flask 開發服務器運行到app.py,如下所示:

# app.py

from flask import Flask, render_template
from flask_assets import Bundle, Environment

app = Flask(__name__)

assets = Environment(app)
css = Bundle("src/main.css", output="dist/main.css")

assets.register("css", css)
css.build()


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


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

創建一個“模板”文件夾。然後,向其中添加一個base.html文件:

<!-- templates/base.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% assets 'css' %}
      <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}

    <title>Flask + htmlx + Tailwind CSS</title>
  </head>
  <body class="bg-blue-100">
    {% block content %}
    {% endblock content %}
  </body>
</html>

記下該{% assets 'css' %}塊。由於我們在應用環境中註冊了 CSS 包,我們可以使用註冊名稱訪問它css,並且{{ ASSET_URL }}會自動使用路徑。

此外,我們通過 為 HTML 正文添加了一些顏色,將背景顏色bg-blue-100更改為淺藍色。

添加index.html文件:

<!-- templates/index.html -->

{% extends "base.html" %}

{% block content %}
<h1>Hello World</h1>
{% endblock content %}

現在,在項目的根目錄中運行以下命令以掃描模板中的類並生成 CSS 文件:

(venv)$ tailwindcss -i ./static/src/main.css -o ./static/dist/main.css --minify

您應該會在“static”文件夾中看到一個名為“dist”的新目錄。

記下生成的static/dist/main.css文件。

通過啟動開發服務器python app.py並在瀏覽器中導航到http://localhost:5000以查看結果。

配置 Tailwind 後,讓我們將 htmx 添加到組合中並構建一個實時搜索,在您鍵入時顯示結果。

實時搜索示例

與其從 CDN 獲取 htmx 庫,不如下載它並使用 Flask-Assets 捆綁它。

從https://unpkg.com/htmx.org@1.7.0/dist/htmx.js下載庫並將其保存到“static/src”。

現在,要為我們的 JavaScript 文件創建一個新包,請像這樣更新app.py

# app.py

from flask import Flask, render_template
from flask_assets import Bundle, Environment

app = Flask(__name__)

assets = Environment(app)
css = Bundle("src/main.css", output="dist/main.css")
js = Bundle("src/*.js", output="dist/main.js") # new

assets.register("css", css)
assets.register("js", js) # new
css.build()
js.build() # new


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


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

在這裡,我們創建了一個名為 的新包js,它輸出到static/dist/main.js。由於我們在這裡沒有使用任何過濾器,因此源文件和目標文件將是相同的。

接下來,將新資產添加到我們的base.html文件中:

<!-- templates/base.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% assets 'css' %}
      <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}

    <!-- new -->
    {% assets 'js' %}
      <script type="text/javascript" src="{{ ASSET_URL }}"></script>
    {% endassets %}

    <title>Flask + htmlx + Tailwind CSS</title>
  </head>
  <body class="bg-blue-100">
    {% block content %}
    {% endblock content %}
  </body>
</html>

為了讓我們有一些數據可以使用,請將https://github.com/testdrivenio/flask-htmx-tailwind/blob/master/todo.py保存到一個名為todo.py的新文件中。

我們將添加基於每個待辦事項標題的搜索功能。

像這樣更新index.html文件:

<!-- templates/index.html -->

{% extends 'base.html' %}

{% block content %}
<div class="w-small w-2/3 mx-auto py-10 text-gray-600">
  <input
    type="text"
    name="search"
    hx-post="/search"
    hx-trigger="keyup changed delay:250ms"
    hx-indicator=".htmx-indicator"
    hx-target="#todo-results"
    placeholder="Search"
    class="bg-white h-10 px-5 pr-10 rounded-full text-2xl focus:outline-none"
  >
  <span class="htmx-indicator">Searching...</span>
</div>

<table class="border-collapse w-small w-2/3 mx-auto">
  <thead>
    <tr>
      <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">#</th>
      <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Title</th>
      <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Completed</th>
    </tr>
  </thead>
  <tbody id="todo-results">
    {% include 'todo.html' %}
  </tbody>
</table>
{% endblock content %}

讓我們花點時間看看從 htmx 定義的屬性:

<input
  type="text"
  name="search"
  hx-post="/search"
  hx-trigger="keyup changed delay:250ms"
  hx-indicator=".htmx-indicator"
  hx-target="#todo-results"
  placeholder="Search"
  class="bg-white h-10 px-5 pr-10 rounded-full text-2xl focus:outline-none"
>
  1. 輸入向/search端點發送 POST 請求。
  2. 該請求是通過延遲 250 毫秒的keyup 事件觸發的。因此,如果在最後一次 keyup 之後的 250 毫秒之前輸入了新的 keyup 事件,則不會觸發請求。
  3. 來自請求的 HTML 響應隨後會顯示在#todo-results元素中。
  4. 我們還有一個指示器,一個加載元素,在請求發送後出現,在響應返回後消失。

添加模板/todo.html文件:

<!-- templates/todo.html -->

{% if todos|length>0 %}
  {% for todo in todos %}
    <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">{{todo.id}}</td>
      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">{{todo.title}}</td>
      <td class="w-full lg:w-auto p-3 text-gray-800 text-center border border-b block lg:table-cell relative lg:static">
        {% if todo.completed %}
          <span class="rounded bg-green-400 py-1 px-3 text-xs font-bold">Yes</span>
        {% else %}
          <span class="rounded bg-red-400 py-1 px-3 text-xs font-bold">No</span>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
{% endif %}

此文件呈現與我們的搜索查詢匹配的待辦事項。

最後,將路由處理程序添加到app.py

@app.route("/search", methods=["POST"])
def search_todo():
    search_term = request.form.get("search")

    if not len(search_term):
        return render_template("todo.html", todos=[])

    res_todos = []
    for todo in todos:
        if search_term in todo["title"]:
            res_todos.append(todo)

    return render_template("todo.html", todos=res_todos)

/search端點搜索 todos 並使用所有結果呈現todo.html模板

更新頂部的導入:

from flask import Flask, render_template, request
from flask_assets import Bundle, Environment

from todo import todos

接下來,更新輸出 CSS 文件:

(venv)$ tailwindcss -i ./static/src/main.css -o ./static/dist/main.css --minify

python app.py使用並再次導航到http://localhost:5000運行應用程序以對其進行測試:

演示

結論

在本教程中,我們研究瞭如何:

  • 設置 Flask-Assets、htmx 和 Tailwind CSS
  • 使用 Flask、Tailwind CSS 和 htmx 構建實時搜索應用程序

htmx 可以在不重新加載頁面的情況下呈現元素。最重要的是,您無需編寫任何 JavaScript 即可實現這一目標。儘管這減少了客戶端所需的工作量,但從服務器發送的數據可能會更高,因為它正在發送呈現的 HTML。

像這樣提供部分 HTML 模板在 2000 年代初期很流行。htmx 為這種方法提供了現代的轉折。一般來說,由於 React 和 Vue 等框架的複雜性,提供部分模板再次變得流行。您也可以將 WebSockets 添加到組合中以提供實時更改。著名的Phoenix LiveView也使用了同樣的方法。您可以在Web 軟件的未來是 HTML-over-WebSocketsHTML Over WebSockets中閱讀更多關於 HTML over WebSockets 的內容。

圖書館還很年輕,但未來看起來很光明。

來源:  https ://testdriven.io

#flask #htmx #tailwindcss 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

  • Introducing Tailwind CSS
  • Adding Tailwind CSS to your project via a package manager
  • Creating the configuration file and process your CSS with Tailwind
  • Building a responsive hero section using the utility-first classes from Tailwind
  • Customize fonts, colors and add extra classes using the configuration file
  • Reduce loading time and file size by purging the unused classes from your CSS
  • Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source

Popular Tailwind CSS Plugins and Extensions - Themesberg Blog

By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.

One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.

Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.

#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg

Tailwind CSS Cheatsheet

Master Tailwind CSS with this Cheatsheet.

Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS.

Just like other CSS libraries like Bootstrap, Tailwind also has responsive classes that we only need to specify in our application.

This article will get you up and started quickly with Tailwind to make beautiful websites and UIs.

Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything.

On top of that, we don’t have to worry about responsivity as all is taken care of by Tailwind on different devices.

A utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. From Tailwind.com.

In this article, we will see the most basic CSS classes and their relative properties in CSS.

#tailwind #css #tailwind-css #tailwindcss #web-development