Gatsby如何实现带省略号、仅显示部分页码的分页效果

问题原因 #

当前的分页渲染逻辑直接遍历生成了1到总页数的所有页码链接，没有做范围截断，所以会完整展示所有页码，无法出现省略号效果。
gatsby-node.js中创建分页页面的逻辑不需要修改，只需要调整blog.js模板中的页码渲染逻辑即可。

具体实现 #

首先替换blog.js中分页相关的逻辑，新增页码截断生成函数，控制实际渲染的页码项：

const { currentPage, numPages } = pageContext;
const isFirst = currentPage === 1;
const isLast = currentPage === numPages;
const prevPage = currentPage - 1 === 1 ? '/blog' : (currentPage - 1).toString();
const nextPage = (currentPage + 1).toString();

// 生成带省略号的页码列表
const generatePageItems = () => {
  const items = [];
  // 固定展示第一页
  items.push(1);

  // 控制当前页前后相邻展示的页码数量，这里前后各展示1个，可按需调整
  const siblingRange = 1;
  const left = Math.max(2, currentPage - siblingRange);
  const right = Math.min(numPages - 1, currentPage + siblingRange);

  // 第一页和左侧相邻页间隔超过1时，插入省略号
  if (left > 2) items.push('...');

  // 插入当前页前后的相邻页码
  for (let i = left; i <= right; i++) items.push(i);

  // 右侧相邻页和最后一页间隔超过1时，插入省略号
  if (right < numPages - 1) items.push('...');

  // 总页数大于1时固定展示最后一页，避免和第一页重复
  if (numPages > 1) items.push(numPages);

  return items;
};

const pageItems = generatePageItems();

然后替换原来的全量页码遍历渲染逻辑，改为遍历生成的页码项列表，区分渲染省略号和页码链接：

<nav className={styles.pagination}>
  {!isFirst && (
    <Link to={`/blog/${prevPage}`} rel="prev">
      ←
    </Link>
  )}
  {pageItems.map((item, idx) => {
    if (item === '...') return <span key={`ellipsis-${idx}`}>...</span>;
    return (
      <Link
        key={`page-${item}`}
        to={`/blog/${item === 1 ? '' : item}`}
        activeClassName={styles.activeLink}
      >
        {item}
      </Link>
    );
  })}
  {!isLast && (
    <Link to={`/blog/${nextPage}`} rel="next">
      →
    </Link>
  )}
</nav>

效果说明 #

• 总页数为5、当前在第2页时，渲染效果为 ← 1 2 3 ... 5 →，和参考效果一致
• 当前在中间页码（比如总页数10、当前在第5页）时，渲染效果为 ← 1 ... 4 5 6 ... 10 →
• 总页数较少（比如≤5页）时，不会出现省略号，自动展示所有页码
• 如果需要展示更多相邻页码，只需要调大siblingRange的数值即可

效果参考 #

期望实现的分页样式：

修改前的全量页码展示效果：

内容的提问来源于stack exchange，提问作者Alexandr Timoshchuk