# @coralreefventures/site 中文文档
规范地址：https://npmcn.com/package/%40coralreefventures/site/
版本：0\.7\.0
npm 元数据更新时间：2026-10-19T22:57:14.178Z
中文译文更新时间：2026-11-14T13:42:12.519Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40coralreefventures/site
原文对照：https://npmcn.com/package/%40coralreefventures/site/?lang=original
项目主页：https://coralreefventures.com/
源码仓库：https://github.com/Coral-Reef-Ventures/reef
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：66.6 kB，34 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=24
- 运行依赖：0 个
- peer 依赖：next 16\.3\.6，react 19\.3\.0，react-dom 19\.3\.0，@mantine/core 9\.6\.3
- 首次发布：2026-10-04T20:07:21.188Z
- 最新版本发布：2026-10-19T22:57:13.794Z
- 近 30 天下载量：2024（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）
## 中文简介
珊瑚礁公共网站的外壳建有:页眉、页脚、路段、社会卡建设器和元数据辅助器件,作为服务器组件,由一个SiteConfig进行瘫痪.
## 安装
```sh
npm install @coralreefventures/site
```
也可以使用：`pnpm add @coralreefventures/site`、`yarn add @coralreefventures/site`、`bun add @coralreefventures/site`
## README
# @colorreefventures/ site (英语)
珊瑚礁公共网站的外壳构建于:每个页面共享框架(skip链接、页眉、主页脚) 区域与分块布局,关闭的动作呼叫,截图框,状态标签,社交卡构建器, 元数据帮助器和仅服务器测试帮助器。 一切都是服务器组件: 这里没有客户端 模块或导入一个,所以在它上建起的一页完全无法传送脚本。 曼汀从未被导入; shell 读取 主题的 CSS 变量 (`--mantine-primary-color-*`, radi,字体大小)和站点本身的标志.
漂流线 `apps/site` 开始是Strevlane的拷贝, 两个漂移。 网站之间的区别是什么 产品差异(名称、URL、导航、动作、页脚行、品牌标记、牌等)是一种 `SiteConfig` 产品经过一次;由于漂移的不同,在这里定居,一种方式,最后列出.
## 用这个
将外壳绑入一个模块中的站点配置,并从中导入:
```tsx
// lib/site.tsx
import { createSite } from "@coralreefventures/site";
import { Lockup } from "@/components/brand/Lockup";
import { socialMark } from "@/components/brand/social-mark";
import { brand } from "@streamlane/theme";
export const site = createSite({
name: "Streamlane",
url: "https://streamlane.app",
description: "Docs, work, ideas, and delivery in one place. Delivery state comes from GitHub, never from a person.",
nav: [
{ key: "product", label: "Product", href: "/product/" },
{ key: "docs", label: "Docs", href: "/docs/" },
// ...
],
lockup: ,
actions: [
{ label: "Sign in", href: "https://app.streamlane.app", kind: "link", hideBelow: "md" },
{ label: "Start free", href: "/pricing/", kind: "primary" },
],
// Optional: something in the bar that is not a link, such as a color-scheme control.
headerTools: ,
footer: {
maker: <>Streamlane · made by Coral Reef Ventures · source on GitHub,
links: [{ label: "Docs", href: "/docs/" }, { label: "Changelog", href: "/changelog/" } /* ... */],
trademarks: ["Jira", "Confluence", "Linear", "Notion", "GitLab", "Plane"],
},
cards: { "/": { headline: "...", sentence: "..." }, "/pricing/": { headline: "..." } },
socialCard: { background: brand.ink, text: brand.white, muted: brand.paper, accent: brand.signal, mark: socialMark },
icons: { icon: [{ url: "/brand/favicon-32.png", sizes: "32x32", type: "image/png" }] },
themeColor: brand.ink,
});
export const { SiteFrame, pageMetadata } = site;
```
```tsx
// app/(site)/pricing/page.tsx
import { page, Section } from "@coralreefventures/site";
import { pageMetadata, SiteFrame } from "@/lib/site";
export const metadata = pageMetadata({ title: "Pricing", description: "...", path: "/pricing/" });
const PricingPage = () => (
);
```
`headerTools` (可选的,因为0.3.0)是用于标题中不是链接的东西,例如色彩方案 控制系统。 它在动作组后和折叠菜单按钮前,垂直地居中 64 px 栏, 在每个宽度上: 从不隐藏在断点下, 也从未复制到折叠菜单中 。 头部保持一个 服务器组件; 元素是产品本身的,也可能是其客户端组件之一. 没有它,头部 标记是球场存在之前的状态, 一个测试持有这一点.
`stickyHeader` (可选,自0.7.0起)将页眉保留在屏幕上方作为页卷. 在电话上 栏为56px,而不是64;在30em高的屏幕上(电话接通了侧道),头部又卷走 页面的锚和重点控制其下方的土地(`scroll-padding-top` 在根上,内部折叠的菜单滚动 屏幕,跳过链接坐在上面.
`SubNav` (自0.7.0起)是栏下一行分页作为一行分页的一行分页,传递到框上作为 `subnav`,所以这个 坐在信头里面,用它来粘住, 每一页的页面都是一闪一闪的:
```tsx
}>
```
排从不包. 在宽于屏幕的地方,它卷起侧面,没有卷轴条,边缘则更多 选项卡会逐渐淡出(滚动时间线,所以一个适合永不淡出),和一个内行脚本,按行运行 解析后,将当前标签滚动到视图中。 把标签短,一个字可以放在哪里, 所以行适合 在笔记本电脑上. `AreaPage`是因为 `nav` 对将区域放置于此的场地来说是可选的.
`active` 输入到配置的导航键。 根布局需要 `site.rootMetadata()` 财务报告和审定财务报表 `site.rootViewport()`· ; `app/robots.ts` 返回时 `site.robots()`, (中文(简体) ), `app/sitemap.ts` 返回时 `site.sitemap()` (增加了文件页数,用于: (b) 拥有这些设施的网站 `app/og/[...card]/route.tsx` 保留其两字并取其余:
```ts
export const dynamic = "force-static";
export const dynamicParams = false;
export const { generateStaticParams, GET } = site.socialCardRoute();
```
导入 `@coralreefventures/site/base.css` 在站点本身之前的根版式中 `globals.css`它携带 共享规则(身体,内含链接,焦点环,跳过链接)和布局符; `globals.css` 保留颜色 : `--site-text`, (中文(简体) ), `--site-muted`, (中文(简体) ), `--site-border`, (中文(简体) ), `--site-paper`, (中文(简体) ), `--site-link-underline`, (中文(简体) ), `--site-shadow`,用于 状态标签的注意声调 `--site-attention-tint`, (中文(简体) ), `--site-attention-edge`, (中文(简体) ), `--site-attention-text`。 。 。 .
## 产品领域
自0.6.0起,产品页的区域,因为这两个网站都呈现: `AreaCards`,概览的卡片,每个链接 它的模糊和可选 `tag` (Streamlane的"计划"),当前填充; `AreaNav`,一行药片在 a. 每个区域页上方;以及 `AreaPage`,区域页面模板:行、状态、标题和与 在他们下面的第一屏蔽,每个索赔的一节, 屏幕在交替的侧面和理由, 什么是尚未在这里, 和关闭乐队。 区和副本是站点通过的数据;行和收盘是元素.
```tsx
// components/product/AreaPage.tsx in a site
import { AreaNav, AreaPage, CtaBand } from "@coralreefventures/site";
import { areas, overview, type AreaCopy } from "@/lib/areas";
export const ProductArea = ({ area }: { area: AreaCopy }) => (
}
status={(status) => }
closing={{/* the site's buttons */}} />}
/>
);
```
`status` 在站点本身的音符中绘制一个状态( 默认情况下为被注意的音符) `Status`),以及 `screen` 绘制屏幕 从标题和形状(默认标记为 `Screenshot`, 16 / 8 并同时装入, 16 / 10 一个拥有自己的网站. `AreaCopy` 在网站状态中是通用的。 这个 标题和段落是带有页面类型尺度的平面元素,其中网站的拷贝使用Mantine的 `Title` 财务报告和审定财务报表 `Text`,所以页面读取相同,没有曼汀的风格给他们.
## 安装
船舶类型Script和CSS模块作为源 `exports` 指点 `src/`,没有建设步骤。 添加到下一个 `transpilePackages` 除了产品的主题:
```ts
transpilePackages: ["@streamlane/theme", "@coralreefventures/site"],
```
`react`, (中文(简体) ), `react-dom`, (中文(简体) ), `next` 财务报告和审定财务报表 `@mantine/core` 在两个网站使用的版本中都是同行。 这里没有进口的 Maintine; 端点表示样式表所期望的主题变量 .
## 只有服务器的规则
`@coralreefventures/site/testing` 出口 `clientReach(entry, { root })`步行两地 `server-only.test.ts` 运行: 每一个“ 使用客户端” 模块和每一个客户端软件包的导入( x)`@mantine/*`, (中文(简体) ), `next/link`, (中文(简体) ), `next/image`, (中文(简体) ), `next/script`, (中文(简体) ), `next/dynamic`从一个条目可以到达。 产品测试一直坚持 根是空的 版式和404页,对于使用Mantine的页面,不为空。 这个软件包的测试在每一个文件上进行 内 `src/`。 。 。 .
## 已经解决了,两个地点漂了
- 状态标签默认为普通 `attention` 调子( 分解线) , 而不是总有颜色 (史记. 流线的 `InsightCount` 作为 `9 insights · 4 companies`。 。 。 .
- 标题的主要动作可以在电话上离开酒吧(`hideBelow: "sm"`,漂流线加长 标签); 任何隐藏动作被列出于折叠菜单中,所以它仍然可以被达到. 流线的"开始免费"适合和 留下来.
- 行动的最后呼吁 `tone="band"` 在一条规则下漂流线的有色地; Strevlane的平地.
- 社交卡头条包装为920 px,漂流线后期为宽;流线为880.
- 页脚的商标列表由 `Intl.ListFormat`,如"漂流";"流线"的手写列表为: 同样的.
- 社交卡的字体缓存是 `.next/cache/coral-reef/fonts`,共享,因为两者都设置了诺托桑斯.
## 常见问题
### @coralreefventures/site 是什么？
珊瑚礁公共网站的外壳建有:页眉、页脚、路段、社会卡建设器和元数据辅助器件,作为服务器组件,由一个SiteConfig进行瘫痪\.
### 如何安装 @coralreefventures/site？
在项目目录运行 npm install @coralreefventures/site，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：next（16\.3\.6）、react（19\.3\.0）、react-dom（19\.3\.0）、@mantine/core（9\.6\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @coralreefventures/site 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/coralreefventures\_\_site 是否存在。
### @coralreefventures/site 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @coralreefventures/site 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @coralreefventures/site 可以商用吗？
@coralreefventures/site 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @coralreefventures/site 的下载量有多少？
根据 npm 官方下载统计，@coralreefventures/site 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,024 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @coralreefventures/site 还在维护吗？
最新版本 0\.7\.0 发布于 2026/10/20（25 天前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/10/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。