html模板完结

This commit is contained in:
2025-11-26 16:30:49 +08:00
parent 5b24561c9c
commit a5ea950538
7 changed files with 263 additions and 18 deletions

View File

@@ -6,6 +6,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.title}}</title>
<!-- 组件特定样式块 -->
<link rel="stylesheet" href="/static/navbar.css">
<link rel="stylesheet" href="/static/footer.css">
</head>
<body>
{{template "layout/navbar"}}
@@ -18,23 +23,23 @@
{{/* 条件判断示例 - 根据score值判断是否及格 */}}
{{if ge .score 60}} <!-- ge: 大于等于 -->
<p>及格</p>
<p>及格</p>
{{else}}
<p></p>
{{end}}
{{/* 简单数组循环遍历示例 */}}
{{range $key, $value := .hobby}} <!-- 遍历爱好列表 -->
<ul>
<li>{{$key}}--{{$value}}</li> <!-- 输出索引和值 -->
</ul>
<ul>
<li>{{$key}}--{{$value}}</li> <!-- 输出索引和值 -->
</ul>
{{end}}
{{/* 结构体数组循环遍历示例 */}}
{{range $key, $value := .newsList}} <!-- 遍历文章列表 -->
<ul>
<li>{{$key}}--{{$value.Title}}--{{$value.Content}}</li> <!-- 输出索引和文章属性 -->
</ul>
<ul>
<li>{{$key}}--{{$value.Title}}--{{$value.Content}}</li> <!-- 输出索引和文章属性 -->
</ul>
{{end}}
{{/* 空数组处理示例 - 当newsList2为空时显示提示信息 */}}
@@ -48,14 +53,17 @@
{{/* 结构体数据访问示例 - 使用with语句简化结构体属性访问 */}}
{{with .news}} <!-- 针对news结构体设置上下文 -->
{{.Title}} <!-- 直接访问Title属性等同于.news.Title -->
{{.Content}} <!-- 直接访问Content属性等同于.news.Content -->
{{.Title}} <!-- 直接访问Title属性等同于.news.Title -->
{{.Content}} <!-- 直接访问Content属性等同于.news.Content -->
{{end}}
<br>
{{/* 自定义模板函数使用示例 */}}
{{.data}} <!-- 输出原始时间戳 -->
{{UnixToTime .data}} <!-- 使用自定义函数将时间戳转换为格式化日期 -->
{{ template "layout/footer"}}
</body>
</html>
{{end}}

20
templates/pages/test.html Normal file
View File

@@ -0,0 +1,20 @@
{{/* 定义index页面模板 */}}
{{define "pages/test"}}
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.title}}</title>
<!-- 组件特定样式块 -->
<link rel="stylesheet" href="/static/navbar.css">
<link rel="stylesheet" href="/static/footer.css">
</head>
<body>
<h1>1111</h1>
</body>
</html>
{{end}}