如何使用 templ 在 Go 中编写 HTML 用户界面？

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等，您的关注将是我的更新动力！

简介

templ 是一个在 Go 中编写 HTML 用户界面的语言。使用 templ，我们可以创建可呈现 HTML 片段的组件，并将它们组合起来创建屏幕、页面、文档或应用程序。

安装

我们可以通过以下两种方式来安装 templ：

go 安装

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

bash 复制代码

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

二进制安装

我们也可以从 GitHub 的发布页下载并安装二进制文件。

创建简单的模板组件

让我们来创建一个简单的 templ 组件。

首先，我们需要创建一个新的 Go 项目。在命令行中执行以下命令：

bash 复制代码

mkdir templDemo
cd templDemo
go mod init

然后，我们创建一个包含组件的 hello.templ 文件。组件是一个函数，它包含 templ 元素、标记以及 if、switch 和 for 表达式。

html 复制代码

package main

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

接下来，我们执行 templ generate 命令生成 Go 代码。命令的输出如下：

html 复制代码

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 的函数，它接受一个名为 name 的参数，并返回一个可渲染 HTML 的 templ.Component。

go 复制代码

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

接下来，我们编写一个程序将组件渲染到 stdout。创建一个名为 main.go 的文件。

go 复制代码

package main

import (
	"context"
	"os"
)

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

最后，我们执行以下命令来运行程序。程序会将组件的 HTML 输出到 stdout。

go 复制代码

go run main.go

输出结果如下：

go 复制代码

<div>Hello, Tim</div>

我们可以将任何实现 io.Writer 接口的类型传递给组件的渲染函数，而不仅仅是将 os.Stdout 传递进去。这意味着我们可以将输出写入文件、bytes.Buffer 或 HTTP 响应中。

通过这种方式，我们可以使用 templ 生成 HTML 文件，并将其作为静态内容托管在 S3 存储桶、Google Cloud Storage 中，或者将其用于生成 HTML 文件，然后通过转换流程转换为 PDF 或通过电子邮件发送。

运行第一个模板应用程序

让我们更新之前的应用程序，通过 HTTP 提供 HTML 页面，而不是将其写入终端。

首先，我们需要更新 main.go 文件。我们可以使用 templ.Handler 函数将 templ 组件作为标准的 HTTP 处理器。

go 复制代码

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)
}

运行程序后，我们可以在浏览器中访问相应的页面：

结束语

现在，我们已经介绍了如何使用 templ 在 Go 中编写 HTML 用户界面。templ 是一个成熟的工具，可以帮助我们快速构建 web 应用。