一个不错的html渲染页面模板

2025-11-25 22:55:53 +08:00
parent adbe4a990d
commit e6ce15f66b
6 changed files with 213 additions and 96 deletions
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -1,17 +1,22 @@
-{{ define "base" }}
+{{/* 定义基础模板，作为其他页面模板的布局基础 */}}
+{{ define "layout/base" }}
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
+        {{/* 标题块定义 - 允许子模板重写标题内容 */}}
        <title>{{ block "title" . }}默认标题{{ end }}</title>
+        {{/* 引入静态样式文件 */}}
        <link rel="stylesheet" href="/static/style.css">
    </head>
    <body>
+    {{/* 引入导航栏模板 */}}
    {{ template "navbar" . }}

+    {{/* 主内容区域定义 - 子模板应在此处填充具体内容 */}}
    <main>
        {{ block "content" . }}{{ end }}
    </main>
    </body>
    </html>
-{{ end }}
+{{ end }}
--- a/templates/layout/navbar.html
+++ b/templates/layout/navbar.html
@@ -1,6 +1,12 @@
-{{ define "navbar" }}
+{{/* 定义导航栏模板，包含网站导航链接 */}}
+{{ define "layout/navbar" }}
+
+    <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>
            <li><a href="/about">关于我们</a></li>
@@ -8,4 +14,4 @@
            <li><a href="/contact">联系</a></li>
        </ul>
    </nav>
-{{ end }}
+{{ end }}