nannanwu/GoCode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

html模板完结

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
templates/layout/base.html
View File

@@ -4,19 +4,24 @@
<html lang="zh">
<head>
<meta charset="UTF-8">
{{/* 标题块定义 - 允许子模板重写标题内容 */}}
<title>{{ block "title" . }}默认标题{{ end }}</title>
{{/* 引入静态样式文件 */}}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/navbar.css">
<link rel="stylesheet" href="/static/footer.css"> <!-- 引入底部导航栏样式 -->
{{/* 允许子模板添加额外的CSS */}}
{{ block "styles" . }}{{ end }}
</head>
<body>
{{/* 引入导航栏模板 */}}
{{ template "navbar" . }}
{{template "layout/navbar"}}
{{/* 主内容区域定义 - 子模板应在此处填充具体内容 */}}
<main>
{{ block "content" . }}{{ end }}
</main>
<!-- 引入底部导航栏 -->
{{ template "layout/footer" . }}
</body>
</html>
{{ end }}

40
templates/layout/footer.html Normal file
View File

@@ -0,0 +1,40 @@
{{/* 定义底部导航栏模板，包含网站底部信息和链接 */}}
{{ define "layout/footer" }}
{{/*<link rel="stylesheet" href="/static/footer.css">*/}}
<footer class="footer">
<div class="footer-container">
<!-- 联系信息部分 -->
<div class="footer-section">
<h3>联系我们</h3>
<p>邮箱: mail@nannanwu.com</p>
<p>电话: +86 123 4567 8910</p>
</div>
<!-- 快速链接部分 -->
<div class="footer-section">
<h3>快速链接</h3>
<ul class="footer-links">
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/privacy">隐私政策</a></li>
<li><a href="/terms">使用条款</a></li>
</ul>
</div>
<!-- 社交媒体部分 -->
<div class="footer-section">
<h3>关注我们</h3>
<ul class="social-links">
<li><a href="#" class="social-link weibo">微博</a></li>
<li><a href="#" class="social-link wechat">微信</a></li>
<li><a href="#" class="social-link github">GitHub</a></li>
</ul>
</div>
</div>
<!-- 版权信息 -->
<div class="footer-bottom">
<p>&copy; {{.year}} MyGinSite. 保留所有权利。</p>
</div>
</footer>
{{ end }}

5
templates/layout/navbar.html
View File

@@ -1,11 +1,10 @@
{{/* 定义导航栏模板，包含网站导航链接 */}}
{{ define "layout/navbar" }}
<link rel="stylesheet" href="/static/navbar.css">
{{/*<link rel="stylesheet" href="/static/navbar.css">*/}}
<nav class="navbar">
{{/* 网站Logo区域 */}}
<div class="logo">🔥 MyGinSite</div>
{{/* 导航链接列表 */}}
<ul class="nav-links">
<li><a href="/">首页</a></li>

26
templates/pages/index.html
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}}