|
|
<!DOCTYPE html> |
|
|
<html lang="zh"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>{% block title %}个人博客{% endblock %}</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-blue: #6391C5; |
|
|
--light-blue: #B3CFEF; |
|
|
--warm-cream: #FEEEDA; |
|
|
--soft-purple: #C5CDFD; |
|
|
--text-dark: #2C3E50; |
|
|
--bg-light: #F8FAFC; |
|
|
--sidebar-width: 280px; |
|
|
--header-height: 70px; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
line-height: 1.6; |
|
|
color: var(--text-dark); |
|
|
background-color: var(--bg-light); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
.app-container { |
|
|
display: flex; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
width: var(--sidebar-width); |
|
|
height: 100vh; |
|
|
position: fixed; |
|
|
left: 0; |
|
|
top: 0; |
|
|
background: white; |
|
|
border-right: 2px solid rgba(99, 145, 197, 0.1); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
transition: transform 0.3s ease; |
|
|
z-index: 100; |
|
|
} |
|
|
|
|
|
.sidebar-header { |
|
|
padding: 2rem; |
|
|
border-bottom: 2px solid rgba(99, 145, 197, 0.1); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
text-decoration: none; |
|
|
color: var(--primary-blue); |
|
|
font-size: 1.5rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 2rem; |
|
|
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.logo:hover i { |
|
|
transform: rotate(-10deg); |
|
|
} |
|
|
|
|
|
.sidebar-content { |
|
|
flex: 1; |
|
|
padding: 2rem 1rem; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.nav-group { |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.nav-group-title { |
|
|
font-size: 0.875rem; |
|
|
font-weight: 600; |
|
|
color: #64748B; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
padding: 0 1rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
padding: 0.875rem 1rem; |
|
|
color: var(--text-dark); |
|
|
text-decoration: none; |
|
|
border-radius: 12px; |
|
|
transition: all 0.3s ease; |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.nav-link::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
width: 4px; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, var(--primary-blue), var(--light-blue)); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background: linear-gradient(to right, rgba(99, 145, 197, 0.1), transparent); |
|
|
} |
|
|
|
|
|
.nav-link:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.nav-link i { |
|
|
font-size: 1.25rem; |
|
|
color: var(--primary-blue); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover i { |
|
|
transform: translateX(4px); |
|
|
} |
|
|
|
|
|
.nav-link span { |
|
|
font-size: 1.0625rem; |
|
|
} |
|
|
|
|
|
.sidebar-footer { |
|
|
padding: 1.5rem; |
|
|
border-top: 2px solid rgba(99, 145, 197, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.top-header { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: var(--header-height); |
|
|
background: white; |
|
|
border-bottom: 2px solid rgba(99, 145, 197, 0.1); |
|
|
padding: 0 1.5rem; |
|
|
z-index: 99; |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
height: 100%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.header-nav { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
color: var(--primary-blue); |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
padding: 0.5rem; |
|
|
border-radius: 8px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.menu-toggle:hover { |
|
|
background: rgba(99, 145, 197, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.main-content { |
|
|
flex: 1; |
|
|
margin-left: var(--sidebar-width); |
|
|
padding: 2rem; |
|
|
position: relative; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.top-header { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.menu-toggle { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
margin-left: 0; |
|
|
margin-top: var(--header-height); |
|
|
padding: 1.5rem; |
|
|
max-width: 100vh; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.overlay { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
backdrop-filter: blur(4px); |
|
|
z-index: 98; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.overlay.active { |
|
|
display: block; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--light-blue); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--primary-blue); |
|
|
} |
|
|
</style> |
|
|
{% block extra_css %}{% endblock %} |
|
|
</head> |
|
|
<body> |
|
|
<div class="app-container"> |
|
|
|
|
|
<header class="top-header"> |
|
|
<div class="header-content"> |
|
|
<button class="menu-toggle" id="menuToggle"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<a href="{{ url_for('main.index') }}" class="logo"> |
|
|
<i class="fas fa-feather"></i> |
|
|
<span>博客</span> |
|
|
</a> |
|
|
<nav class="header-nav"> |
|
|
<a href="{{ url_for('main.index') }}" class="nav-link"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>首页</span> |
|
|
</a> |
|
|
{% if session.get('logged_in') %} |
|
|
<a href="{{ url_for('admin.dashboard') }}" class="nav-link"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>管理</span> |
|
|
</a> |
|
|
{% endif %} |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="overlay" id="overlay"></div> |
|
|
|
|
|
|
|
|
<aside class="sidebar" id="sidebar"> |
|
|
<div class="sidebar-header"> |
|
|
<a href="{{ url_for('main.index') }}" class="logo"> |
|
|
<i class="fas fa-feather"></i> |
|
|
<span>Wisdom Hub</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="sidebar-content"> |
|
|
<nav class="nav-group"> |
|
|
<h3 class="nav-group-title">导航</h3> |
|
|
<div class="nav-links"> |
|
|
<a href="{{ url_for('main.index') }}" class="nav-link"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>首页</span> |
|
|
</a> |
|
|
{% if session.get('logged_in') %} |
|
|
<a href="{{ url_for('admin.dashboard') }}" class="nav-link"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>管理中心</span> |
|
|
</a> |
|
|
{% endif %} |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
{% if session.get('logged_in') %} |
|
|
<nav class="nav-group"> |
|
|
<h3 class="nav-group-title">内容管理</h3> |
|
|
<div class="nav-links"> |
|
|
<a href="{{ url_for('admin.editor') }}" class="nav-link"> |
|
|
<i class="fas fa-edit"></i> |
|
|
<span>写文章</span> |
|
|
</a> |
|
|
</div> |
|
|
</nav> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
<div class="sidebar-footer"> |
|
|
{% if session.get('logged_in') %} |
|
|
<form action="{{ url_for('admin.login') }}" method="POST" style="width: 100%;"> |
|
|
<button type="submit" class="nav-link" style="width: 100%; text-align: left; background: none; border: none; cursor: pointer;"> |
|
|
<i class="fas fa-sign-out-alt"></i> |
|
|
<span>退出登录</span> |
|
|
</button> |
|
|
</form> |
|
|
{% else %} |
|
|
<a href="{{ url_for('admin.login') }}" class="nav-link"> |
|
|
<i class="fas fa-sign-in-alt"></i> |
|
|
<span>登录</span> |
|
|
</a> |
|
|
{% endif %} |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="main-content"> |
|
|
{% block content %}{% endblock %} |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const menuToggle = document.getElementById('menuToggle'); |
|
|
const sidebar = document.getElementById('sidebar'); |
|
|
const overlay = document.getElementById('overlay'); |
|
|
|
|
|
function toggleMenu() { |
|
|
sidebar.classList.toggle('active'); |
|
|
overlay.classList.toggle('active'); |
|
|
document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : ''; |
|
|
} |
|
|
|
|
|
menuToggle.addEventListener('click', toggleMenu); |
|
|
overlay.addEventListener('click', toggleMenu); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
if (window.innerWidth > 768 && sidebar.classList.contains('active')) { |
|
|
sidebar.classList.remove('active'); |
|
|
overlay.classList.remove('active'); |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
{% block extra_js %}{% endblock %} |
|
|
</body> |
|
|
</html> |
