页脚

页脚是一个会自动适配列数的网格，外加一行可选的底部内容——不管上面有多少列，它总是占满整个宽度。

它同时以 footer 和 siteFooter 两个名字导出，因为 footer 也是 javascript-to-html 的 <footer> 元素，把两者用同一个名字导入会是语法错误。

基础页脚

footer(
  footerColumn({ title: '文档' },
    '<a href="/zh/docs">快速开始</a>',
    '<a href="/zh/docs/routing">路由</a>',
    '<a href="/zh/docs/data">数据加载</a>',
  ),
  footerColumn({ title: '组件' },
    '<a href="/zh/ui">概览</a>',
    '<a href="/zh/ui/button">按钮</a>',
    '<a href="/zh/ui/card">卡片</a>',
  ),
  footerColumn({ title: '项目' },
    '<a href="https://github.com/paul-browne/sitelo">GitHub</a>',
    '<a href="https://www.npmjs.com/package/sitelo">npm</a>',
  ),
)

带底部一行

footerBottom() 会横跨所有列，所以无论上面的网格怎么排，它始终是一整行。

footer(
  footerColumn({ title: '文档' }, '<a href="/zh/docs">指南</a>', '<a href="/zh/ui">组件</a>'),
  footerColumn({ title: '示例' }, '<a href="/zh/examples">全部示例</a>'),
  footerBottom(
    text({ variant: 'caption' }, '© 2026 Paul Browne · MIT'),
    stack({ direction: 'row', gap: 'sm' },
      chip({ size: 'sm', color: 'neutral' }, 'v2.7'),
      chip({ size: 'sm', color: 'success', dot: true }, '构建通过'),
    ),
  ),
)

品牌那一列

一列不一定非得是链接。凡是直接作为 footer() 子元素而不是放进某一列的东西，都会在网格里占据自己的一格。

footer(
  div(
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'sitelo'),
      text({ variant: 'small', tone: 'muted' }, '由 Vite 驱动的零配置静态站点生成。'),
    ),
  ),
  footerColumn({ title: '文档' }, '<a href="/zh/docs">指南</a>', '<a href="/zh/ui">组件</a>'),
  footerColumn({ title: '项目' }, '<a href="#">GitHub</a>', '<a href="#">npm</a>'),
)

固定列数

默认各列会自动适配。想要特定的排布时，columns 接受任意 grid-template-columns 值——比如一列宽的品牌区加两列窄的链接。

footer({ columns: '2fr 1fr 1fr' },
  div(text({ variant: 'small', tone: 'muted' }, '更宽的第一列，放品牌和一句关于它的话。')),
  footerColumn({ title: '文档' }, '<a href="/zh/docs">指南</a>'),
  footerColumn({ title: '更多' }, '<a href="/zh/examples">示例</a>'),
)

只要底部一行

footer(
  footerBottom(text({ variant: 'caption' }, '© 2026 · 由 sitelo 构建')),
)

属性

footer()：

属性	类型	默认值	说明
`columns`	`string`	—	一个 grid-template-columns 值。省略时自动适配。
`as`	`string`	`'footer'`	渲染成哪个元素。

部件	属性	默认值	说明
`footerColumn`	`title`	—	带标题的一列；子元素会成为一串链接。
`footerBottom`		—	列下方那一整行。