# @antv/gatsby-theme-antv 中文文档

规范地址：https://npmcn.com/package/%40antv/gatsby-theme-antv/

版本：1\.1\.17
npm 元数据更新时间：2026-09-21T08:45:52.994Z
中文译文更新时间：2026-11-06T08:25:29.705Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40antv/gatsby-theme-antv
原文对照：https://npmcn.com/package/%40antv/gatsby-theme-antv/?lang=original
项目主页：https://antvis.github.io/
源码仓库：https://github.com/antvis/gatsby-theme-antv

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

- 包体积（解压后）：831 kB，234 个文件
- TypeScript 类型：未声明
- 运行依赖：73 个
- peer 依赖：react ^16\.9\.0 \|\| ^17\.0\.0，react-dom ^16\.9\.0 \|\| ^17\.0\.0
- 首次发布：2019-10-11T11:09:00.501Z
- 最新版本发布：2022-02-15T07:12:33.156Z
- 近 30 天下载量：3854（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：278（近 12 个月 0 个）

## 中文简介

Ant可视化解决方案主页

## 安装

```sh
npm install @antv/gatsby-theme-antv
```

也可以使用：`pnpm add @antv/gatsby-theme-antv`、`yarn add @antv/gatsby-theme-antv`、`bun add @antv/gatsby-theme-antv`

## README

![图片](https://user-images.githubusercontent.com/507615/69481549-49b39d00-0e4d-11ea-87fd-1e7741f4bdf1.png)

# AntV 的 Gatsby 主题 QQ

Gatsby主题 文献网站.

[![](https://flat.badgen.net/npm/v/@antv/gatsby-theme-antv?icon=npm)](https://www.npmjs.com/package/@antv/gatsby-theme-antv) [![NPM downloads](http://img.shields.io/npm/dm/@antv/gatsby-theme-antv.svg?style=flat-square)](http://npmjs.com/@antv/gatsby-theme-antv) ![CI status](https://github.com/antvis/gatsby-theme-antv/workflows/Node%20CI/badge.svg) [![Dependency Status](https://david-dm.org/antvis/gatsby-theme-antv.svg?style=flat-square&path=@antv/gatsby-theme-antv)](https://david-dm.org/antvis/gatsby-theme-antv?path=@antv/gatsby-theme-antv) [![devDependencies Status](https://david-dm.org/antvis/gatsby-theme-antv/dev-status.svg?style=flat-square&path=@antv/gatsby-theme-antv)](https://david-dm.org/antvis/gatsby-theme-antv?type=dev&path=@antv/gatsby-theme-antv) ![prettier code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)

## 特征

-   \* 已移交的静态网站
-   i18next支持国际化
-   以标记为基础的文档和菜单
-   现场游乐场的例子
-   QQ 统一主题和布局
-   方便定制的页眉导航
-   QQ 主页组件

## 使用它的网站

-   ✨ [https://antv.vision (英语)](https://antv.vision/)
-   ✨ [https://g2plot.antv.vision (英语)](https://g2plot.antv.vision/)
-   ✨ [https://g2.antv.vision (英语)](https://g2.antv.vision/)
-   ✨ [https://g6.antv.vision (英语)](https://g6.antv.vision/)
-   ✨ [https://f2.antv.vision (英语)](https://f2.antv.vision/)
-   ✨ [https://l7.antv.vision (英语)](https://l7.antv.vision/)
-   ✨ [https://graphin.antv.vision (英语)](https://graphin.antv.vision/)

## 使用量

从 [逐个启动主题](https://github.com/antvis/gatsby-starter-theme-antv)。 。 。 .

```bash
$ yarn global add gatsby-cli // or npm install gatsby-cli -g
$ gatsby new mysite https://github.com/antvis/gatsby-starter-theme-antv
```

开始开发.

```bash
$ cd mysite
$ yarn start
```

> {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 [接入方式](https://github.com/antvis/antvis.github.io/issues/18#issuecomment-548754442) 3⁄4 ̄ ̧漯B [额外功能](https://github.com/antvis/antvis.github.io/issues/18#issuecomment-568692771)

### `gatsby-config.js`

```js
// gatsby-config.js
const { repository } = require('./package.json');

module.exports = {
  plugins: [
    {
      resolve: `@antv/gatsby-theme-antv`,
      options: {
        // pagesPath: './site/pages',
        GATrackingId: `UA-XXXXXXXXX-X`,
        pathPrefix: '/g2',
        // antd 主题：https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
        theme: {
          'primary-color': '#873bf4',
        },
        pwa: true, // 是否开启 gatsby-plugin-offline
        cname: true, // 是否自动从 siteUrl 中提取 CNAME 文件
        codeSplit: true, // 是否开启 gatsby 按路由的代码分割，默认为 false
      },
    },
  ],
  siteMetadata: {
    title: `AntV`,
    description: `Ant Visualization solution home page`,
    githubUrl: repository.url,
    logoUrl: '', // 自定义 logo
    navs: [], // 用于定义顶部菜单
    docs: [], // 用于定义文档页面的二级分类菜单
    examples: [], // 用于定义演示页面的二级菜单，属性见下方
    showSearch: true, // 是否展示搜索框
    showChinaMirror: true, // 是否展示国内镜像链接
    showLanguageSwitcher: true, // 用于定义是否展示语言切换
    showAntVProductsCard: true, // 是否展示 AntV 系列产品的卡片链接
    showGithubCorner: true, // 是否展示角落的 GitHub 图标
    showChartResize: true, // 是否在demo页展示图表视图切换
    themeSwitcher: 'g2', // 是否在demo页展示主题切换, 取值为'g2' | 'g2plot' 如果不设置则不展示主题切换工具
    showAPIDoc: true, // 是否在demo页展示API文档
    showExampleDemoTitle: true, // 有截图的是否要展示 title 名称
    playground: {
      container: '<canvas id="container" />', // 定义演示的渲染节点，默认 <div id="container" />
      playgroundDidMount: 'console.log("playgroundDidMount");',
      playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
      devDependencies: {
        // 如果 example 是 ts 文件，需要加上 ts 依赖，才能在 codesandbox 正确运行
        typescript: 'latest',
      },
    },
    versions: [
      {
        '1.x': 'https://1x.ant.design',
        '2.x': 'https://2x.ant.design',
        '3.x': 'https://ant.design',
        '4.x': 'https://next.ant.design',
      },
    ],
    redirects: [
      {
        from: /\/old-url/,
        to: '/new-url', // 不指定 to 时直接跳转到 https://antv-2018.alipay.com/***
      },
    ],
  },
};
```

-   `navs`数字 : [道具](https://github.com/antvis/gatsby-theme-antv/blob/aa8cdd7e24e965174cbe7173a841fd7d23537e52/%40antv/gatsby-theme-antv/gatsby-node.js#L242-L264)
-   `docs`数字 : [道具](https://github.com/antvis/gatsby-theme-antv/blob/aa8cdd7e24e965174cbe7173a841fd7d23537e52/%40antv/gatsby-theme-antv/gatsby-node.js#L242-L264)
-   `examples`数字 : [道具](https://github.com/antvis/gatsby-theme-antv/blob/aa8cdd7e24e965174cbe7173a841fd7d23537e52/%40antv/gatsby-theme-antv/gatsby-node.js#L242-L264)

### 构成部分

-   [页眉道具](https://github.com/antvis/gatsby-theme-antv/blob/master/%40antv/gatsby-theme-antv/site/components/Header.tsx#L13-L39)
-   [页脚道具](https://github.com/antvis/gatsby-theme-antv/blob/046a9c4e32eea50b49347b114714425a9f99b4b7/%40antv/gatsby-theme-antv/site/components/Footer.tsx#L149-L159)
-   [SEO 道具](https://github.com/antvis/gatsby-theme-antv/blob/046a9c4e32eea50b49347b114714425a9f99b4b7/%40antv/gatsby-theme-antv/site/components/Seo.tsx#L12-L17)
-   [横幅道具](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Banner.tsx#L8-L31)
-   [特性 道具](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Features.tsx#L7-L17)
-   [案例说明](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Cases.tsx#L14-L25)
-   [公司赞助](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Companies.tsx#L6-L16)

```jsx
import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
import Header from '@antv/gatsby-theme-antv/site/components/Header';
import Footer from '@antv/gatsby-theme-antv/site/components/Footer';
import Banner from '@antv/gatsby-theme-antv/site/components/Banner';
import Features from '@antv/gatsby-theme-antv/site/components/Features';
import Applications from '@antv/gatsby-theme-antv/site/components/Applications';
import Companies from '@antv/gatsby-theme-antv/site/components/Companies';

// @antv/gatsby-theme-antv/components/Header for commonjs version

const Layout = () => {
  const features = [
    {
      icon:
        'https://gw.alipayobjects.com/zos/basement_prod/5dbaf094-c064-4a0d-9968-76020b9f1510.svg',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
      icon:
        'https://gw.alipayobjects.com/zos/basement_prod/0a0371ab-6bed-41ad-a99b-87a5044ba11b.svg',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
      icon:
        'https://gw.alipayobjects.com/zos/basement_prod/716d0bc0-e311-4b28-b79f-afdd16e8148e.svg',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
  ];
  const cases = [
    {
      logo:
        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
      title: '灯塔专业版',
      description:
        '深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金',
      link: '#',
      image:
        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
    },
    // ...
  ];
  const companies = [
    {
      name: '公司1',
      image:
        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Z1NnQ6L4xCIAAAAAAAAAAABkARQnAQ',
    },
    {
      name: '公司2',
      image:
        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6u3hTpsd7h8AAAAAAAAAAABkARQnAQ',
    },
    // ...
  ];
  const notifications = [
    {
      type: '测试',
      title: 'G6 3.2 全新上线！',
      date: '2019.12.04',
      link: '#',
    },
  ];

  const downloadButton = {
    text: '下载使用',
    link: 'https://antv.alipay.com/zh-cn/index.html',
  };

  return (
    <>
      <SEO title="蚂蚁数据可视化" lang="zh" />
      <Header
        subTitle="子产品名"
        logo={{
          link: 'https://antv.alipay.com',
          img: <img src="url" />,
        }}
        githubUrl="https://github.com/antvis/g2"
        // docs={[]}
        showSearch={false}
        showGithubCorner={false}
        showLanguageSwitcher={false}
        onLanguageChange={(language) => {
          console.log(language);
        }}
        defaultLanguage="zh"
      />
      <Footer
      // columns={[]}
      // bottom={<div>powered by antv</div>}
      />

      <Banner
        coverImage={<svg></svg>} // 右侧 banner svg 内容
        title="主页标题"
        description="主页描述内容描述内容描述内容描述内容"
        buttonText="按钮文字"
        buttonHref={'#按钮链接路径'}
        notifications={notifications} // 可传 1-2 个内容，若不传则显示 2 个默认通知
        style={{}}
        className="Banner 的 className"
        video="视频按钮点开后视频的链接，不传则不会出现视频按钮"
        githubStarLink="Github Star 链接，不传则不会出现 GitHub Start 按钮"
        downloadButton={downloadButton} // 不传则不会出现下载按钮
      />
      <Features
        title="优势页面名称" // 可不传
        features={features} // 必传
        style={{}}
        className="Features 的 className"
      />
      <Cases cases={cases} style={{}} className="Cases 的 className" />
      <Companies
        title="公司页面名称" // 必传
        companies={companies} // 必传
        style={{}}
        className="Companies 的 className"
      />
    </>
  );
};
```

## 开发

```bash
yarn install
yarn start
```

访问https://localhost:8000预览.

## 发布到 npm

```bash
cd @antv/gatsby-theme-antv
npm run release
```

## 部署

```bash
npm run deploy
```

> 设置定义变量 `GATSBY_PATH_PREFIX` 改为 `/` 在部署服务中,例如网化预览路径 Prefix 站点.

## 依赖性

```bash
cd @antv/gatsby-theme-antv
yarn add shallowequal
```

或者说

```bash
yarn workspace @antv/gatsby-theme-antv shallowequal
```

## 相关图书馆

-   [盖茨比](https://www.gatsbyjs.org/docs/)
-   [蚂蚁设计](https://github.com/ant-design/ant-design)
-   [gatsby 转换器标记](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/)
-   [动画](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/?=highlight#line-highlighting)
-   [欢乐](https://jestjs.io/)
-   [测试库](https://testing-library.com/)
-   [反应- i18next](https://react.i18next.com/)

## 常见问题

### @antv/gatsby-theme-antv 是什么？

Ant可视化解决方案主页

### 如何安装 @antv/gatsby-theme-antv？

在项目目录运行 npm install @antv/gatsby-theme-antv，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.9\.0 \|\| ^17\.0\.0）、react-dom（^16\.9\.0 \|\| ^17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @antv/gatsby-theme-antv 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/antv\_\_gatsby-theme-antv 是否存在。

### @antv/gatsby-theme-antv 可以商用吗？

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

### @antv/gatsby-theme-antv 的下载量有多少？

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

### @antv/gatsby-theme-antv 还在维护吗？

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