厌倦了复杂的模板语言吗？

试试纯Go语言编写的HTML组件。

gomponents 是用纯Go语言编写的HTML组件。它们可以渲染成HTML 5，并且让你能轻松构建可重用的组件。这样你就可以专注于构建应用，而不是学习另一种模板语言。

在达到1.0版本之前，API可能会发生变化。

访问 www.gomponents.com 获取介绍。

由 maragu 在🇩🇰制作，在线Go课程的创作者。

特性

构建可重用的HTML组件
用Go语言编写声明式HTML5，无需大量字符串，从而获得
- 类型安全
- 自动补全
- 使用gofmt实现良好的格式化
简单易学易用的API（如果你了解HTML，你就已经掌握了大部分）
有用的辅助函数，如插入HTML转义文本的Text和Textf，用于将数据映射到组件的Map，以及用于条件渲染的If/Iff
无外部依赖

使用方法

使用go get获取库：

go get github.com/maragudk/gomponents

使用gomponents的首选方式是使用所谓的点导入（注意gomponents/html导入前的点），以提供流畅的、原生的HTML感觉：

package main

import (
	"net/http"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return Doctype(
		HTML(
			Lang("en"),
			Head(
				TitleEl(g.Text(title)),
				StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
			),
			Body(
				Navbar(currentPath),
				H1(g.Text(title)),
				P(g.Textf("Welcome to the page at %v.", currentPath)),
			),
		),
	)
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

func NavbarLink(href, name, currentPath string) g.Node {
	return A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name))
}

有些人不喜欢点导入，幸运的是这完全是可选的。如果你不喜欢点导入，只需使用常规导入即可。

你也可以使用提供的HTML5文档模板来简化你的代码：

package main

import (
	"net/http"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return c.HTML5(c.HTML5Props{
		Title:    title,
		Language: "en",
		Head: []g.Node{
			StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
		},
		Body: []g.Node{
			Navbar(currentPath),
			H1(g.Text(title)),
			P(g.Textf("Welcome to the page at %v.", currentPath)),
		},
	})
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

func NavbarLink(href, name, currentPath string) g.Node {
	return A(Href(href), c.Classes{"is-active": currentPath == href}, g.Text(name))
}