集成模板

这将是一个更长的文件，因为我们现在需要三 (3) 个文件。此外，我们还需要一个静态目录来存放 favicon.ico、css 文件（如果您选择使用 css）、徽标或任何其他静态文件等文件。

net/http 文档。这些是你最好的朋友。

我们开始吧？

安装和设置

值得庆幸的是，Go 的设置方式是一个直接的过程。
去安装 github.com/a-h/templ/cmd/templ@latest
上面的命令会获取 templ 二进制文件（您确实设置了 PATH，对吧？）。
去获取 github.com/a-h/templ
这会将模板加载到您的 go.mod 中。

就是这样。安装和设置完成。

和奋斗

这个过程中最困难的部分是正确加载 styles.css。如果您不使用 css 文件，则可以跳过有关静态目录的行。

// File: /root/cmd/server/main.go
package main

import (
    [go mod module name]/internal/views
)
func main(){
    port := ":3000"
    home := templ.Component(views.Home())

    http.Handle("/", templ.Handler(home))
    http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))

    log.Fatal(http.ListenAndServe(port, nil))
}

看起来比实际情况更复杂。让我们一步步来看。

port := ":3000"

端口就是端口（我假设你知道端口是什么）。将端口传递给 http.ListenAndServe(addr string, handler Handler) 时，请确保包含 :，否则它将不会运行或构建。

home := templ.Component(views.Home())

home 是 home.templ 中 Home 函数的实例。

http.Handle("/", templ.Handler(home))

我们在这里所做的就是将 home 传递给 templ 的 Handler()，它执行与 http.Handler() 相同的操作，只是更具体一些。这是 templ.Handler() 的来源：

type Handler struct {
    h slog.Handler
    m *sync.Mutex
    w io.Writer
}

该处理程序被分配给根目录模式，然后由 ServeMux（http 多路复用器）使用。一种奇特的说法是它处理给定顶级域的所有路径。

http.Handle("/static", http.StripPrefix("/static", http.FileServer(http.Dir("./static"))))

这篇文章很长，但很容易理解。 http.Handle(pattern string, handler Handler) 我们在上面回顾过。在本例中，模式是静态目录。处理程序由高阶函数组成。这仅仅意味着函数也被视为数据，并且可以分配给变量和/或作为参数传递。

在本例中，我们传递 http.Dir("./static")。 http.Dir(dir string) 用于实现本机文件系统（打开目录），并且仅限于 $pwd/$cwd。这就是为什么我们通过“.”。我们从根源开始。这被传递到 http.FileServer(root FileSystem) 处理程序，该处理程序返回所需的处理程序。然后我们将其传递给 http.StripPrefix(pattern string, fs FileSystem) ，它的作用正如其听起来的那样，从路径中删除目录名。真正的好处是，当您考虑它在做什么时，/static 现在是 /，即 root。那么css应用在哪里呢？在主页上。

那还不错，不是吗？

log.Fatal(http.ListenAndServe(port, nil))

http.ListenAndServe(addr string, handler Handler) 错误是最后一部分。该函数还返回非零错误值，因此强烈建议进行错误处理。 log.Fatal(v ...any) 采用任何类型，并且“相当于在 os.Exit(1) 上调用 Print()”源。意思是，如果程序以 0 以外的任何其他值退出（即崩溃），它将记录该事件。

在某些时候，我将研究 http.ListenAndServeTLS(addr, certFile, keyFile string, handler Handler) 错误。目前，TLS 由我的主机提供服务（不是自托管）。

这样，main.go 就完成了。

模板模板

我们的第一个模板将是./internal/views/layout.templ。该文件将处理页面的显示方式。如果您来自 React 或 Nextjs，那么这是您的 page.tsx 文件。

// File: /root/internal/views/layout.templ
package views

templ Layout( title string ){
    
    
        
            <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
            <link rel="stylesheet" type="text/css" href="/static/styles.css">
            <title>{title}</title>
        
        
            {children ...}
        
    
}

真的很简单。

下一个模板是 home.templ。这将包含 /.
的内容

// File: /root/internal/views/home.templ
package views

templ Home(){
    @Layout("Home")
}

将“Home”传递到 @Layout(title string) 将页面标题设置为，你猜对了，Home。

把它包起来

好吧，就像我一开始说的，这次很多。还有两 (2) 件事，我们就完成了模板的实施和测试。

# 1 - make sure `go.sum` is up-to-date
go mod tidy
# 2 - have templ generate go files
templ generate
# 3a - build it out
go build ./cmd/server/main.go
./main
# 3b - or test it out
go run ./cmd/server/main.go
# you can shorten the path to
go run ./cmd/server/.

您应该看到您的 go/templ 网页焕然一新；即使它会灼伤你的视网膜，因为你忘记更改 CSS 中的背景颜色。

附录

如果您选择使用 jsx 标签作为 templ 模板，则可以将内容 templ.Component 作为参数传递。同样，templ 还提供了用于自定义模板的 css 组件。

勘误表

如果您发现错误，遇到任何问题，或者我错过了什么，请随时发表评论，我会尽力更新和/或提供帮助。

下一个

由于我们的网站将要更改（添加内容），因此我们将按照步骤设置 GitHub 托管的运行器来处理文件的构建并提交它们，以便我们可以部署它。

将来我将为这个项目添加一个 git 存储库。它将包含我们正在编写的所有文件以及用于 GitHub Actions 的 .github/go.yml 文件。

以上是集成模板的详细内容。更多信息请关注PHP中文网其他相关文章！