分页

href 是一个从页码到 URL 的函数，所以 /blog/2 和 /blog?page=2 这两种形式它都能应付。这样每一页都是真正的链接——可被抓取、可在新标签页打开、没有 JavaScript 也照样能用，静态站点要的正是这个。

基础分页

pagination({ page: 1, count: 5, href: (page) => '#page-' + page })

开窗

第一页和最后一页始终显示，再加上当前页周围的一扇窗，序号跳跃的地方会出现省略号。

stack({ gap: 'md' },
  pagination({ page: 1, count: 12, href: (page) => '#a-' + page }),
  pagination({ page: 6, count: 12, href: (page) => '#b-' + page }),
  pagination({ page: 12, count: 12, href: (page) => '#c-' + page }),
)

相邻页数

siblings 指当前页两侧各留几页。

stack({ gap: 'md' },
  pagination({ page: 6, count: 12, siblings: 0, href: (page) => '#d-' + page }),
  pagination({ page: 6, count: 12, siblings: 1, href: (page) => '#e-' + page }),
  pagination({ page: 6, count: 12, siblings: 3, href: (page) => '#f-' + page }),
)

两端

在第一页时「上一页」被禁用，在最后一页时「下一页」被禁用，所以这个控件绝不会指向一个不存在的页面。

stack({ gap: 'md' },
  pagination({ page: 1, count: 3, href: (page) => '#g-' + page }),
  pagination({ page: 3, count: 3, href: (page) => '#h-' + page }),
  pagination({ page: 1, count: 1, href: (page) => '#i-' + page }),
)

颜色与文字

stack({ gap: 'md' },
  pagination({ page: 3, count: 6, color: 'neutral', href: (page) => '#j-' + page }),
  pagination({
    page: 3,
    count: 6,
    color: 'success',
    previousLabel: '更新',
    nextLabel: '更早',
    href: (page) => '#k-' + page,
  }),
)

不给 href

不给 href 时，页码会渲染成带 data-su-page 的按钮——留给那种用自己的脚本原地筛选的页面。能用链接就用链接：JavaScript 被关掉时它们照样活着。

pagination({ page: 2, count: 4 })

用在博客里

静态站点上的常见做法：generateStaticParams 为每一段生成一个页面，href 指向它们。

显示第 21–30 条，共 47 条

return (() => {
  const posts = 47
  const perPage = 10
  const current = 3

  return stack({ gap: 'md', align: 'center' },
    text({ variant: 'small', tone: 'muted' },
      '显示第 ' + ((current - 1) * perPage + 1) + '–' + Math.min(current * perPage, posts) + ' 条，共 ' + posts + ' 条',
    ),
    pagination({
      page: current,
      count: Math.ceil(posts / perPage),
      href: (page) => page === 1 ? '#blog' : '#blog-' + page,
    }),
  )
})()

属性

属性	类型	默认值	说明
`page`	`number`	`1`	当前页。会被夹到有效范围内。
`count`	`number`	`1`	一共有多少页。
`href`	`(page: number) => string`	—	从页码到 URL。不给它，页码就渲染成按钮。
`siblings`	`number`	`1`	当前页两侧各显示几页。
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	当前页的颜色。
`label`	`string`	`'Pagination'`	nav 地标的无障碍名称。
`previousLabel`	`Child`	`'‹'`	「上一页」控件的内容。
`nextLabel`	`Child`	`'›'`	「下一页」控件的内容。