html模板完结

2025-11-26 16:30:49 +08:00
parent 5b24561c9c
commit a5ea950538
7 changed files with 263 additions and 18 deletions
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -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}}