跳转到内容

ContentGrid 内容网格

内容页的网格:200px 的左栏、正文栏、280px 的右栏,最宽 1200px。

按 1280px 宽打开

有侧栏的页面都用它:首页两边都有,文章页和关于页只有右栏。没有侧栏的页面不用。

<ContentGrid stackRails="left">
<Fragment slot="left">…</Fragment>
<article>…</article>
<Fragment slot="right">…</Fragment>
</ContentGrid>

只填这一页有的侧栏,缺的那一栏会去掉,不留空。侧栏里的东西按 railGap 竖着排;正文滚动时,侧栏停在导航下面。

三栏,栏间距 48px。网格本身不设背景,上下也不留白,由外面那一条负责。

属性 取值
sticky 哪个侧栏停住:both(默认)、left、right,侧栏比窗口高时用 none
stackRails 窄于 768px 时哪些侧栏留下、排在正文下面:both(默认)、left、right、none
keepRails 768 到 1080px 之间也保留右栏
mainWidth 正文栏用这个宽度,并且留在页面正中,侧栏紧挨着它;这时网格占满整个页面宽度。带目录的文章页用 var(--container-reading)
leftWidth、rightWidth、gap、railGap、maxWidth 长度
宽度 布局
宽于 1080px 三栏都在
768 到 1080px 右栏隐藏,所以右栏里不放读者必须看到的东西
窄于 768px 一栏,正文在最前,侧栏排在下面,不再停住

侧栏是 <aside>,读屏软件把它们当作补充内容。源码里左栏在正文前面;跳到正文的链接让用键盘的读者直接到正文。

ContentGrid.astro。从交付包移植,props 一样;侧栏是具名插槽。

SidebarCard 侧栏卡片,侧栏里放的卡片。FloatingControls 浮动按钮,在手机上接手侧栏里的目录。