簡介

templ[1] 是一個在 Go 中編寫 HTML 用戶界面的語言。使用 templ，我們可以創(chuàng)建可呈現(xiàn) HTML 片段的組件，并將它們組合起來創(chuàng)建屏幕、頁面、文檔或應(yīng)用程序。

安裝

我們可以通過以下兩種方式來安裝 templ：

go 安裝

首先，我們需要安裝 Go 1.20 或更高版本。然后，在命令行中運行以下命令：

go install github.com/a-h/templ/cmd/templ@latest

二進制安裝

我們也可以從 GitHub 的發(fā)布頁[2] 下載并安裝二進制文件。

創(chuàng)建簡單的模板組件

讓我們來創(chuàng)建一個簡單的 templ 組件。

首先，我們需要創(chuàng)建一個新的 Go 項目。在命令行中執(zhí)行以下命令：

mkdir templDemo
cd templDemo
go mod init

然后，我們創(chuàng)建一個包含組件的 hello.templ 文件。組件是一個函數(shù)，它包含 templ 元素、標記以及 if、switch 和 for 表達式。

package main

templ hello(name string) {
 <div>Hello, { name }</div>
}

接下來，我們執(zhí)行 templ generate 命令生成 Go 代碼。命令的輸出如下：

Processing path: templDemo
Generated code for "templDemo\\hello.templ" in 2.2127ms
Generated code for 1 templates with 0 errors in 2.7429ms

templ 會生成一個名為 hello_templ.go 的文件，其中包含生成的 Go 代碼。這個文件中包含一個名為 hello 的函數(shù)，它接受一個名為 name 的參數(shù)，并返回一個可渲染 HTML 的 templ.Component。

func hello(name string) templ.Component {
  // ...
}

接下來，我們編寫一個程序?qū)⒔M件渲染到 stdout。創(chuàng)建一個名為 main.go 的文件。

package main

import (
 "context"
 "os"
)

func main() {
 component := hello("Tim")
 component.Render(context.Background(), os.Stdout)
}

最后，我們執(zhí)行以下命令來運行程序。程序會將組件的 HTML 輸出到 stdout。

go run main.go

輸出結(jié)果如下：

<div>Hello, Tim</div>

我們可以將任何實現(xiàn) io.Writer 接口的類型傳遞給組件的渲染函數(shù)，而不僅僅是將 os.Stdout 傳遞進去。這意味著我們可以將輸出寫入文件、bytes.Buffer 或 HTTP 響應(yīng)中。

通過這種方式，我們可以使用 templ 生成 HTML 文件，并將其作為靜態(tài)內(nèi)容托管在 S3 存儲桶、Google Cloud Storage 中，或者將其用于生成 HTML 文件，然后通過轉(zhuǎn)換流程轉(zhuǎn)換為 PDF 或通過電子郵件發(fā)送。

運行第一個模板應(yīng)用程序

讓我們更新之前的應(yīng)用程序，通過 HTTP 提供 HTML 頁面，而不是將其寫入終端。

首先，我們需要更新 main.go 文件。我們可以使用 templ.Handler 函數(shù)將 templ 組件作為標準的 HTTP 處理器。

package main

import (
 "fmt"
 "net/http"

 "github.com/a-h/templ"
)

func main() {
 component := hello("Tim")
 
 http.Handle("/", templ.Handler(component))

 fmt.Println("Listening on :3000")
 http.ListenAndServe(":3000", nil)
}

運行程序后，我們可以在瀏覽器中訪問相應(yīng)的頁面：

圖片

結(jié)束語

現(xiàn)在，我們已經(jīng)介紹了如何使用 templ 在 Go 中編寫 HTML 用戶界面。templ 是一個成熟的工具，可以幫助我們快速構(gòu)建 web 應(yīng)用。

參考資料

[1]templ: https://github.com/a-h/templ

[2]GitHub 的發(fā)布頁: https://github.com/a-h/templ/releases/tag/v0.2.476