yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加program详情页

Browse Source
This commit is contained in:
云泽网
2025-05-17 01:38:45 +08:00
parent f6f8f6ac52
commit 4c6f7277b0
11 changed files with 3101 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/article/detail.php
+182 -99
View File
@@ -4,45 +4,36 @@
<div class="location">
<div class="container">
<div class="location-item">
<a href="{:url('index/index/index')}">首页</a>
<a href="/">首页</a>
<span>></span>
<a href="{:url('index/article/index')}">技术文章</a>
<a href="/index/article/index" id="cateLink"></a>
</div>
</div>
</div>
<div class="article-detail-container">
<div class="article-header">
<h1 class="article-title">{$article.title}</h1>
<h1 class="article-title" id="articleTitle"></h1>
<div class="article-meta">
<span class="article-author"><i class="fa fa-user"></i> {$article.author}</span>
<span class="article-date"><i class="fa fa-calendar"></i> {$article.create_time|date='Y-m-d H:i'}</span>
<span class="article-category"><i class="fa fa-folder"></i> {$cateName}</span>
<span class="article-views"><i class="fa fa-eye"></i> {$article.views} 阅读</span>
<span class="article-author"><i class="fa fa-user"></i> <span id="articleAuthor"></span></span>
<span class="article-date"><i class="fa fa-calendar"></i> <span id="articleDate"></span></span>
<span class="article-views"><i class="fa-solid fa-eye"></i> <span id="articleViews"></span> 阅读</span>
</div>
</div>
<div class="article-content">
{$article.content|raw}
<div class="article-content" id="articleContent">
</div>
<div class="article-tags">
<span class="tag-label">标签：</span>
{if !empty($article.tags)}
{foreach $article.tags as $tag}
<span class="tag-item">{$tag}</span>
{/foreach}
{else}
<span class="no-tags">暂无标签</span>
{/if}
<div id="articleTags"></div>
</div>
<div class="article-actions">
<div class="action-item like-btn">
<i class="fa fa-thumbs-up"></i>
<span class="action-text">点赞</span>
<span class="action-count">{$article.likes|default=0}</span>
<span class="action-count" id="articleLikes">0</span>
</div>
<div class="action-item share-btn">
<i class="fa fa-share-alt"></i>
@@ -51,77 +42,17 @@
</div>
<div class="article-navigation">
<div class="prev-article">
{if !empty($prevArticle)}
<a href="{:url('index/article/index', ['id' => $prevArticle.id])}">
<i class="fa fa-arrow-left"></i> 上一篇：{$prevArticle.title}
</a>
{else}
<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>
{/if}
<div class="prev-article" id="prevArticle">
</div>
<div class="next-article">
{if !empty($nextArticle)}
<a href="{:url('index/article/index', ['id' => $nextArticle.id])}">
下一篇：{$nextArticle.title} <i class="fa fa-arrow-right"></i>
</a>
{else}
<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>
{/if}
<div class="next-article" id="nextArticle">
</div>
</div>
<div class="related-articles">
<h3 class="related-title">相关推荐</h3>
<div class="related-list">
{if !empty($relatedArticles)}
{foreach $relatedArticles as $related}
<div class="related-item">
<a href="{:url('index/article/index', ['id' => $related.id])}">
<div class="related-image">
<img src="{$related.image}" alt="{$related.title}">
</div>
<div class="related-info">
<div class="related-item-title">{$related.title}</div>
<div class="related-item-desc">{$related.desc}</div>
</div>
</a>
</div>
{/foreach}
{else}
<div class="no-related">暂无相关文章</div>
{/if}
<div class="related-list" id="relatedArticles">
</div>
</div>
<!-- <div class="article-comments">
<h3 class="comments-title">评论区</h3>
<div class="comment-form">
<textarea placeholder="请输入您的评论..." class="comment-textarea"></textarea>
<button class="comment-submit">发表评论</button>
</div>
<div class="comment-list">
{if !empty($comments)}
{foreach $comments as $comment}
<div class="comment-item">
<div class="comment-avatar">
<img src="{$comment.avatar|default='/static/images/default-avatar.png'}" alt="用户头像">
</div>
<div class="comment-content">
<div class="comment-user">{$comment.username}</div>
<div class="comment-text">{$comment.content}</div>
<div class="comment-footer">
<span class="comment-time">{$comment.create_time|date='Y-m-d H:i'}</span>
<span class="comment-reply">回复</span>
</div>
</div>
</div>
{/foreach}
{else}
<div class="no-comments">暂无评论，快来抢沙发吧！</div>
{/if}
</div>
</div> -->
</div>
</div>
@@ -479,33 +410,159 @@
height: 36px;
}
}
.location-item a {
color: #000 !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 格式化日期
function formatDate(timestamp) {
const date = new Date(timestamp * 1000);
return date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
// 渲染文章详情
function renderArticleDetail(data) {
// 渲染分类链接
document.getElementById('cateLink').textContent = data.cateName;
// 渲染文章标题
document.getElementById('articleTitle').textContent = data.article.title;
// 渲染文章元信息
document.getElementById('articleAuthor').textContent = data.article.author;
document.getElementById('articleDate').textContent = formatDate(data.article.create_time);
document.getElementById('articleViews').textContent = data.article.views;
// 渲染文章内容
document.getElementById('articleContent').innerHTML = data.article.content;
// 渲染标签
const tagsContainer = document.getElementById('articleTags');
if (data.article.tags && data.article.tags.length > 0) {
tagsContainer.innerHTML = data.article.tags.map(tag =>
`<span class="tag-item">${tag}</span>`
).join('');
} else {
tagsContainer.innerHTML = '<span class="no-tags">暂无标签</span>';
}
// 渲染点赞数
document.getElementById('articleLikes').textContent = data.article.likes || 0;
// 渲染上一篇
const prevArticle = document.getElementById('prevArticle');
if (data.prevArticle) {
prevArticle.innerHTML = `
<a href="/index/article/detail?id=${data.prevArticle.id}">
<i class="fa fa-arrow-left"></i> 上一篇：${data.prevArticle.title}
</a>
`;
} else {
prevArticle.innerHTML = '<span class="disabled"><i class="fa fa-arrow-left"></i> 没有上一篇了</span>';
}
// 渲染下一篇
const nextArticle = document.getElementById('nextArticle');
if (data.nextArticle) {
nextArticle.innerHTML = `
<a href="/index/article/detail?id=${data.nextArticle.id}">
下一篇：${data.nextArticle.title} <i class="fa fa-arrow-right"></i>
</a>
`;
} else {
nextArticle.innerHTML = '<span class="disabled">没有下一篇了 <i class="fa fa-arrow-right"></i></span>';
}
// 渲染相关文章
const relatedArticles = document.getElementById('relatedArticles');
if (data.relatedArticles && data.relatedArticles.length > 0) {
relatedArticles.innerHTML = data.relatedArticles.map(article => `
<div class="related-item">
<a href="/index/article/detail?id=${article.id}">
<div class="related-image">
<img src="${article.image}" alt="${article.title}">
</div>
<div class="related-info">
<div class="related-item-title">${article.title}</div>
<div class="related-item-desc">${article.desc || ''}</div>
</div>
</a>
</div>
`).join('');
} else {
relatedArticles.innerHTML = '<div class="no-related">暂无相关文章</div>';
}
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 获取文章ID
const articleId = new URLSearchParams(window.location.search).get('id');
if (!articleId) {
alert('文章ID不存在');
return;
}
// 获取文章详情
fetch(`/index/article/detail?id=${articleId}`, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => {
console.log('Response status:', response.status);
console.log('Response headers:', response.headers);
return response.json();
})
.then(result => {
console.log('API response:', result);
if (result.code === 1) {
renderArticleDetail(result.data);
// 更新访问次数
updateArticleViews(articleId);
} else {
console.error('API error:', result.msg);
alert(result.msg || '获取文章详情失败');
}
})
.catch(error => {
console.error('获取文章详情失败:', error);
console.error('Error details:', {
message: error.message,
stack: error.stack
});
alert('获取文章详情失败，请检查网络连接或刷新页面重试');
});
// 点赞功能
const likeBtn = document.querySelector('.like-btn');
if (likeBtn) {
likeBtn.addEventListener('click', function () {
const articleId = '{$article.id}';
likeBtn.addEventListener('click', function() {
fetch('/index/article/like?id=' + articleId, {
method: 'POST'
})
.then(response => response.json())
.then(data => {
if (data.code === 1) {
const countElement = this.querySelector('.action-count');
let count = parseInt(countElement.textContent);
countElement.textContent = count + 1;
this.classList.add('liked');
this.style.color = '#f57005';
} else {
alert('点赞失败：' + data.msg);
}
})
.catch(error => {
console.error('点赞请求失败:', error);
});
.then(response => response.json())
.then(data => {
if (data.code === 1) {
const countElement = this.querySelector('.action-count');
let count = parseInt(countElement.textContent);
countElement.textContent = count + 1;
this.classList.add('liked');
this.style.color = '#f57005';
} else {
alert('点赞失败：' + data.msg);
}
})
.catch(error => {
console.error('点赞请求失败:', error);
});
});
}
@@ -529,5 +586,31 @@
});
});
});
// 更新文章访问次数
function updateArticleViews(articleId) {
fetch('/index/article/updateViews', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: articleId
})
})
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 更新成功，更新页面上的访问次数显示
const viewsElement = document.getElementById('articleViews');
if (viewsElement) {
viewsElement.textContent = result.data.views;
}
}
})
.catch(error => {
console.error('更新访问次数失败:', error);
});
}
</script>
{include file="component/foot" /}