如何使用 templ 在 Go 中编写 HTML 用户界面?
创始人
2025-07-09 09:31:23
0

简介

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

安装

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

go 安装

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

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

二进制安装

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

创建简单的模板组件

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

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

mkdir templDemo
cd templDemo
go mod init

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

package main

templ hello(name string) {
 
Hello, { name }
}

接下来,我们执行 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 的函数,它接受一个名为 name 的参数,并返回一个可渲染 HTML 的 templ.Component。

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

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

package main

import (
 "context"
 "os"
)

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

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

go run main.go

输出结果如下:

Hello, Tim

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

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

运行第一个模板应用程序

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

首先,我们需要更新 main.go 文件。我们可以使用 templ.Handler 函数将 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)
}

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

图片图片

结束语

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

参考资料

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

[2]GitHub 的发布页: https://github.com/a-h/templ/releases/tag/v0.2.476

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...