首页

首页一打开是占满窗口的一句引言，导航在页面滚动前是透明的。下面分三栏：左边是分类和标签，中间是文章和分页，右边是统计和日历。

按 1280px 宽打开 ↗

可以在框里滚动，也可以按原宽打开：导航随页面滚动渐渐出现底色，文章列表一开始比页面滚得快，盖上引言。

一页怎么拼起来

<TopNav brand="Field Notes" links={links} active="Blog" overlay />
<QuoteBand eyebrow="Writing since 2019" quotes={quotes} pullNext />
<main id="main">
  <ContentGrid>
    <Fragment slot="left">
      <FilterList label="Categories" items={categories} />
      <TagList items={tags} />
    </Fragment>
    <ArticleListCard … />
    <Pagination page={1} pageCount={3} />
    <Fragment slot="right">
      <SidebarCard title="Stats"><StatList items={stats} /></SidebarCard>
      <SidebarCard title="Calendar"><MiniCalendar counts={days} navigable /></SidebarCard>
    </Fragment>
  </ContentGrid>
</main>

筛选、分页和日历只用 ds-select、ds-page 事件告诉页面读者选了什么，显示哪些文章由页面决定。

组成

组件	做什么
QuoteBand 引言横幅	占满第一屏的一句话，从几句里随机选
ArticleListCard 文章卡片	列表里的一篇文章；PostMeta 是文章的信息行
FilterList 筛选列表	侧栏里的分类；TagList 是标签
Pagination 分页	列表下面的页码
StatList 统计列表	侧栏卡片里的网站统计
MiniCalendar 迷你日历	标出有文章的日子的月历