使用 Go 模板生成 HTML 页面的示例
在这里，我提供了另一个我为了跟进我之前关于“如何在 Golang 中使用模板”的文章而制作的例子。我将使用该文章中关于使用 Golang（Go 语言）模板的一些基本技巧。此外，对于这个项目，我还决定使用嵌套模板和在模板中编写我自己的简单函数。
网页是响应式的，所以它可以适应不同的屏幕宽度，当你点击其中一个“产品”时，你会得到一个弹出窗口，里面有描述和一些按钮。
在原始示例中，产品和它们的描述都在 HTML 文件中硬编码。使用模板并用（不同的）数据渲染它们可以避免硬编码产品及其描述。
接下来，我将首先向你展示实际的程序，它将解析和渲染模板，然后输出生成的 HTML 文件。之后，我将向你展示不同模板的样子，并讨论我在它们中使用的一些技巧。
实际的 Golang 程序
这是会完成所有工作的 Golang 程序：
package main
import (
"bufio"
"bytes"
"html/template"
"os"
)
type product struct {
Img string
Name string
Price string
Stars float64
Reviews int
Description string
}
func subtr(a, b float64) float64 {
return a - b
}
func list(e ...float64) []float64 {
return e
}
func main() {
data := []product{
{"images/1.png", "strawberries", "$2.00", 4.0, 251, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
{"images/2.png", "onions", "$2.80", 5.0, 123, "Morbi sit amet erat vitae purus consequat vehicula nec sit amet purus."},
{"images/3.png", "tomatoes", "$3.10", 4.5, 235, "Curabitur tristique odio et nibh auctor, ut sollicitudin justo condimentum."},
{"images/4.png", "courgette", "$1.20", 4.0, 251, "Phasellus at leo a purus consequat ornare ac aliquam quam."},
{"images/5.png", "broccoli", "$3.80", 3.5, 123, "Maecenas sed ante sagittis, dapibus dui quis, hendrerit orci."},
{"images/6.png", "potatoes", "$3.00", 2.5, 235, "Vivamus malesuada est et tellus porta, vel consectetur orci dapibus."},
}
allFiles := []string{"content.tmpl", "footer.tmpl", "header.tmpl", "page.tmpl"}
var allPaths []string
for _, tmpl := range allFiles {
allPaths = append(allPaths, "./templates/"+tmpl)
}
templates := template.Must(template.New("").Funcs(template.FuncMap{"subtr": subtr, "list": list}).ParseFiles(allPaths...))
var processed bytes.Buffer
templates.ExecuteTemplate(&processed, "page", data)
outputPath := "./static/index.html"
f, _ := os.Create(outputPath)
w := bufio.NewWriter(f)
w.WriteString(string(processed.Bytes()))
w.Flush()
}
在第3-8行，我们导入了必要的包。包bufio、bytes和os用于输出 HTML 文件。包html/template用于处理模板。
在第10-17行，我们定义了product，这是一个用于存放产品数据的struct。确保所有的属性都是大写的，也就是说，它们都是可导出的。在 Golang 模板中使用 struct 时，这是必需的。
另外，请注意星级评分是一个在0到5之间的浮点数。我们将这个数字的类型定义为float64，是因为模板中所有的浮点数都使用float64。
在第19-25行，我创建了两个函数，因为我对sprig包提供的函数并不满意。第一个函数叫做subtr()，是一个简单的浮点数减法函数，第二个函数叫做list()，用于创建一个浮点数列表。
在第29-36行，我们定义了要在模板中渲染的数据。在这个例子中，数据是硬编码的。在更现实的环境中，这些数据可能会存储在某种类型的数据库中。注意，数据遵循了product结构的定义。
在第38行，我们将所有模板的文件名添加到一个切片中。
在第40-43行，将目录名/templates/添加到所有文件名中。
在第45行，我们使用ParseFiles()解析模板，确保使用template.FuncMap{}添加了两个函数subtr和list，并使用template.Must()检查模板的正确性。
在第47-48行，我们将渲染的模板输出到一个字节缓冲区。为了确保渲染器以page模板开始，我们使用ExecuteTemplates()并将"page"作为参数。在这里，我们也将我们定义的数据提供给渲染器。
在第50-54行，渲染的字节缓冲区输出到./static目录中名为index.html的 HTML 文件。
生成 HTML 的模板
在这里我将讨论本项目使用的所有模板。
“page”模板
这是定义完整网页的模板。它调用了其他三个模板：header，content和footer。
{{define "page"}}
{{template "header" -}}
{{template "content" . -}}
{{template "footer" -}}
{{end}}
在第1行，必须在此模板内定义page，否则ExecuteTemplates()将找不到它。
在第3行，注意，在调用content模板时添加了一个点。这向模板渲染器发出信号，表示提供的数据要发送到content模板。这与向函数提供参数一样。鉴于header和footer模板不需要数据，因此也无需添加点。
“header”模板
这个模板用于渲染一个典型的HTML头部，加载字体、样式和JavaScript代码。
{{define "header" -}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
</head>
<body>
{{end}}
注意，我们使用define和end关键字来定义这个模板为header模板。
另外，注意双结束括号前的‘-’符号。这个符号告诉渲染器移除空白和换行符。根据我的经验，你需要尝试这些‘-’的放置位置。
为了达到期望的输出，你有时需要将‘-’放在开始的双括号之后，有时需要放在结束的双括号之前，有时两个地方都需要放。
“content”模板
这是渲染HTML文件主体的模板。
将内容与头部和尾部分开定义的一个原因是，我们可以快速创建其他页面，这些页面具有不同的内容，但头部和尾部是相同的——也就是说，加载相同的CSS，JS，字体等。
如前所述，我创建了自己的Sprig的list和subf函数版本，因为我对该包中的函数不满意。这是因为我遇到了一些无法解决的错误。我还决定将我的减法函数命名为subtr而不是subf。
{{define "content" -}}
<div class="container">
<h3 class="title"> organic products </h3>
<div class="products-container">
{{range $index, $item :=.}}
<div class="product" data-name="p-{{$index}}">
<img src="{{$item.Img}}" alt="">
<h3>{{$item.Name}}</h3>
<div class="price">{{$item.Price}}</div>
</div>
{{end}}
</div>
</div>
<div class="products-preview">
{{range $index, $item:=.}}
<div class="preview" data-target="p-{{$index}}">
<i class="fas fa-times"></i>
<img src="{{$item.Img}}" alt="">
<h3>organic {{$item.Name}}</h3>
<div class="stars">
{{- $stars := list 1.0 2.0 3.0 4.0 5.0 -}}
{{- range $stars}}
{{$x:= subtr . 0.5}}
{{- if lt $item.Stars $x -}}
<i class="far fa-star"></i>
{{- else if lt $item.Stars . -}}
<i class="fas fa-star-half-alt"></i>
{{- else -}}
<i class="fas fa-star"></i>
{{- end -}}
{{end}}
<span>( {{$item.Reviews}} )</span>
</div>
<p>{{$item.Description}}</p>
<div class="price">{{$item.Price}}</div>
<div class="buttons">
<a href="#" class="buy">buy now</a>
<a href="#" class="cart">add to cart</a>
</div>
</div>
{{end}}
</div>
{{end}}
在第5到12行，我们遍历数据中的所有产品。对于每个产品，我们创建内部模板变量$index和$item。我们使用$index作为data-name属性。从$item中我们提取Img，Name，和Price属性用于HTML。
在第16到42行，我们做的和上面一样，但我们也从$item中提取$Stars $Description和$Reviews属性。
此外，在第22行，我们创建了一个名为$stars的列表。这个列表包含从1.0到5.0的浮点数。我们需要这些数来显示星星。这些数表示显示每个星星的阈值。
然后，在第23到32行，我们创建一个循环来显示星星。基本上，我们有三种类型的星星可以显示：满星，半星，和空星。
使用条件语句，我们确定一个项目的星星数（$item.Stars）是否小于$stars列表中的星星数减去0.5，或小于星星数，或更高。在第一种情况下，我们显示一个空星。在第二种情况下，我们显示一个半星。最后，在最后一种情况下，我们显示一个满星。
“footer”模板
除了将模板定义为footer之外，这里没有特别的事情。
{{define "footer" -}}
</body>
</html>
{{end}}
运行HTML生成器并查看结果
确保main.go文件位于一个也包含两个名为templates和static的子目录的目录中。上述模板都需要在templates目录中。原始代码中的CSS，JS和图片需要在static目录中的各自子目录中。
只需在终端的正确目录中键入go run main.go来运行生成器。随后，HTML文件将被生成并写入static目录作为index.html。
现在，你可以在浏览器中打开index.html文件，你应该得到页面展示的结果。
列表清单
请记住，始终保持学习的态度，并享受编码的乐趣！祝您编码愉快！
如果你喜欢我的文章，点赞，关注，转发！
网友评论