feat: 重构首页模板，双栏现代化布局 + 移动端适配
- 全新 Hero Banner：渐变背景，用户欢迎语 - 左侧最新文章卡片列表，含标题/摘要/作者/日期 - 右侧侧边栏：用户卡片（修复头像显示）、社区统计、快捷入口 - 完全重写 home.css，现代化样式，sticky 侧边栏 - 移动端适配：768px 单列布局，比例缩放 - 后端路由注入 PostService，获取最新 6 篇 approved 文章
This commit is contained in:
@ -3,36 +3,116 @@
|
||||
|
||||
{{template "layout/nav.html" .}}
|
||||
|
||||
<div class="home-layout">
|
||||
<main class="hero">
|
||||
<div class="container">
|
||||
<h1>Meta<span>Lab</span></h1>
|
||||
<p class="hero-tagline">下一代开发者社区</p>
|
||||
{{if .IsLoggedIn}}
|
||||
<p class="hero-desc">欢迎回来，{{.Username}}</p>
|
||||
{{else}}
|
||||
<p class="hero-desc">一个为构建者准备的纯粹空间</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</main>
|
||||
<!-- Hero Banner -->
|
||||
<section class="hero-banner">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Meta<span class="hero-accent">Lab</span></h1>
|
||||
<p class="hero-tagline">下一代开发者社区</p>
|
||||
{{if .IsLoggedIn}}
|
||||
<p class="hero-welcome">欢迎回来，{{.Username}} 👋</p>
|
||||
{{else}}
|
||||
<p class="hero-welcome">一个为构建者准备的纯粹空间</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-card user-card">
|
||||
{{if .IsLoggedIn}}
|
||||
<div class="user-card-avatar">{{slice .Username 0 1}}</div>
|
||||
<h3 class="user-card-name">{{.Username}}</h3>
|
||||
<p class="user-card-desc">欢迎加入 MetaLab</p>
|
||||
<a href="/settings/profile" class="user-card-link">个人设置</a>
|
||||
{{else}}
|
||||
<div class="user-card-avatar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
|
||||
<!-- Main Content -->
|
||||
<div class="container home-main">
|
||||
<div class="home-grid">
|
||||
<!-- Left: Article Feed -->
|
||||
<main class="home-feed">
|
||||
<div class="feed-header">
|
||||
<h2 class="feed-title">最新文章</h2>
|
||||
<a href="/posts" class="feed-more">查看全部 →</a>
|
||||
</div>
|
||||
|
||||
{{if .Posts}}
|
||||
<div class="article-list">
|
||||
{{range .Posts}}
|
||||
<article class="article-card">
|
||||
<div class="article-body">
|
||||
<h3 class="article-title">
|
||||
<a href="/posts/{{.ID}}">{{.Title}}</a>
|
||||
</h3>
|
||||
<p class="article-excerpt">{{.Excerpt}}</p>
|
||||
<div class="article-meta">
|
||||
<span class="article-author">{{.AuthorName}}</span>
|
||||
<span class="meta-dot">·</span>
|
||||
<span class="article-time">{{.CreatedAt.Format "2006-01-02"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty-feed">
|
||||
<div class="empty-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="48" height="48"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<p class="empty-text">暂无文章，成为第一个分享的人吧</p>
|
||||
{{if .IsLoggedIn}}
|
||||
<a href="/studio/write" class="btn-primary">开始创作</a>
|
||||
{{end}}
|
||||
</div>
|
||||
<h3 class="user-card-name">未登录</h3>
|
||||
<p class="user-card-desc">登录后解锁社区功能</p>
|
||||
<a href="/auth/login" class="user-card-btn">登录</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- Right: Sidebar -->
|
||||
<aside class="home-sidebar">
|
||||
<!-- User Card -->
|
||||
<div class="sidebar-card user-card">
|
||||
{{if .IsLoggedIn}}
|
||||
{{if .Avatar}}
|
||||
<img src="{{.Avatar}}" alt="{{.Username}}" class="user-avatar-img" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
|
||||
<div class="user-avatar-fallback" style="display:none">{{substr .Username 0 1}}</div>
|
||||
{{else}}
|
||||
<div class="user-avatar-fallback">{{substr .Username 0 1}}</div>
|
||||
{{end}}
|
||||
<h3 class="user-card-name">{{.Username}}</h3>
|
||||
<p class="user-card-desc">欢迎加入 MetaLab</p>
|
||||
<a href="/space" class="user-card-link">我的空间</a>
|
||||
{{else}}
|
||||
<div class="user-avatar-fallback guest-avatar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="28" height="28"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg>
|
||||
</div>
|
||||
<h3 class="user-card-name">未登录</h3>
|
||||
<p class="user-card-desc">登录后解锁社区功能</p>
|
||||
<a href="/auth/login" class="btn-login">登录</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Community Stats -->
|
||||
<div class="sidebar-card stats-card">
|
||||
<h3 class="stats-title">社区动态</h3>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{.PostCount}}</span>
|
||||
<span class="stat-label">篇文章</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="sidebar-card links-card">
|
||||
<h3 class="links-title">快捷入口</h3>
|
||||
<a href="/posts" class="links-item">
|
||||
<svg class="links-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||||
浏览文章
|
||||
</a>
|
||||
{{if .IsLoggedIn}}
|
||||
<a href="/studio/write" class="links-item">
|
||||
<svg class="links-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
发布文章
|
||||
</a>
|
||||
<a href="/space" class="links-item">
|
||||
<svg class="links-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
个人空间
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{template "layout/footer.html" .}}
|
||||
|
||||
Reference in New Issue
Block a user