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

更新前端首页显示文章

Browse Source
This commit is contained in:
云泽网
2025-05-12 01:52:39 +08:00
parent b1356231d4
commit f55b0068a2
20 changed files with 624 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/index/view/component/main.php
+189 -128
View File
@@ -1,75 +1,28 @@
<main class="main-content">
<div class="container">
<!-- 文章模块 -->
<!-- 站点资讯模块 -->
<div class="core-block core-module" id="opencourse" style="order: 3;">
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
<h3 class="ModuleTitle_title">站点新闻</h3>
<div class="ModuleTitle_subtitle">新鲜资讯 尽在掌握</div>
<h3 class="ModuleTitle_title">站点资讯</h3>
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
<!-- 分类标签将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<div class="more-btn">更多</div>
</div>
<div class="product-list">
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/ff/b8/ff18d73bec1040abf3d7bc7bffb532b8.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover"><!----></div>
<div class="introduction">
<div class="title">闪客 · 怎么理解 AI？</div>
<div class="subtitle">闪客 | B 站知名科普 UP 主</div>
</div>
<div class="bottom">
<div class="desc">1025人学过</div>
<!-- <div class="btn">观看： 123人</div> -->
</div>
</div>
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/76/cd/762ee7f34a76fbff61d20aae313833cd.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover">
</div>
<div class="introduction">
<div class="title">多模态对话引擎实战</div>
<div class="subtitle">吴桐 | 网易云信音视频技术负责人，流媒体首席架构师</div>
</div>
<div class="bottom">
<div class="desc">380人学过</div>
<!-- <div class="btn">观看： 123人</div> -->
</div>
</div>
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/4y/da/4yyfb232bfbfbdcc6ed827c16b04a9da.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover"><!----></div>
<div class="introduction">
<div class="title">极客视点</div>
<div class="subtitle">极客时间 | 编辑部</div>
</div>
<div class="bottom">
<div class="desc">12.4w人学过</div>
<!-- <div class="btn">观看： 123人</div> -->
</div>
</div>
<div class="opencourse product-item">
<div class="video"><img data-v-4477fdbc=""
src="https://static001.geekbang.org/resource/image/0f/69/0f95b62cf7yy6d6yy674f090d063b669.jpg?x-oss-process=image/resize,w_423,h_238/format,webp"
alt="" class="cover"><!----></div>
<div class="introduction">
<div class="title">周志明的软件架构课</div>
<div class="subtitle">周志明 | 博士，远光软件研究院院长，《深入理解Java虚拟机》《凤凰架构》等书作者</div>
</div>
<div class="bottom">
<div class="desc">6.0w人学过</div>
<!-- <div class="btn">观看： 123人</div>d -->
</div>
</div>
<div class="product-list" id="webArticlesList">
<!-- 文章将通过JavaScript动态加载 -->
</div>
</div>
<!-- 文章模块 -->
<div class="core-block core-module" id="opencourse" style="order: 3;">
<!-- 技术文章模块 -->
<div class="core-block core-module" id="techArticles" style="order: 3;">
<div class="module-header">
<div>
<div class="ModuleTitle_titleWrapper">
@@ -77,96 +30,204 @@
<div class="tab-container">
<div class="tab-header">
<div class="tab-item active" data-tab="all">全部</div>
{foreach $articleList as $cateName => $articles}
<div class="tab-item" data-tab="{$cateName}">{$cateName}</div>
{/foreach}
<!-- 分类标签将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<div class="more-btn">更多</div>
</div>
<div class="product-list">
<!-- 全部文章 -->
<div class="tab-content active" data-tab="all">
{foreach $articleList as $cateName => $articles}
{foreach $articles as $article}
<div class="opencourse product-item"
onclick="window.open('{:url('article/detail')}?id={$article.id}', '_blank')">
<div class="video">
<img src="{$article.image}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">{$article.title}</div>
<div class="publishdate">{$article.publishdate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye "></i><span style="margin-left: 5px;">{$article.views}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">{$article.author}</span></div>
</div>
</div>
{/foreach}
{/foreach}
</div>
<!-- 分类文章 -->
{foreach $articleList as $cateName => $articles}
<div class="tab-content" data-tab="{$cateName}">
{foreach $articles as $article}
<div class="opencourse product-item"
onclick="window.open('{:url('article/detail')}?id={$article.id}', '_blank')">
<div class="video">
<img src="{$article.image}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">{$article.title}</div>
<div class="publishdate">{$article.publishdate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye "></i><span style="margin-left: 5px;">{$article.views}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">{$article.author}</span></div>
</div>
</div>
{/foreach}
</div>
{/foreach}
<div class="product-list" id="techArticlesList">
<!-- 文章将通过JavaScript动态加载 -->
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取所有tab项和内容
const tabItems = document.querySelectorAll('.tab-item');
const tabContents = document.querySelectorAll('.tab-content');
// 加载站点新闻
function loadWebArticles() {
fetch('/index/index/siteNewslist')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 渲染分类标签
if (result.categories) {
renderCategoryTabs(result.categories, 'opencourse');
}
// 渲染文章列表
if (result.articles && result.articles.length > 0) {
renderWebArticles(result.articles, 'webArticlesList');
} else {
showNoData('webArticlesList');
}
} else {
showNoData('webArticlesList');
}
})
.catch(error => {
console.error('请求失败:', error);
showError('webArticlesList');
});
}
// 为每个tab项添加点击事件
// 加载技术文章
function loadTechArticles() {
fetch('/index/index/technicalArticleslist')
.then(response => response.json())
.then(result => {
if (result.code === 1) {
// 渲染分类标签
if (result.categories) {
renderCategoryTabs(result.categories, 'techArticles');
}
// 渲染文章列表
if (result.articles && result.articles.length > 0) {
renderWebArticles(result.articles, 'techArticlesList');
} else {
showNoData('techArticlesList');
}
} else {
showNoData('techArticlesList');
}
})
.catch(error => {
console.error('请求失败:', error);
showError('techArticlesList');
});
}
// 显示无数据提示
function showNoData(containerId) {
document.getElementById(containerId).innerHTML = '<div class="no-data">暂无数据</div>';
}
// 显示错误提示
function showError(containerId) {
document.getElementById(containerId).innerHTML = '<div class="error-message">网络请求失败</div>';
}
// 渲染分类标签
function renderCategoryTabs(categories, moduleId) {
const tabHeader = document.querySelector(`#${moduleId} .tab-header`);
if (!tabHeader) return;
// 保留"全部"标签
const allTab = tabHeader.querySelector('.tab-item[data-tab="all"]');
tabHeader.innerHTML = '';
tabHeader.appendChild(allTab);
// 添加分类标签
if (Array.isArray(categories)) {
categories.forEach(category => {
const tabItem = document.createElement('div');
tabItem.className = 'tab-item';
tabItem.setAttribute('data-tab', category.id);
tabItem.textContent = category.name;
tabHeader.appendChild(tabItem);
});
}
// 重新绑定点击事件
bindTabEvents(moduleId);
}
// 绑定标签点击事件
function bindTabEvents(moduleId) {
const tabItems = document.querySelectorAll(`#${moduleId} .tab-item`);
tabItems.forEach(tab => {
tab.addEventListener('click', function () {
tab.addEventListener('click', function() {
// 移除所有active类
tabItems.forEach(item => item.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// 添加active类到当前点击的tab
this.classList.add('active');
// 显示对应的内容
const tabName = this.getAttribute('data-tab');
const activeContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
if (activeContent) {
activeContent.classList.add('active');
// 获取选中的分类ID
const selectedCategoryId = this.getAttribute('data-tab');
// 重新加载对应分类的文章
if (moduleId === 'opencourse') {
loadCategoryArticles(selectedCategoryId, 'webArticlesList');
} else {
loadCategoryArticles(selectedCategoryId, 'techArticlesList');
}
// 添加切换动画效果
activeContent.style.opacity = '0';
setTimeout(() => {
activeContent.style.opacity = '1';
}, 50);
});
});
}
// 加载分类文章
function loadCategoryArticles(categoryId, containerId) {
const url = containerId === 'webArticlesList' ? '/index/index/siteNewslist' : '/index/index/technicalArticleslist';
fetch(url)
.then(response => response.json())
.then(result => {
if (result.code === 1) {
if (categoryId === 'all') {
// 显示所有文章
renderWebArticles(result.articles, containerId);
} else {
// 过滤显示选中分类的文章
const filteredArticles = result.articles.filter(article => article.cate == categoryId);
renderWebArticles(filteredArticles, containerId);
}
} else {
showNoData(containerId);
}
})
.catch(error => {
console.error('请求失败:', error);
showError(containerId);
});
}
// 渲染文章列表
function renderWebArticles(articles, containerId) {
const container = document.getElementById(containerId);
if (!container) return;
let html = '';
if (Array.isArray(articles)) {
articles.forEach(article => {
html += createArticleHtml(article);
});
}
container.innerHTML = html || '<div class="no-data">暂无数据</div>';
}
// 创建文章HTML
function createArticleHtml(article) {
if (!article) return '';
// 格式化日期
const publishDate = new Date(article.publishdate * 1000);
const formattedDate = publishDate.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return `
<div class="opencourse product-item" onclick="window.open('/index/article/detail?id=${article.id || ''}', '_blank')">
<div class="video">
<img src="${article.image || ''}" alt="" class="cover">
</div>
<div class="introduction">
<div class="title">${article.title || '无标题'}</div>
<div class="publishdate">${formattedDate}</div>
</div>
<div class="bottom">
<div class="views"><i class="fa-solid fa-eye"></i><span style="margin-left: 5px;">${article.views || 0}</span></div>
<div class="author"><i class="fa-regular fa-user"></i><span style="margin-left: 5px;">${article.author || '未知作者'}</span></div>
</div>
</div>
`;
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
loadWebArticles();
loadTechArticles();
});
</script>
</script>