77 lines
3.1 KiB
PHP
77 lines
3.1 KiB
PHP
<div class="container py-5">
|
|
<div class="row g-4">
|
|
<!-- 左侧分类列表 -->
|
|
<div class="col-lg-3">
|
|
<div class="category-sidebar">
|
|
<div class="sidebar-header">
|
|
<i class="layui-icon layui-icon-app"></i>
|
|
<span>文章分类</span>
|
|
</div>
|
|
<div class="category-list">
|
|
{volist name="categories" id="cate"}
|
|
<div class="category-item {$category.id == $cate.id ? 'active' : ''}" data-cateid="{$cate.id}">{$cate.name}</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧文章列表 -->
|
|
<div class="col-lg-9">
|
|
{if $category}
|
|
<div class="category-header mb-4">
|
|
<h2 class="category-title">{$category.name}</h2>
|
|
<p class="category-desc">{$category.desc|default=''}</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="article-list">
|
|
{volist name="articles" id="article"}
|
|
<div class="article-item">
|
|
<div class="row g-0">
|
|
<div class="col-md-4">
|
|
<div class="article-image">
|
|
<img src="{$article.image|default='/static/images/default.jpg'}" alt="{$article.title}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="article-content">
|
|
<h3 class="article-title">
|
|
<a href="/index/articles/detail?id={$article.id}">{$article.title}</a>
|
|
</h3>
|
|
<p class="article-desc">{$article.desc|default=''}</p>
|
|
<div class="article-meta">
|
|
<div class="article-stats">
|
|
<span><i class="layui-icon layui-icon-eye"></i> {$article.views|default=0}</span>
|
|
<span><i class="layui-icon layui-icon-praise"></i> {$article.likes|default=0}</span>
|
|
<span><i class="layui-icon layui-icon-date"></i> {$article.create_time|date="Y-m-d"}</span>
|
|
</div>
|
|
<a href="/index/articles/detail?id={$article.id}" class="btn-detail">查看详情</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="mt-5">
|
|
{$articles|raw}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['layer'], function () {
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
|
|
// 分类切换
|
|
$('.category-item').on('click', function() {
|
|
var cateid = $(this).data('cateid');
|
|
window.location.href = '/index/articles/list?cate=' + cateid;
|
|
});
|
|
});
|
|
</script>
|