157 lines
9.9 KiB
Handlebars
157 lines
9.9 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" />
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/global.css"}}" />
|
|
<link rel="stylesheet" type="text/css" href="{{asset "css/index.css"}}" />
|
|
<title>{{meta_title}}</title>
|
|
{{ghost_head}}
|
|
</head>
|
|
<body class="{{body_class}}">
|
|
|
|
{{!-- 统一的固定头部容器 --}}
|
|
<header class="site-header-container">
|
|
{{!-- 1. 公告栏：仅在后台有内容时渲染 --}}
|
|
{{#if @site.announcement}}
|
|
<div class="gh-announcement">
|
|
{{announcement}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{!-- 2. 导航栏 --}}
|
|
<nav class="border-b border-gray-100 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
|
|
<div class="container mx-auto px-4 h-16">
|
|
<div class="flex items-center justify-between h-full md:grid md:grid-cols-3 md:gap-4">
|
|
|
|
{{!-- Logo 区域 --}}
|
|
<a href="{{@site.url}}" class="relative z-[41] flex-shrink-0">
|
|
{{#if @site.logo}}
|
|
<img src="{{@site.logo}}" alt="{{@site.title}}" class="h-8 w-auto">
|
|
{{else}}
|
|
<span class="text-xl font-bold text-blue-600">{{@site.title}}</span>
|
|
{{/if}}
|
|
</a>
|
|
|
|
{{!-- 桌面端菜单 --}}
|
|
<div class="hidden md:flex items-center justify-center">
|
|
{{navigation}}
|
|
</div>
|
|
|
|
{{!-- 右侧功能区 --}}
|
|
<div class="flex items-center justify-end gap-3">
|
|
<button data-ghost-search class="p-2 text-gray-600 hover:text-blue-600 transition-colors focus:outline-none" aria-label="搜索">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="hidden md:flex items-center gap-3">
|
|
{{#if @member}}
|
|
<a href="#/portal/account" class="flex items-center gap-2 px-3 py-2 rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200/60 hover:border-blue-300 transition-all">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-gray-800">我的档案</span>
|
|
</a>
|
|
{{else}}
|
|
<a href="#/portal/signin/" class="text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors">登录</a>
|
|
<a href="#/portal/signup/" class="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 text-white font-semibold shadow-md text-sm transition-all">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
|
|
</svg>
|
|
注册
|
|
</a>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<button id="mobile-menu-trigger" class="md:hidden relative z-[41] p-2 text-gray-600 hover:text-gray-900 focus:outline-none -mr-2" aria-label="打开菜单" type="button">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
{{!-- 页面主体内容：现在内容会自动排在 sticky header 下方，无需手动 pt-16 --}}
|
|
<main class="site-main">
|
|
{{{body}}}
|
|
{{> "footer"}}
|
|
</main>
|
|
|
|
{{!-- 移动端菜单模板 --}}
|
|
<div id="mobile-drawer-template" style="display: none !important;">
|
|
<div id="mobile-sidebar-overlay" class="fixed inset-0 md:hidden">
|
|
<div class="drawer-backdrop absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>
|
|
<div class="drawer-panel absolute top-0 right-0 h-full w-[85%] max-w-sm bg-white shadow-2xl translate-x-full transition-transform duration-300 ease-out overflow-y-auto">
|
|
<div class="sticky top-0 bg-white z-20 px-5 h-16 border-b border-gray-100 flex justify-between items-center">
|
|
<span class="font-bold text-lg text-gray-800">菜单导航</span>
|
|
<button id="drawer-close-btn" class="p-2 -mr-2 text-gray-400 hover:text-gray-600 transition-colors" aria-label="关闭菜单">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="p-5 space-y-6 pb-24">
|
|
<section>
|
|
<h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">页面导航</h3>
|
|
<div class="mobile-nav-grid grid grid-cols-2 gap-3">
|
|
{{navigation}}
|
|
</div>
|
|
</section>
|
|
<hr class="border-gray-100">
|
|
<section>
|
|
{{#if @member}}
|
|
<div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="overflow-hidden">
|
|
<p class="font-bold text-gray-800 truncate">会员</p>
|
|
<a href="#/portal/account" class="drawer-link text-xs text-blue-600 hover:underline">个人中心</a>
|
|
</div>
|
|
</div>
|
|
<a href="#/portal/signout" class="flex items-center justify-center gap-2 w-full py-2 text-sm text-red-600 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-red-50 transition-colors">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
|
</svg>
|
|
退出登录
|
|
</a>
|
|
</div>
|
|
{{else}}
|
|
<div class="space-y-3">
|
|
<a href="#/portal/signin/" class="drawer-link flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-white text-gray-800 font-semibold border-2 border-gray-200 hover:border-blue-500 hover:text-blue-600 transition-all mb-3">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
|
|
</svg>
|
|
登录
|
|
</a>
|
|
<a href="#/portal/signup/" class="drawer-link flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold shadow-lg hover:from-blue-700 hover:shadow-xl transition-all">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
|
</svg>
|
|
立即注册
|
|
</a>
|
|
</div>
|
|
{{/if}}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ghost_foot}}
|
|
<script src="{{asset "js/timer.js"}}"></script>
|
|
<script src="{{asset "js/carousel.js"}}"></script>
|
|
<script src="{{asset "js/mobile-menu.js"}}"></script>
|
|
</body>
|
|
</html> |