# @deriv-com/dds-marketing 中文文档

规范地址：https://npmcn.com/package/%40deriv-com/dds-marketing/

版本：1\.2\.10
npm 元数据更新时间：2026-11-11T11:47:55.510Z
中文译文更新时间：2026-11-12T12:40:32.692Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40deriv-com/dds-marketing
原文对照：https://npmcn.com/package/%40deriv-com/dds-marketing/?lang=original
项目主页：https://github.com/deriv-com/deriv-design-system/tree/main/packages/marketing#readme
源码仓库：https://github.com/deriv-com/deriv-design-system

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：8.6 MB，1170 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=19，react-dom \>=19
- 首次发布：2026-09-02T14:44:55.592Z
- 最新版本发布：2026-11-11T11:47:55.129Z
- 近 30 天下载量：2518（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

衍生设计系统——销售站点的组件和代币(登陆页,定价,签注).

## 安装

```sh
npm install @deriv-com/dds-marketing
```

也可以使用：`pnpm add @deriv-com/dds-marketing`、`yarn add @deriv-com/dds-marketing`、`bun add @deriv-com/dds-marketing`

## README

# @deriv-com/dds-市场营销

衍生设计系统用于销售地点的部件和设计标志——着陆 页面,定价,注册.

**和AI探员一起工作?** 指着它 [`AGENTS.md`](https://npmcn.com/package/%40deriv-com/dds-marketing/AGENTS.md) 本包中。 没错 下面所有东西的简短版本, 并说其中哪一个 `.llm/` 要打开的文档.

它有两种组成部分: **核心项目** 组件 – 按钮、 Navbar、 卡、 链接、 窗体 管制和其他——和 **块**,这些波段的一页从: `LandingHero`, (中文(简体) ), `ProductHero` 财务报告和审定财务报表 `PageHeader` 打开一页,以及 `FeatureSplit`, (中文(简体) ), `FeatureBullets` 财务报告和审定财务报表 `FeatureScroll` 里面的章节. `AGENTS.md` 以行列出其中每一个 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}什么时候才能找到 产品应用程序想要 [`@deriv-com/dds-product`](https://www.npmjs.com/package/@deriv-com/dds-product)。 。 。 .

## 安装

```bash
npm install @deriv-com/dds-marketing
```

反应 19 是一个对等依赖, 因此, 如果您的应用程序还没有安装的话, 请同时安装它 内容:

```bash
npm install react react-dom
```

奎尔图标集随包而来——没有别的东西可以安装.

## 使用

在您的应用程序根部导入样式表一次 。 它定义了这个软件包的每一个符号 部件被束缚——没有它,它们就变成无花样.

```tsx
import '@deriv-com/dds-marketing/marketing.css'
```

那就放进去 `data-dds-context="marketing"` 任何包接组件的软件根,或 如果市场营销和产品都在同一页上 组件规则仅公布 在这个范围,因为两个包 发射类喜欢 `.dds-button` 一个会 否则,画另一个。 没有它,组件 也变得没有风格.

然后按名称导入组件 :

```tsx
import { Button, LandingHero } from '@deriv-com/dds-marketing'

export function Home() {
  return (
    <div data-dds-context="marketing">
      <LandingHero
        title="Trade smarter with Deriv"
        description="Access 250+ markets with tight spreads and powerful tools."
        actions={<Button href="/signup">Get started free</Button>}
      />
    </div>
  )
}
```

每个组件都带了自己的样式表,所以不需要其他的导入.

## 图标

每个 [奎尔](https://github.com/deriv-com/product-design-quill-icons) 图标被再导出 从 `@deriv-com/dds-marketing/icons`,由奎尔给出的名字:

```tsx
import { Icon } from '@deriv-com/dds-marketing'
import { CircleCheckSolidIcon } from '@deriv-com/dds-marketing/icons'
import { UsdIcon } from '@deriv-com/dds-marketing/icons/currency'

<Icon label="Verified"><CircleCheckSolidIcon /></Icon>
```

每个奎尔集团都有自己的子路径—— `accounts`, (中文(简体) ), `app-stores`, (中文(简体) ), `currency`, (中文(简体) ), `flag`, (中文(简体) ), `illustrative`, (中文(简体) ), `markets`, (中文(简体) ), `social`, (中文(简体) ), `system` 财务报告和审定财务报表 `trade`生产造树震动 窗体到您使用的图标; dev 服务器没有, 因此组子路径会使其无法加载 全部 ~1,850 一次。 Raw SVG 文件不再导出; 对于这些文件, 安装 `@deriv-com/quill-icons-web` 并使用 `svg/` 文件夹.

一个已经从 `@deriv-com/quill-icons-web` 继续工作 一样 模块,因此在您迁移时可以将两者混合在一起,但当您迁移时可以放弃直接依赖 已完成, 或把它固定在这个软件包使用的范围上, 所以应用程序不会捆绑两个副本 .

## 字体

该系统的设计对象是: [间](https://rsms.me/inter/) (所有文字)和 [红帽单曲](https://github.com/RedHatOfficial/RedHatFont) (代码). `marketing.css` 命名它们但不能携带它们——如果没有装入字体,则每个角色 悄悄倒回系统排字面, 任何重量缺失的页面会被伪造 由浏览器。 从两道中选择一条:

**让包裹供应他们.** 下一个导入 `marketing.css`数字 :

```tsx
import '@deriv-com/dds-marketing/fonts.css'
import '@deriv-com/dds-marketing/marketing.css'
```

这个自主机两个来自包的面 (可变重 WOFF2, 子集每个脚本, ~260 KB 在所有脚本中总计——一个页面只下载其文本使用的子集. 两者 字体在 SIL 开口字体许可证下; 许可证 `dist/fonts/`。 。 。 .

**自己装上.** 如果您的应用程序已经主机字体 - `next/font`,字体来源,或 你们自己 `@font-face` - 跳过 `fonts.css` 把两个家庭变量指向什么 已装入 :

```css
:root {
  --font-family-sans: var(--your-inter-variable), system-ui, sans-serif;
  --font-family-mono: var(--your-mono-variable), ui-monospace, monospace;
}
```

每个类型的角色都从这两个变量中读取其家族,所以这改变了整个角色的取向 系统即刻。 Inter 装入重量400-700(一个文件包含一个可变字体); 缺失的重量不会明显回落——浏览器合成出粗体.

## 光和暗, 和风景轴

`marketing.css` 定义两个主题。 黑暗被选中 `data-theme="dark"` 在任意 祖先——通常 `<html>`数字 :

```html
<html data-theme="dark">
  <body>
    <div data-dds-context="marketing">  <!-- dark, from here down -->
```

主题属性和上下文属性是独立的,主题可能坐上 范围,在同一要素上,或在其下。 没有提供者,也没有第二次进口.

营销确实带有移动取景器轴:下面有七个角色有不同的值 768px,自动应用并压倒 `data-dds-viewport="mobile"` 或者说 `"desktop"` 当页面使设备框架在宽的窗口内时.

## 文档

-   [`AGENTS.md`](https://npmcn.com/package/%40deriv-com/dds-marketing/AGENTS.md) ——正门:设置,穿插组件的规则,以及 此软件包目前拥有什么 .
-   `.llm/rules.md` ——任何单一组成部分都不能说明的限制因素.
-   `.llm/tokens.md` ——符号词汇,包括上方的移动取景器轴.

## 版本

预1.0. 小版本可能包含组件表面结算时的断裂变化; 如果这对你很重要的话,请刻出准确的版本.

## 常见问题

### @deriv-com/dds-marketing 是什么？

衍生设计系统——销售站点的组件和代币\(登陆页,定价,签注\)\.

### 如何安装 @deriv-com/dds-marketing？

在项目目录运行 npm install @deriv-com/dds-marketing，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）、react-dom（\>=19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @deriv-com/dds-marketing 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @deriv-com/dds-marketing 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @deriv-com/dds-marketing 可以商用吗？

@deriv-com/dds-marketing 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @deriv-com/dds-marketing 的下载量有多少？

根据 npm 官方下载统计，@deriv-com/dds-marketing 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,518 次，日均约 84 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @deriv-com/dds-marketing 还在维护吗？

最新版本 1\.2\.10 发布于 2026/11/11（1 天前）；至今共发布 20 个版本，其中过去 12 个月发布了 20 个；首次发布于 2026/09/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。