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

简介: 如何使用 templ 在 Go 中编写 HTML 用户界面?

简介


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 元素、标记以及 ifswitchfor 表达式。


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


接下来,我们执行 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


输出结果如下:


<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 处理器。


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


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


27b71a3a3931d3b3f6b93cd7e6c85d1b.png

结束语


现在,我们已经介绍了如何使用 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.47

相关文章
|
4月前
|
安全 Go
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第24天】Go语言标准库中的`text/template`包用于动态生成HTML和文本,但不熟悉其用法可能导致错误。本文探讨了三个常见问题:1) 忽视模板执行错误,应确保正确处理错误;2) 忽视模板安全,应使用`html/template`包防止XSS攻击;3) 模板结构不合理,应合理组织模板以提高可维护性。理解并运用这些最佳实践,能提升Go语言模板编程的效率和安全性,助力构建稳健的Web应用。
63 0
|
4月前
|
安全 Go 开发者
Golang深入浅出之-Go语言模板(text/template):动态生成HTML
【4月更文挑战第25天】Go语言的`text/template`和`html/template`库提供动态HTML生成。本文介绍了模板基础,如基本语法和数据绑定,以及常见问题和易错点,如忘记转义、未初始化变量、复杂逻辑处理和错误处理。建议使用`html/template`防止XSS攻击,初始化数据结构,分离业务逻辑,并严谨处理错误。示例展示了条件判断和循环结构。通过遵循最佳实践,开发者能更安全、高效地生成HTML。
97 0
|
安全 测试技术 Go
Go --- html/template模板包的使用(二)
Go --- html/template模板包的使用
Go --- html/template模板包的使用(二)
|
SQL 开发框架 JavaScript
Go --- html/template模板包的使用(一)
Go --- html/template模板包的使用
Go --- html/template模板包的使用(一)
Go语言之自定义模板,引用多个模板html文件嵌套使用
Go语言之自定义模板,引用多个模板html文件嵌套使用
273 0
Go语言之自定义模板,引用多个模板html文件嵌套使用
Go语言之自定义模板,函数体解析到HTML模板
Go语言之自定义模板,函数体解析到HTML模板
166 0
Go语言之自定义模板,函数体解析到HTML模板
|
数据可视化 Go 索引
Go Web 编程入门:创建动态 HTML 和文本文件
之前的文章学过把模板和视图分离,建立一个 Web 服务器来展现 HTML 模板。我们将学习如何使用 Go 的模板包创建动态 HTML 和文本文件。
|
Web App开发 移动开发 前端开发
|
2天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
12天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
8 1