文章列表通用-の子页面 (qihuostudy)
<br/>
<br/>

当前的分类ID:
{php}
$currentCateId = intval($current_cate['id'] ?? '');
$currentCatePid = intval($current_cate['parent_id'] ?? '');
if($currentCatePid == 0){
     $currentCatePid = $currentCateId;
}
var_dump($currentCateId); // 当前的分类
// var_dump($category_with_order_arr);
// var_dump($current_cate);
var_dump($currentCatePid);
// exit();

{/php}

<br>
<br>
<br>
<!-- 获取分类详情 -->
{hcTaglib:category id="$currentCatePid" item="vo" field="*"}
    <img src="{$vo.banner.url}" alt="">
{/hcTaglib:category}
<br>
<br>

左侧分类:  ====================== START
{hcTaglib:subcategory pid="$currentCatePid" item="vo" sort=""}
<div class="swiper-slide">
    <a href="{$vo.alias}">{$vo.title}</a>
</div>
{/hcTaglib:subcategory}

<!-- {hcTaglib:subcategory pid="151" name="hc_content" item="vo" sort="sort asc"} -->
<!--     {$vo.title} <br> -->
<!-- {/hcTaglib:subcategory} -->
左侧分类:  ====================== END
<br>
<br>
<br>
<br>
<br>


<br>列表上方位置导航 ========== START <br>
<a href="/">首页</a>
<!-- 子栏目 -->
{volist name="category_with_order_arr" id="oneCate"}
    <!-- {$oneCate.title} -->
    <a href="{$oneCate.alias}">{$oneCate.title}</a>
{/volist}
<!-- 当前的栏目 -->
<!-- <a href="javascript:;">{$current_cate.title}</a> -->
<a href="{$current_cate.alias}">{$current_cate.title}</a>
<br>列表上方位置导航 ========== END <br><br><br><br>

<!-- 中间内容列表 -->
{hcTaglib:contentPage2 cid="$currentCateId" moduleId="1" name="articleList" limit="3" item="vo" field="id,title,thumbnail" sort="publish_time desc"}
<a href="{:hcUrl('detail/index',['id'=>$vo.id,'cid'=>$vo.category_id])}">
    {$vo.title}
</a>

<span>{$vo.sub_title}</span>
<span>{$vo.publish_time}</span>
<br>

{/hcTaglib:contentPage2}

<!-- 获取分页信息 -->
<br>
<br>
{php}
$total = 0;
$lastPage = 0;
$currentPage = 0;
if ($articleList) {
    $total = $articleList->total();
    $lastPage = $articleList->lastPage();
    $currentPage = $articleList->currentPage();
    echo "总条数: " . $articleList->total() . "<br>";
    echo "总页数: " . $articleList->lastPage() . "<br>";
    echo "当前页: " . $articleList->currentPage() . "<br>";
    echo "每页数量: " . $articleList->listRows() . "<br>";
}
{/php}
<br>
<!-- {$articleList|raw} -->
<!-- 原有分页输出 -->
<div class="pagination-wrapper">
    {$articleList|raw}
</div>

<br>
<br>
<br>
<br>
<!-- 分页样式 ========= START -->
<style>
    .pagination-wrapper .pagination {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        padding-left: 0;
        list-style: none;
    }

    .pagination-wrapper .pagination li {
        display: inline-flex;
    }

    .pagination-wrapper .pagination a,
    .pagination-wrapper .pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        margin: 0 2px;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        text-decoration: none;
        color: #007bff;
    }

    .pagination-wrapper .pagination a:hover {
        background-color: #e9ecef;
    }

    .pagination-wrapper .pagination .active span {
        background-color: #007bff;
        border-color: #007bff;
        color: #fff;
    }

    .page-arrow.disabled {
        color: #ccc;              /* 灰色文字 */
        border-color: #e0e0e0;    /* 灰色边框 */
        cursor: not-allowed;      /* 禁用光标 */
    }
</style>
<!-- 分页样式 ========= END -->

<!-- 新增：分页箭头置灰 JS ========= START -->
<script>
    // 获取分页数据和当前页信息
    let currentPage = {$currentPage};
    let lastPage = {$lastPage};
    console.log(currentPage) // 当前页码
    console.log(lastPage) // 最后一页的页码

    // 等待页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
        console.log("加载完成, 获取元素修改样式");

    });
</script>
<!-- 分页箭头置灰 JS ========= END -->