305 lines
6.4 KiB
Plaintext
305 lines
6.4 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>我的博客 - 首页</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #f8f9fa;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid #eaeaea;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
h2 {
|
||
color: #2c3e50;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.auth-links {
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.auth-links a {
|
||
color: #3498db;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.auth-links a:hover {
|
||
background-color: #f0f7fd;
|
||
}
|
||
|
||
.welcome-message {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: #2c3e50;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.welcome-message a {
|
||
color: #e74c3c;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.welcome-message a:hover {
|
||
background-color: #fdeaea;
|
||
}
|
||
|
||
.main-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.posts-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.posts-section h3 {
|
||
color: #2c3e50;
|
||
font-size: 24px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #3498db;
|
||
}
|
||
|
||
.post-item {
|
||
margin-bottom: 25px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #ecf0f1;
|
||
}
|
||
|
||
.post-item:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.post-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
margin-bottom: 8px;
|
||
text-decoration: none;
|
||
display: block;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.post-title:hover {
|
||
color: #3498db;
|
||
}
|
||
|
||
.post-meta {
|
||
font-size: 14px;
|
||
color: #7f8c8d;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
gap: 15px;
|
||
}
|
||
|
||
.post-content {
|
||
color: #555;
|
||
line-height: 1.6;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.post-excerpt {
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.links-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
height: fit-content;
|
||
}
|
||
|
||
.links-section h3 {
|
||
color: #2c3e50;
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #e74c3c;
|
||
}
|
||
|
||
.link-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.link-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.link-item a {
|
||
color: #3498db;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
padding: 8px 12px;
|
||
display: block;
|
||
border-radius: 4px;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.link-item a:hover {
|
||
background-color: #f0f7fd;
|
||
border-color: #3498db;
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.no-content {
|
||
text-align: center;
|
||
color: #7f8c8d;
|
||
font-style: italic;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.read-more {
|
||
color: #3498db;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.read-more:hover {
|
||
color: #2980b9;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
}
|
||
|
||
.main-content {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.posts-section,
|
||
.links-section {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<%
|
||
// 安全地获取变量，提供默认值
|
||
var posts = locals.posts || [];
|
||
var links = locals.links || [];
|
||
var user = locals.user || null;
|
||
%>
|
||
|
||
<header>
|
||
<h2>欢迎来到博客系统</h2>
|
||
<% if (user) { %>
|
||
<div class="welcome-message">
|
||
<span>欢迎，<%= user.username %>！</span>
|
||
<a href="/userInfo">个人中心</a>
|
||
<a href="/logout">退出登录</a>
|
||
</div>
|
||
<% } else { %>
|
||
<div class="auth-links">
|
||
<a href="/login">登录</a>
|
||
<a href="/register">注册</a>
|
||
</div>
|
||
<% } %>
|
||
</header>
|
||
<div class="main-content">
|
||
<!-- 左侧：博客文章列表 -->
|
||
<div class="posts-section">
|
||
<h3>最新文章</h3>
|
||
<% if (posts && posts.length > 0) { %>
|
||
<% posts.forEach(function(post) { %>
|
||
<div class="post-item">
|
||
<a href="#" class="post-title"><%= post.title || '无标题' %></a>
|
||
<div class="post-meta">
|
||
<span>作者：<%= post.author || '未知作者' %></span>
|
||
<span>分类：<%= post.category || '未分类' %></span>
|
||
<span>发布时间：<%= new Date(post.createdAt).toLocaleDateString('zh-CN') %></span>
|
||
</div>
|
||
<div class="post-content">
|
||
<div class="post-excerpt">
|
||
<%
|
||
var content = post.content || '';
|
||
var excerpt = content.length > 150 ? content.substring(0, 150) + '...' : content;
|
||
%>
|
||
<%= excerpt %>
|
||
</div>
|
||
</div>
|
||
<a href="/posts/<%= post.id %>" class="read-more">阅读全文 →</a>
|
||
</div>
|
||
<% }); %>
|
||
<% } else { %>
|
||
<div class="no-content">
|
||
<p>暂无文章</p>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
|
||
<!-- 右侧：友情链接 -->
|
||
<div class="links-section">
|
||
<h3>友情链接</h3>
|
||
<% if (links && links.length > 0) { %>
|
||
<ul class="link-list">
|
||
<% links.forEach(function(link) { %>
|
||
<li class="link-item">
|
||
<a href="<%= link.url %>" target="_blank" rel="noopener noreferrer">
|
||
<%= link.name %>
|
||
</a>
|
||
</li>
|
||
<% }); %>
|
||
</ul>
|
||
<% } else { %>
|
||
<div class="no-content">
|
||
<p>暂无友情链接</p>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|