<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的博客</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #18181B;
--secondary: #3F3F46;
--accent: #EC4899;
--bg: #FAFAFA;
--card: #FFFFFF;
--fg: #09090B;
--muted: #64748B;
--border: #E4E4E7;
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Libre Baskerville', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(250, 250, 250, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
}
.logo {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
letter-spacing: -0.02em;
}
.logo span { color: var(--accent); }
nav {
display: flex;
gap: 2rem;
align-items: center;
position: relative;
}
nav a {
color: var(--muted);
text-decoration: none;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 200ms ease;
position: relative;
padding-bottom: 4px;
}
.nav-indicator {
position: absolute;
bottom: -4px;
height: 2px;
background: var(--accent);
border-radius: 1px;
transition: left 300ms ease, width 300ms ease;
pointer-events: none;
}
.hero {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 2rem 0.75rem;
text-align: center;
}
.hero h1 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.15;
color: var(--primary);
margin-bottom: 0.75rem;
letter-spacing: -0.03em;
}
.hero h1 em {
font-style: italic;
color: var(--accent);
}
.hero p {
font-size: 1.125rem;
color: var(--muted);
max-width: 560px;
margin: 0 auto 1rem;
line-height: 1.8;
}
.hero-line {
width: 48px;
height: 3px;
background: var(--accent);
margin: 0 auto;
border-radius: 2px;
}
.section-label {
font-family: var(--font-heading);
font-size: 0.875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.25rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 2rem;
}
.articles-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
.articles-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.articles-header h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 600;
color: var(--primary);
}
.articles-count {
font-size: 0.875rem;
color: var(--muted);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1rem;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.25rem;
transition: transform 250ms ease, box-shadow 250ms ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--accent), #F472B6);
opacity: 0;
transition: opacity 250ms ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.card:hover::before { opacity: 1; }
.card-category {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
background: rgba(236, 72, 153, 0.08);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 1rem;
font-family: var(--font-heading);
font-weight: 600;
}
.card h3 {
font-family: var(--font-heading);
font-size: 1.375rem;
font-weight: 600;
color: var(--primary);
line-height: 1.3;
margin-bottom: 0.75rem;
}
.card p {
font-size: 0.9375rem;
color: var(--muted);
line-height: 1.7;
margin-bottom: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary);
text-decoration: none;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.02em;
transition: color 200ms ease, gap 200ms ease;
}
.card-link:hover {
color: var(--accent);
gap: 0.75rem;
}
.card-link svg {
width: 16px;
height: 16px;
transition: transform 200ms ease;
}
.card-link:hover svg { transform: translateX(2px); }
.card-time {
font-size: 0.8125rem;
color: var(--muted);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--muted);
}
.empty-state svg {
width: 48px;
height: 48px;
margin-bottom: 1rem;
opacity: 0.4;
}
.empty-state p {
font-size: 1.125rem;
font-family: var(--font-heading);
}
footer {
border-top: 1px solid var(--border);
padding: 2rem;
text-align: center;
color: var(--muted);
font-size: 0.8125rem;
}
footer a {
color: var(--accent);
text-decoration: none;
}
@media (max-width: 768px) {
.header-inner { height: 48px; }
.hero { padding: 2rem 1.5rem 1rem; }
.container { padding: 0 1.5rem 3rem; }
.grid { grid-template-columns: 1fr; gap: 1.5rem; }
nav { gap: 1.25rem; }
nav a { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}
.fade-in {
opacity: 0;
transform: translateY(16px);
animation: fadeIn 500ms ease forwards;
}
body {
animation: pageIn 400ms ease;
}
@keyframes pageIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
to { opacity: 1; transform: translateY(0); }
}
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 80ms; }
.card:nth-child(3) { animation-delay: 160ms; }
.card:nth-child(4) { animation-delay: 240ms; }
.card:nth-child(5) { animation-delay: 320ms; }
.card:nth-child(6) { animation-delay: 400ms; }
</style>
</head>
<body>
<header>
<div class="header-inner">
<a href="index.html" class="logo">Blog<span>.</span></a>
<nav id="mainNav">
<a href="index.html" class="active">首页</a>
<a href="admin.html">管理</a>
<div class="nav-indicator" id="navIndicator"></div>
</nav>
</div>
</header>
<section class="hero">
<h1>思考，记录，<em>分享</em></h1>
<p>用文字丈量世界，以代码编织梦想。这里记录技术探索与生活感悟。</p>
<div class="hero-line"></div>
</section>
<main class="container">
<div class="articles-header">
<div>
<div class="section-label">最新文章</div>
<h2>近期发布</h2>
</div>
<div class="articles-count" id="count"></div>
</div>
<div class="grid" id="list"></div>
</main>
<footer>
<p>© 2025 我的博客 — 使用 Cormorant Garamond & Libre Baskerville 排版</p>
</footer>
<script>
const nav = document.getElementById('mainNav')
const indicator = document.getElementById('navIndicator')
const navLinks = nav.querySelectorAll('a')
function moveIndicator(el) {
const navRect = nav.getBoundingClientRect()
const elRect = el.getBoundingClientRect()
indicator.style.left = (elRect.left - navRect.left) + 'px'
indicator.style.width = elRect.width + 'px'
}
navLinks.forEach(link => {
link.addEventListener('mouseenter', () => {
moveIndicator(link)
navLinks.forEach(l => l.classList.remove('active'))
link.classList.add('active')
})
})
nav.addEventListener('mouseleave', () => {
const current = nav.querySelector('a[href="index.html"]')
moveIndicator(current)
navLinks.forEach(l => l.classList.remove('active'))
current.classList.add('active')
})
moveIndicator(nav.querySelector('a.active'))
fetch('/api/articles').then(r => r.json()).then(res => {
const data = res.data || []
document.getElementById('count').textContent = data.length + ' 篇文章'
if (data.length === 0) {
document.getElementById('list').innerHTML = `
<div class="empty-state" style="grid-column:1/-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h3m-3 2.25h3m-6.75 2.25h9.75a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H4.5a2.25 2.25 0 00-2.25 2.25v10.5a2.25 2.25 0 002.25 2.25z"/></svg>
<p>暂无文章，敬请期待</p>
</div>`
return
}
let html = ''
data.forEach(item => {
const time = item.create_time ? new Date(item.create_time).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : ''
html += `
<article class="card fade-in">
<div class="card-category">${item.category || '未分类'}</div>
<h3>${item.title}</h3>
<p>${item.content.substring(0, 120)}...</p>
<a href="detail.html?id=${item.id}" class="card-link" aria-label="阅读 ${item.title} 的全文">
阅读全文
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
${time ? `<div class="card-time">${time}</div>` : ''}
</article>`
})
document.getElementById('list').innerHTML = html
}).catch(() => {
document.getElementById('list').innerHTML = `
<div class="empty-state" style="grid-column:1/-1">
<p>无法连接服务器，请检查后端是否启动</p>
</div>`
})
</script>
</body>
</html>