Paged.js中如何统计命名页面的总页数？

要实现带namedPage类的页面显示专属页码（比如“Page 1 / 2”），核心是利用Paged.js的生命周期钩子，在分页渲染的关键节点统计目标页面总数并注入页码。以下是可行的实现方案：

步骤1：统计命名页面总数量 #

在Paged.js完成渲染后，通过afterRender钩子获取所有带namedPage类的页面总数，把这个值存起来方便后续使用：

let namedPageTotal = 0;

document.addEventListener('DOMContentLoaded', () => {
  new Paged.Previewer({
    hooks: {
      afterRender: function() {
        // 统计所有命名页面的数量
        namedPageTotal = document.querySelectorAll('.pagedjs_page.namedPage').length;
        // 统计完成后更新所有命名页面的页码
        updateNamedPageNumbers();
      }
    }
  }).preview();
});

步骤2：给命名页面注入页码 #

写一个专门的函数，遍历所有命名页面，计算每个页面的序号，然后生成对应的页码文本插入到页面底部：

function updateNamedPageNumbers() {
  const namedPages = document.querySelectorAll('.pagedjs_page.namedPage');
  namedPages.forEach((page, index) => {
    // 检查页面是否已有页码元素，避免重复添加
    let pageNumberEl = page.querySelector('.named-page-number');
    if (!pageNumberEl) {
      pageNumberEl = document.createElement('div');
      pageNumberEl.classList.add('named-page-number');
      // 把页码放在页面底部，可通过CSS调整位置
      page.appendChild(pageNumberEl);
    }
    // 生成页码文本：Page 当前序号 / 总数量
    pageNumberEl.textContent = `Page ${index + 1} / ${namedPageTotal}`;
  });
}

步骤3：CSS调整页码样式 #

可以用CSS把页码固定在页面底部，比如：

.named-page-number {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
}

为什么之前的方案失效？ #

如果之前的方案是提前静态统计DOM中的.namedPage元素，那肯定不适用于动态生成的页面——因为Paged.js会在渲染过程中拆分、生成新的页面节点，静态统计只能拿到初始DOM的数量，拿不到最终分页后的实际命名页面总数。而用afterRender钩子是在所有分页完成后统计，能拿到准确的数量。

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