给帝国cms 首页读取的内容分页

总有奇怪要求同学，有人喜欢用帝国cms，但是又想要那种博客的效果，这就需要给首页读取的内容进行分页显示了，
今天讲2种方法 在帝国cms7.5和帝国cms8.0上测试都没问题.

第一种方式比较简单 我们用帝国系统自带的自定义列表实现
增加自定义列表，生成到根目录，比如增加自定义列表，默认显示的是，修改成为生成目录填写：../../
其实就是用自定义列表使用列表模板读取内容 生成index.html 直接生成到网站跟目录 这就替换掉首页原本文件，自定义列表生成出来的文件就是有分页的。
这方式简单使用的人多，但是有人不满意的是一旦内容多了分了几千页 跟目录下就一堆html文件，强迫症同学无法接受了。

那就直接看第2种方式：

<div id="news-container">
[e:loop={'select id,classid,title,newstime,smalltext,titleurl from [!db.pre!]ecms_news order by newstime desc',10,24,0}]
  <div class="item">
    <div class="title">
      <a href="<?=$bqr['titleurl']?>"><?=esub($bqr['title'], 32)?></a>
    </div>
    <hr>
    <div class="content"><?=$bqr['smalltext']?>...</div>
  </div>
[/e:loop]

</div>

<!--分页部分-->
<div id="pagination" class="pagelist layui-field-box"></div>
上面的代码 就是模板部分的  要给你的内容列表读取模板部分 放到<div id="news-container">里面 这个部分名字news-container 如果要修改 你要对应修改下面的JS代码。<div id="pagination" class="pagelist layui-field-box"></div>就要对应 替换成你自己网站分页标签的CSS div了。

下面是JS 最好放到站头位置 不然JS 加载慢了 ，会导致你读取的内容全部内容出来后等到JS加载完才分页，这样会有时间差！

<script>
document.addEventListener("DOMContentLoaded", function () {
  const itemsPerPage = 10;
  const items = Array.from(document.querySelectorAll("#news-container .item"));
  const pagination = document.getElementById("pagination");
  const totalPages = Math.ceil(items.length / itemsPerPage);
  let currentPage = 1;

  function renderPage(page) {
    items.forEach((item, i) => {
      item.style.display = (i >= (page - 1) * itemsPerPage && i < page * itemsPerPage) ? 'block' : 'none';
    });

    // 构建分页按钮
    let html = '';

    
   function generatePagination(page, totalPages) {
  let html = '';

  // 显示第一页
  if (page > 3) {
    html += `<a href="javascript:;" onclick="goToPage(1)">1</a>`;
    if (page > 4) html += `<span>...</span>`;
  }

  // 显示中间页码（当前页左右各最多2个）
  const start = Math.max(1, page - 2);
  const end = Math.min(totalPages, page + 2);

  for (let i = start; i <= end; i++) {
    html += `<a href="javascript:;" class="${i === page ? 'active' : ''}" onclick="goToPage(${i})">${i}</a>`;
  }

  // 显示最后一页
  if (page < totalPages - 2) {
    if (page < totalPages - 3) html += `<span>...</span>`;
    html += `<a href="javascript:;" onclick="goToPage(${totalPages})">${totalPages}</a>`;
  }

  return html;
}



    pagination.innerHTML = generatePagination(page, totalPages);
  }

  window.goToPage = function (page) {
    currentPage = page;
    renderPage(page);
  }

  // 初始化第一页
  renderPage(currentPage);
});
</script>

第2种方式 好处是不管分页多少，你跟目录只有一个index.html文件，专治强迫症！