html模板完结
This commit is contained in:
8
main.go
8
main.go
@@ -70,8 +70,14 @@ func main() {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
r.GET("/test", func(c *gin.Context) {
|
||||||
|
c.HTML(200, "pages/test", gin.H{
|
||||||
|
"title": "Test website",
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
// 启动HTTP服务器，监听在8081端口
|
// 启动HTTP服务器，监听在8081端口
|
||||||
err := r.Run(":8081")
|
err := r.Run(":8088")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
167
static/footer.css
Normal file
167
static/footer.css
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
/*
|
||||||
|
* footer.css - 网站底部导航栏样式文件
|
||||||
|
* 负责定义网站底部区域的样式和布局
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部导航栏容器样式
|
||||||
|
* 设置背景色、文字颜色和内边距
|
||||||
|
*/
|
||||||
|
.footer {
|
||||||
|
background: #1e3c72;
|
||||||
|
color: #fff;
|
||||||
|
padding: 2rem 0 1rem;
|
||||||
|
margin-top: auto; /* 确保底部栏在页面底部 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部内容容器样式
|
||||||
|
* 使用flex布局实现多列布局
|
||||||
|
*/
|
||||||
|
.footer-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部各区域通用样式
|
||||||
|
* 设置区域间距和最小宽度
|
||||||
|
*/
|
||||||
|
.footer-section {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部区域标题样式
|
||||||
|
* 设置标题大小和边框
|
||||||
|
*/
|
||||||
|
.footer-section h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #ffcc00;
|
||||||
|
border-bottom: 2px solid #ffcc00;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部联系信息段落样式
|
||||||
|
*/
|
||||||
|
.footer-section p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部链接列表样式
|
||||||
|
* 移除默认列表样式
|
||||||
|
*/
|
||||||
|
.footer-links {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部链接样式
|
||||||
|
* 设置链接颜色和过渡效果
|
||||||
|
*/
|
||||||
|
.footer-links li a {
|
||||||
|
color: #f0f0f0;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部链接悬停效果
|
||||||
|
* 鼠标悬停时改变颜色和添加左边距
|
||||||
|
*/
|
||||||
|
.footer-links li a:hover {
|
||||||
|
color: #ffcc00;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 社交媒体链接列表样式
|
||||||
|
* 移除默认列表样式并使用flex布局
|
||||||
|
*/
|
||||||
|
.social-links {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 社交媒体链接样式
|
||||||
|
* 设置链接背景色和内边距
|
||||||
|
*/
|
||||||
|
.social-link {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 各社交媒体平台特定样式
|
||||||
|
*/
|
||||||
|
.social-link.weibo {
|
||||||
|
background: #e6162d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link.wechat {
|
||||||
|
background: #07c160;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link.github {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 社交媒体链接悬停效果
|
||||||
|
*/
|
||||||
|
.social-link:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 底部版权信息区域样式
|
||||||
|
* 设置上边框和居中对齐
|
||||||
|
*/
|
||||||
|
.footer-bottom {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.2);
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 响应式设计 - 小屏幕适配
|
||||||
|
*/
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-container {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -4,19 +4,24 @@
|
|||||||
<html lang="zh">
|
<html lang="zh">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
{{/* 标题块定义 - 允许子模板重写标题内容 */}}
|
|
||||||
<title>{{ block "title" . }}默认标题{{ end }}</title>
|
<title>{{ block "title" . }}默认标题{{ end }}</title>
|
||||||
{{/* 引入静态样式文件 */}}
|
|
||||||
<link rel="stylesheet" href="/static/style.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{/* 引入导航栏模板 */}}
|
{{template "layout/navbar"}}
|
||||||
{{ template "navbar" . }}
|
|
||||||
|
|
||||||
{{/* 主内容区域定义 - 子模板应在此处填充具体内容 */}}
|
|
||||||
<main>
|
<main>
|
||||||
{{ block "content" . }}{{ end }}
|
{{ block "content" . }}{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- 引入底部导航栏 -->
|
||||||
|
{{ template "layout/footer" . }}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
40
templates/layout/footer.html
Normal file
40
templates/layout/footer.html
Normal 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>© {{.year}} MyGinSite. 保留所有权利。</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{{ end }}
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
{{/* 定义导航栏模板，包含网站导航链接 */}}
|
|
||||||
{{ define "layout/navbar" }}
|
{{ define "layout/navbar" }}
|
||||||
|
|
||||||
<link rel="stylesheet" href="/static/navbar.css">
|
{{/*<link rel="stylesheet" href="/static/navbar.css">*/}}
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
{{/* 网站Logo区域 */}}
|
{{/* 网站Logo区域 */}}
|
||||||
<div class="logo">🔥 MyGinSite</div>
|
<div class="logo">🔥 MyGinSite</div>
|
||||||
|
|||||||
@@ -6,6 +6,11 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>{{.title}}</title>
|
<title>{{.title}}</title>
|
||||||
|
|
||||||
|
<!-- 组件特定样式块 -->
|
||||||
|
<link rel="stylesheet" href="/static/navbar.css">
|
||||||
|
<link rel="stylesheet" href="/static/footer.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{template "layout/navbar"}}
|
{{template "layout/navbar"}}
|
||||||
@@ -56,6 +61,9 @@
|
|||||||
{{/* 自定义模板函数使用示例 */}}
|
{{/* 自定义模板函数使用示例 */}}
|
||||||
{{.data}} <!-- 输出原始时间戳 -->
|
{{.data}} <!-- 输出原始时间戳 -->
|
||||||
{{UnixToTime .data}} <!-- 使用自定义函数将时间戳转换为格式化日期 -->
|
{{UnixToTime .data}} <!-- 使用自定义函数将时间戳转换为格式化日期 -->
|
||||||
|
|
||||||
|
|
||||||
|
{{ template "layout/footer"}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{end}}
|
{{end}}
|
||||||
20
templates/pages/test.html
Normal file
20
templates/pages/test.html
Normal 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}}
|
||||||
Reference in New Issue
Block a user