{"id":13764892,"url":"https://github.com/antvis/gatsby-theme-antv","last_synced_at":"2025-09-30T16:31:28.116Z","repository":{"id":35162354,"uuid":"214370844","full_name":"antvis/gatsby-theme-antv","owner":"antvis","description":"⚛️ Polished Gatsby theme for documentation site","archived":true,"fork":false,"pushed_at":"2023-03-17T03:22:59.000Z","size":28572,"stargazers_count":344,"open_issues_count":30,"forks_count":57,"subscribers_count":23,"default_branch":"master","last_synced_at":"2024-10-29T21:05:30.577Z","etag":null,"topics":["antd","antv","antvis","gatsby","gatsby-starter","gatsby-theme","gatsbyjs","react"],"latest_commit_sha":null,"homepage":"https://gatsby-starter-theme-antv.antv.vision/zh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-10-11T07:23:12.000Z","updated_at":"2024-10-24T17:09:52.000Z","dependencies_parsed_at":"2023-01-15T15:15:20.616Z","dependency_job_id":null,"html_url":"https://github.com/antvis/gatsby-theme-antv","commit_stats":{"total_commits":1325,"total_committers":30,"mean_commits":"44.166666666666664","dds":"0.37735849056603776","last_synced_commit":"49e6fca86ab7885360c40bae4c0575ffcd7d04f3"},"previous_names":[],"tags_count":241,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fgatsby-theme-antv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fgatsby-theme-antv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fgatsby-theme-antv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fgatsby-theme-antv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/gatsby-theme-antv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234706977,"owners_count":18874613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","antv","antvis","gatsby","gatsby-starter","gatsby-theme","gatsbyjs","react"],"created_at":"2024-08-03T16:00:31.136Z","updated_at":"2025-09-30T16:31:22.670Z","avatar_url":"https://github.com/antvis.png","language":"TypeScript","funding_links":[],"categories":["Table of Contents","TypeScript","TypeScript (64)"],"sub_categories":["Inspiration"],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg width=\"1295\" alt=\"图片\" src=\"https://user-images.githubusercontent.com/507615/69481549-49b39d00-0e4d-11ea-87fd-1e7741f4bdf1.png\"\u003e\n\n# Gatsby Theme for AntV ⚛\n\n✨ Polished Gatsby theme for documentation site.\n\n[![](https://flat.badgen.net/npm/v/@antv/gatsby-theme-antv?icon=npm)](https://www.npmjs.com/package/@antv/gatsby-theme-antv)\n[![NPM downloads](http://img.shields.io/npm/dm/@antv/gatsby-theme-antv.svg?style=flat-square)](http://npmjs.com/@antv/gatsby-theme-antv)\n![CI status](https://github.com/antvis/gatsby-theme-antv/workflows/Node%20CI/badge.svg)\n\n[![Dependency Status](https://david-dm.org/antvis/gatsby-theme-antv.svg?style=flat-square\u0026path=@antv/gatsby-theme-antv)](https://david-dm.org/antvis/gatsby-theme-antv?path=@antv/gatsby-theme-antv)\n\n\u003c/div\u003e\n\n## Features\n\n- ⚛ Prerendered static site\n- 🌎 Internationalization support by i18next\n- 📝 Markdown-based documentation and menus\n- 🎬 Examples with live playground\n- 🏗 Unified Theme and Layout\n- 🆙 Easy customized header nav\n- 🧩 Built-in home page components\n\n## Websites using it\n\n- ✨ https://antv.vision\n- ✨ https://g2plot.antv.vision\n- ✨ https://g2.antv.vision\n- ✨ https://g6.antv.vision\n- ✨ https://x6.antv.vision\n- ✨ https://f2.antv.vision\n- ✨ https://l7.antv.vision\n- ✨ https://graphin.antv.vision\n- ✨ https://g.antv.vision\n- ✨ https://gwebgpu.antv.vision\n\n## Usage\n\nCreate a Gatsby site from [gatsby-starter-theme-antv](https://github.com/antvis/gatsby-starter-theme-antv).\n\n```bash\n$ yarn global add gatsby-cli // or npm install gatsby-cli -g\n$ gatsby new mysite https://github.com/antvis/gatsby-starter-theme-antv\n```\n\nStart developing.\n\n```bash\n$ cd mysite\n$ yarn start\n```\n\n\u003e ✨ AntV 站点 [接入方式](https://github.com/antvis/antvis.github.io/issues/18#issuecomment-548754442) 和 [额外功能](https://github.com/antvis/antvis.github.io/issues/18#issuecomment-568692771)\n\n### `gatsby-config.js`\n\n```js\n// gatsby-config.js\nconst { repository } = require('./package.json');\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `@antv/gatsby-theme-antv`,\n      options: {\n        // pagesPath: './site/pages',\n        GATrackingId: `UA-XXXXXXXXX-X`,\n        pathPrefix: '/g2',\n        // antd 主题：https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less\n        theme: {\n          'primary-color': '#873bf4',\n        },\n        pwa: true, // 是否开启 gatsby-plugin-offline\n        cname: true, // 是否自动从 siteUrl 中提取 CNAME 文件\n        codeSplit: true, // 是否开启 gatsby 按路由的代码分割，默认为 false\n      },\n    },\n  ],\n  siteMetadata: {\n    title: `AntV`,\n    description: `Ant Visualization solution home page`,\n    githubUrl: repository.url,\n    logoUrl: '', // 自定义 logo\n    navs: [], // 用于定义顶部菜单\n    docs: [], // 用于定义文档页面的二级分类菜单\n    examples: [], // 用于定义演示页面的二级菜单，属性见下方\n    isAntVSite: false, //是否是AntV官网，header样式footer和图表详情页均为定制\n    galleryMenuCloseAll: false, // 是否默认收起 gallery 页面所有 menu\n    showSearch: true, // 是否展示搜索框\n    docsearchOptions: { // algolia 搜索配置\n      versionV3: false, // 目前有两个版本的 docsearch.js，V2.x 和 V3.x，此开关决定用哪一个版本的搜索框，根据申请到的参数版本决定，二者互不兼容，详情见 https://docsearch.algolia.com/\n      appId: 'xxxx', // V3.x 版本 docsearch 需要appId, V2.x 版不需要。\n      apiKey: 'xxxxxx',\n      indexName: 'xxx',\n\n    }\n    showChinaMirror: true, // 是否展示国内镜像链接\n    showLanguageSwitcher: true, // 用于定义是否展示语言切换\n    showAntVProductsCard: true, // 是否展示 AntV 系列产品的卡片链接\n    showGithubStar: false, // 是否展示 Github Star\n    showGithubCorner: true, // 是否展示角落的 GitHub 图标\n    showChartResize: true, // 是否在demo页展示图表视图切换\n    themeSwitcher: 'g2', // 是否在demo页展示主题切换, 取值为'g2' | 'g2plot' 如果不设置则不展示主题切换工具\n    showAPIDoc: true, // 是否在demo页展示API文档\n    showExampleDemoTitle: true, // 有截图的是否要展示 title 名称\n\n    mdPlayground: {\n      // markdown 文档中的 playground 若干设置\n      splitPaneMainSize: '62%',\n    },\n    playground: {\n      container: '\u003ccanvas id=\"container\" /\u003e', // 定义演示的渲染节点，默认 \u003cdiv id=\"container\" /\u003e\n      playgroundDidMount: 'console.log(\"playgroundDidMount\");',\n      playgroundWillUnmount: 'console.log(\"playgroundWillUnmount\");',\n      devDependencies: {\n        // 如果 example 是 ts 文件，需要加上 ts 依赖，才能在 codesandbox 正确运行\n        typescript: 'latest',\n      },\n    },\n    versions: [\n      {\n        '1.x': 'https://1x.ant.design',\n        '2.x': 'https://2x.ant.design',\n        '3.x': 'https://ant.design',\n        '4.x': 'https://next.ant.design',\n      },\n    ],\n    redirects: [\n      {\n        from: /\\/old-url/,\n        to: '/new-url', // 不指定 to 时直接跳转到 https://antv-2018.alipay.com/***\n      },\n    ],\n    announcement: {\n      zh: '站内公告，用于展示一些更新信息，如：文档更新、版本发布等',\n      en:\n        'The announcement in the website, used to display some updated information, such as document update, version release and etc',\n    },\n  },\n};\n```\n\n- `navs`: [props](https://github.com/antvis/gatsby-theme-antv/blob/aa8cdd7e24e965174cbe7173a841fd7d23537e52/%40antv/gatsby-theme-antv/gatsby-node.js#L242-L264)\n- `docs`: [props](https://github.com/antvis/gatsby-theme-antv/blob/aa8cdd7e24e965174cbe7173a841fd7d23537e52/%40antv/gatsby-theme-antv/gatsby-node.js#L242-L264)\n- `examples`: [props](https://github.com/antvis/gatsby-theme-antv/blob/aa8cdd7e24e965174cbe7173a841fd7d23537e52/%40antv/gatsby-theme-antv/gatsby-node.js#L242-L264)\n\n### Components\n\n- [Header Props](https://github.com/antvis/gatsby-theme-antv/blob/master/%40antv/gatsby-theme-antv/site/components/Header.tsx#L13-L39)\n- [Footer Props](https://github.com/antvis/gatsby-theme-antv/blob/046a9c4e32eea50b49347b114714425a9f99b4b7/%40antv/gatsby-theme-antv/site/components/Footer.tsx#L149-L159)\n- [SEO Props](https://github.com/antvis/gatsby-theme-antv/blob/046a9c4e32eea50b49347b114714425a9f99b4b7/%40antv/gatsby-theme-antv/site/components/Seo.tsx#L12-L17)\n- [Banner Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Banner.tsx#L8-L31)\n- [Features Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Features.tsx#L7-L17)\n- [Cases Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Cases.tsx#L14-L25)\n- [Companies Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Companies.tsx#L6-L16)\n\n```jsx\nimport SEO from '@antv/gatsby-theme-antv/site/components/Seo';\nimport Header from '@antv/gatsby-theme-antv/site/components/Header';\nimport Footer from '@antv/gatsby-theme-antv/site/components/Footer';\nimport Banner from '@antv/gatsby-theme-antv/site/components/Banner';\nimport Features from '@antv/gatsby-theme-antv/site/components/Features';\nimport Applications from '@antv/gatsby-theme-antv/site/components/Applications';\nimport Companies from '@antv/gatsby-theme-antv/site/components/Companies';\n\n// @antv/gatsby-theme-antv/components/Header for commonjs version\n\nconst Layout = () =\u003e {\n  const features = [\n    {\n      icon: 'https://gw.alipayobjects.com/zos/basement_prod/5dbaf094-c064-4a0d-9968-76020b9f1510.svg',\n      title: 'xxxxx',\n      description: 'xxxxxxxxxxxxxxxxxxxxxxxxx',\n    },\n    {\n      icon: 'https://gw.alipayobjects.com/zos/basement_prod/0a0371ab-6bed-41ad-a99b-87a5044ba11b.svg',\n      title: 'xxxxx',\n      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\n    },\n    {\n      icon: 'https://gw.alipayobjects.com/zos/basement_prod/716d0bc0-e311-4b28-b79f-afdd16e8148e.svg',\n      title: 'xxxxx',\n      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\n    },\n  ];\n  const cases = [\n    {\n      logo: 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',\n      title: '灯塔专业版',\n      description:\n        '深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金',\n      link: '#',\n      image:\n        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',\n    },\n    // ...\n  ];\n  const companies = [\n    {\n      name: '公司1',\n      image:\n        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Z1NnQ6L4xCIAAAAAAAAAAABkARQnAQ',\n    },\n    {\n      name: '公司2',\n      image:\n        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6u3hTpsd7h8AAAAAAAAAAABkARQnAQ',\n    },\n    // ...\n  ];\n  const notifications = [\n    {\n      type: '测试',\n      title: 'G6 3.2 全新上线！',\n      date: '2019.12.04',\n      link: '#',\n    },\n  ];\n\n  const downloadButton = {\n    text: '下载使用',\n    link: 'https://antv.alipay.com/zh-cn/index.html',\n  };\n\n  return (\n    \u003c\u003e\n      \u003cSEO title=\"蚂蚁数据可视化\" lang=\"zh\" /\u003e\n      \u003cHeader\n        subTitle=\"子产品名\"\n        logo={{\n          link: 'https://antv.alipay.com',\n          img: \u003cimg src=\"url\" /\u003e,\n        }}\n        githubUrl=\"https://github.com/antvis/g2\"\n        // docs={[]}\n        showSearch={false}\n        showGithubCorner={false}\n        showLanguageSwitcher={false}\n        onLanguageChange={(language) =\u003e {\n          console.log(language);\n        }}\n        defaultLanguage=\"zh\"\n      /\u003e\n      \u003cFooter\n      // columns={[]}\n      // bottom={\u003cdiv\u003epowered by antv\u003c/div\u003e}\n      /\u003e\n\n      \u003cBanner\n        coverImage={\u003csvg\u003e\u003c/svg\u003e} // 右侧 banner svg 内容\n        title=\"主页标题\"\n        description=\"主页描述内容描述内容描述内容描述内容\"\n        buttonText=\"按钮文字\"\n        buttonHref={'#按钮链接路径'}\n        notifications={notifications} // 可传 1-2 个内容，若不传则显示 2 个默认通知\n        style={{}}\n        className=\"Banner 的 className\"\n        video=\"视频按钮点开后视频的链接，不传则不会出现视频按钮\"\n        githubStarLink=\"Github Star 链接，不传则不会出现 GitHub Start 按钮\"\n        downloadButton={downloadButton} // 不传则不会出现下载按钮\n      /\u003e\n      \u003cFeatures\n        title=\"优势页面名称\" // 可不传\n        features={features} // 必传\n        style={{}}\n        className=\"Features 的 className\"\n      /\u003e\n      \u003cCases cases={cases} style={{}} className=\"Cases 的 className\" /\u003e\n      \u003cCompanies\n        title=\"公司页面名称\" // 必传\n        companies={companies} // 必传\n        style={{}}\n        className=\"Companies 的 className\"\n      /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n### Custom Tag in Markdown\n\nWe support three type of custom tags in markdown\n\n- **tag**\n\n```md\n\u003ctag color=\"green\" text=\"分类图例\"\u003e分类图例\u003c/tag\u003e\n```\n\nSee [antd Tag components](https://ant.design/components/tag/) for more usage.\n\n- **swatch**\n\n```md\n\u003cswatch colors=\"#F4664A,#30BF78,#FAAD14\" colorNames=\"Red,Green,Yellow\"\u003e\u003c/swatch\u003e\n```\n\nswatch props:\n\n| name       | description | isRequired | type     | default  |\n| ---------- | ----------- | ---------- | -------- | -------- |\n| title      | -           | true       | string   | -        |\n| darkmode   | -           | false      | boolean  | -        |\n| colors     | -           | false      | string   | -        |\n| colornames | -           | false      | string   | -        |\n| grid       | -           | false      | 'sudoku' | 'sudoku' |\n\n- **playground**\n\nInsert demos to markdown document as code playground.\n\n将 demo 以代码预览效果插入到 markdown 文档中。\n\n![](https://gw.alipayobjects.com/mdn/rms_d3dd43/afts/img/A*aXkmTKkZ404AAAAAAAAAAAAAARQnAQ)\n\n```md\n\u003cplayground path='category/basic/demo/ts-demo.ts' rid='container'\u003e\u003c/playground\u003e\n```\n\nplayground props:\n\n| name   | description                                              | isRequired | type   | default     |\n| ------ | -------------------------------------------------------- | ---------- | ------ | ----------- |\n| path   | demo relative path                                       | true       | string | -           |\n| height | height of code playground                                | false      | number | 400         |\n| rid    | specify the container ID when more than one demo in docs | false      | string | 'container' |\n\n## Develop\n\n```bash\nyarn install\nyarn start\n```\n\nVisit https://localhost:8000 to preview.\n\n## Publish to npm\n\n⚠️ If it is your first time for GitHub release, please read the following steps, otherwise, you can skip directly to the third step.\n\n1. Generate a [personal access token](https://github.com/settings/tokens):\n   (release-it only needs \"repo\" access; no \"admin\" or other scopes).\n\n![generate token](https://gw.alipayobjects.com/zos/antfincdn/or185CJhTK/20200814154850.jpg)\n\nClick the button 'Generate token', then your token would be generated. Copy this token as soon as you get it since you won’t be able to see it again after refreshing the web page!\n\n2. Make sure the token is available as an environment variable.\n\nExample:\n\n```bash\nexport GITHUB_TOKEN=\"YOUR TOKEN\"\n```\n\nIn macOS or Linux, this can be added to e.g. ~/.profile or ~/.zshrc, so it's available everytime the shell is used.\n\nMore details for the GitHub releases preperation: [GitHub Releases](https://github.com/release-it/release-it/blob/master/docs/github-releases.md)\n\n3. Run the following commands in your terminal.\n\n```bash\ncd @antv/gatsby-theme-antv\nnpm run release\n```\n\n## Deploy\n\n```bash\nnpm run deploy\n```\n\n\u003e Set envoironment variable `GATSBY_PATH_PREFIX` to `/` in deploy service like netlify to preview pathPrefix site in root domain.\n\n## Add Dependency\n\n```bash\ncd @antv/gatsby-theme-antv\nyarn add shallowequal\n```\n\nor\n\n```bash\nyarn workspace @antv/gatsby-theme-antv add shallowequal\n```\n\n## Q\u0026A\n\n### How to customise layout footer?\n\n```js\n// gatsby-browser.js\nexports.wrapPageElement = ({ element, props }) =\u003e {\n  return React.cloneElement(element, {\n    ...props,\n    ...element.props,\n    // https://github.com/react-component/footer#api\n    footerProps: {\n      bottom: 'xxx',\n    },\n  });\n};\n```\n\n### How to embed other markdown document in a markdown document\n\n```markdown\n`markdown:docs/common/data-mapping.zh.md`\n```\n\n_docs/common/data-mapping.zh.md_ is the path relative to the current project. It supports multiple levels of nested.\n\n## Related libraries\n\n- [Gatsby](https://www.gatsbyjs.org/docs/)\n- [Ant Design](https://github.com/ant-design/ant-design)\n- [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/)\n- [gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/?=highlight#line-highlighting)\n- [Jest](https://jestjs.io/)\n- [Testing Library](https://testing-library.com/)\n- [react-i18next](https://react.i18next.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fgatsby-theme-antv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Fgatsby-theme-antv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fgatsby-theme-antv/lists"}