349 lines
12 KiB
Plaintext
349 lines
12 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>
|
|
.post-detail {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.post-header {
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.post-title {
|
|
font-size: 24px;
|
|
color: #2c3e50;
|
|
margin-bottom: 10px;
|
|
}
|
|
.post-meta {
|
|
color: #7f8c8d;
|
|
font-size: 14px;
|
|
}
|
|
.post-content {
|
|
line-height: 1.8;
|
|
color: #333;
|
|
margin-bottom: 30px;
|
|
}
|
|
.back-link {
|
|
display: inline-block;
|
|
margin-top: 20px;
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 新增的收藏按钮样式 */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 20px 0;
|
|
align-items: center;
|
|
}
|
|
.favorite-btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.favorite-btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.favorite-btn.favorited {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.favorite-btn.not-favorited {
|
|
background-color: #e2e3e5;
|
|
color: #383d41;
|
|
}
|
|
.favorite-btn i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 评论区域样式优化 */
|
|
#comments-section {
|
|
margin-top: 40px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
#comments-section h3 {
|
|
font-size: 20px;
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.comment-item {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding: 15px 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
.comment-author {
|
|
font-weight: bold;
|
|
color: #3498db;
|
|
margin-right: 8px;
|
|
}
|
|
.comment-content {
|
|
margin: 8px 0;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
.comment-meta {
|
|
font-size: 12px;
|
|
color: #95a5a6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.no-comments {
|
|
color: #95a5a6;
|
|
font-style: italic;
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 评论表单样式 */
|
|
#commentForm {
|
|
margin-top: 30px;
|
|
}
|
|
#commentContent {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
min-height: 100px;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
transition: border-color 0.3s;
|
|
}
|
|
#commentContent:focus {
|
|
border-color: #3498db;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
|
}
|
|
.submit-comment {
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.3s;
|
|
margin-top: 10px;
|
|
}
|
|
.submit-comment:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
.login-prompt {
|
|
color: #7f8c8d;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
}
|
|
.login-prompt a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
}
|
|
.login-prompt a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
<!-- 引入Font Awesome图标库 -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="post-detail">
|
|
<div class="post-header">
|
|
<h1 class="post-title"><%= post.title %></h1>
|
|
<div class="post-meta">
|
|
<span>作者：<%= post.author %></span> |
|
|
<span>分类：<%= post.category %></span> |
|
|
<span>发布时间：<%= new Date(post.createdAt).toLocaleDateString('zh-CN') %></span>
|
|
</div>
|
|
</div>
|
|
<div class="post-content">
|
|
<%= post.content %>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<% if (user) { %>
|
|
<button id="favoriteBtn" class="favorite-btn">
|
|
<i class="far fa-heart"></i>
|
|
<span>收藏</span>
|
|
</button>
|
|
<% } %>
|
|
<a href="/" class="back-link">← 返回首页</a>
|
|
</div>
|
|
|
|
<div id="comments-section">
|
|
<h3><i class="far fa-comments"></i> 评论区</h3>
|
|
<div id="comments-list">加载中...</div>
|
|
|
|
<% if (user) { %>
|
|
<form id="commentForm">
|
|
<textarea id="commentContent" placeholder="写下你的评论..."></textarea>
|
|
<button type="submit" class="submit-comment">发表评论</button>
|
|
</form>
|
|
<% } else { %>
|
|
<div class="login-prompt">
|
|
请 <a href="/login">登录</a> 后发表评论
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
|
|
<script>
|
|
const postId = "<%= post._id %>";
|
|
const userId = "<%= user ? user._id : '' %>";
|
|
const isUser = Boolean(<%= user ? 1 : 0 %>);
|
|
|
|
// 收藏按钮逻辑
|
|
if (isUser) {
|
|
fetch('/user/profile')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const isFav = data.favorites && data.favorites.some(fav => fav._id === postId);
|
|
const btn = document.getElementById('favoriteBtn');
|
|
btn.innerHTML = `<i class="${isFav ? 'fas' : 'far'} fa-heart"></i> <span>${isFav ? '已收藏' : '收藏'}</span>`;
|
|
btn.className = isFav ? 'favorite-btn favorited' : 'favorite-btn not-favorited';
|
|
|
|
btn.onclick = function() {
|
|
fetch(`/posts/${postId}/${isFav ? 'unfavorite' : 'favorite'}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(res => res.json())
|
|
.then(r => {
|
|
if (r.success) {
|
|
// 更新按钮状态而不刷新页面
|
|
const newIsFav = !isFav;
|
|
btn.innerHTML = `<i class="${newIsFav ? 'fas' : 'far'} fa-heart"></i> <span>${newIsFav ? '已收藏' : '收藏'}</span>`;
|
|
btn.className = newIsFav ? 'favorite-btn favorited' : 'favorite-btn not-favorited';
|
|
} else {
|
|
alert(r.message || '操作失败');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error:', err);
|
|
alert('网络错误，请重试');
|
|
});
|
|
};
|
|
} else {
|
|
console.error('获取用户资料失败:', data.message);
|
|
document.getElementById('favoriteBtn').textContent = '收藏功能暂不可用';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error fetching user profile:', err);
|
|
document.getElementById('favoriteBtn').textContent = '收藏功能暂不可用';
|
|
});
|
|
}
|
|
|
|
// 加载评论
|
|
function loadComments() {
|
|
fetch(`/posts/${postId}/comments`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (data.comments.length === 0) {
|
|
document.getElementById('comments-list').innerHTML = '<div class="no-comments">暂无评论，快来发表第一条评论吧~</div>';
|
|
return;
|
|
}
|
|
|
|
const list = data.comments.map(c => `
|
|
<div class="comment-item">
|
|
<div>
|
|
<span class="comment-author">${c.author.username}</span>
|
|
<span class="comment-content">${c.content}</span>
|
|
</div>
|
|
<div class="comment-meta">
|
|
<span>${new Date(c.createdAt).toLocaleString('zh-CN')}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
document.getElementById('comments-list').innerHTML = list;
|
|
} else {
|
|
document.getElementById('comments-list').innerHTML = '<div class="no-comments">评论加载失败，请刷新重试</div>';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error loading comments:', err);
|
|
document.getElementById('comments-list').innerHTML = '<div class="no-comments">评论加载失败，请检查网络</div>';
|
|
});
|
|
}
|
|
|
|
loadComments();
|
|
|
|
// 发表评论
|
|
if (isUser) {
|
|
const commentForm = document.getElementById('commentForm');
|
|
const commentContent = document.getElementById('commentContent');
|
|
|
|
commentForm.onsubmit = function(e) {
|
|
e.preventDefault();
|
|
const content = commentContent.value.trim();
|
|
|
|
if (!content) {
|
|
alert('评论内容不能为空');
|
|
commentContent.focus();
|
|
return;
|
|
}
|
|
|
|
// 禁用提交按钮防止重复提交
|
|
const submitBtn = commentForm.querySelector('button[type="submit"]');
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = '提交中...';
|
|
|
|
fetch(`/posts/${postId}/comments`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ content })
|
|
})
|
|
.then(res => res.json())
|
|
.then(r => {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = '发表评论';
|
|
|
|
if (r.success) {
|
|
commentContent.value = '';
|
|
loadComments();
|
|
|
|
// 滚动到新评论位置
|
|
setTimeout(() => {
|
|
const commentsList = document.getElementById('comments-list');
|
|
commentsList.scrollTop = commentsList.scrollHeight;
|
|
}, 100);
|
|
} else {
|
|
alert(r.message || '发表评论失败');
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error submitting comment:', err);
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = '发表评论';
|
|
alert('网络错误，请重试');
|
|
});
|
|
};
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|