Gatsby Theme Antv

⚛️ Polished Gatsby theme for documentation site
Alternatives To Gatsby Theme Antv
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Docz23,3866861,4772 months ago275February 11, 2022110mitTypeScript
✍ It has never been so easy to document your things!
7 months ago4mitJavaScript
💾 ‎ Personal website running on Gatsby, React, and Node.js.
Gatsby Themes1,835211a month ago71September 15, 20239mitTypeScript
Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
Gatsby Starter Portfolio Cara1,370
3 months ago0bsdTypeScript
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Gatsby Starter Minimal Blog1,086
3 months ago30bsdMDX
Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
Awesome Gatsby1,000
10 months ago4
⚛️ 📄 🚀 Awesome list for the mighty Gatsby.js, a blazing fast React static site generator.
9 months ago1August 03, 201619mitJavaScript
A simple, fixed sidebar two columns Gatsby.js blog starter.
Reflexjs745172 years ago25April 14, 202129mitJavaScript
A library for rapid UI development with style props, color modes, themes and variants + starter kits, themes and blocks to help you build Gatsby and Next.js sites faster.
Gatsby Digital Garden591910 months ago13July 07, 202140mitJavaScript
🌷 🌻 🌺 Create a digital garden with Gatsby
15 days ago34mitJavaScript
A list of themes and starters for JAMstack sites.
Alternatives To Gatsby Theme Antv
Select To Compare

Alternative Project Comparisons

Gatsby Theme for AntV ⚛

✨ Polished Gatsby theme for documentation site.

NPM downloads CI status

Dependency Status


  • ⚛ Prerendered static site
  • 🌎 Internationalization support by i18next
  • 📝 Markdown-based documentation and menus
  • 🎬 Examples with live playground
  • 🏗 Unified Theme and Layout
  • 🆙 Easy customized header nav
  • 🧩 Built-in home page components

Websites using it


Create a Gatsby site from gatsby-starter-theme-antv.

$ yarn global add gatsby-cli // or npm install gatsby-cli -g
$ gatsby new mysite

Start developing.

$ cd mysite
$ yarn start

✨ AntV 站点 接入方式额外功能


// 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 主题:
        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: [], // 用于定义演示页面的二级菜单,属性见下方
    isAntVSite: false, //是否是AntV官网,header样式footer和图表详情页均为定制
    galleryMenuCloseAll: false, // 是否默认收起 gallery 页面所有 menu
    showSearch: true, // 是否展示搜索框
    docsearchOptions: { // algolia 搜索配置
      versionV3: false, // 目前有两个版本的 docsearch.js,V2.x 和 V3.x,此开关决定用哪一个版本的搜索框,根据申请到的参数版本决定,二者互不兼容,详情见
      appId: 'xxxx', // V3.x 版本 docsearch 需要appId, V2.x 版不需要。
      apiKey: 'xxxxxx',
      indexName: 'xxx',

    showChinaMirror: true, // 是否展示国内镜像链接
    showLanguageSwitcher: true, // 用于定义是否展示语言切换
    showAntVProductsCard: true, // 是否展示 AntV 系列产品的卡片链接
    showGithubStar: false, // 是否展示 Github Star
    showGithubCorner: true, // 是否展示角落的 GitHub 图标
    showChartResize: true, // 是否在demo页展示图表视图切换
    themeSwitcher: 'g2', // 是否在demo页展示主题切换, 取值为'g2' | 'g2plot' 如果不设置则不展示主题切换工具
    showAPIDoc: true, // 是否在demo页展示API文档
    showExampleDemoTitle: true, // 有截图的是否要展示 title 名称

    mdPlayground: {
      // markdown 文档中的 playground 若干设置
      splitPaneMainSize: '62%',
    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': '',
        '2.x': '',
        '3.x': '',
        '4.x': '',
    redirects: [
        from: /\/old-url/,
        to: '/new-url', // 不指定 to 时直接跳转到***
    announcement: {
      zh: '站内公告,用于展示一些更新信息,如:文档更新、版本发布等',
        'The announcement in the website, used to display some updated information, such as document update, version release and etc',


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: '',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
      icon: '',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      icon: '',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  const cases = [
      logo: '*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
      title: '灯塔专业版',
      link: '#',
    // ...
  const companies = [
      name: '公司1',
      name: '公司2',
    // ...
  const notifications = [
      type: '测试',
      title: 'G6 3.2 全新上线!',
      date: '2019.12.04',
      link: '#',

  const downloadButton = {
    text: '下载使用',
    link: '',

  return (
      <SEO title="蚂蚁数据可视化" lang="zh" />
          link: '',
          img: <img src="url" />,
        // docs={[]}
        onLanguageChange={(language) => {
      // columns={[]}
      // bottom={<div>powered by antv</div>}

        coverImage={<svg></svg>} // 右侧 banner svg 内容
        notifications={notifications} // 可传 1-2 个内容,若不传则显示 2 个默认通知
        className="Banner 的 className"
        githubStarLink="Github Star 链接,不传则不会出现 GitHub Start 按钮"
        downloadButton={downloadButton} // 不传则不会出现下载按钮
        title="优势页面名称" // 可不传
        features={features} // 必传
        className="Features 的 className"
      <Cases cases={cases} style={{}} className="Cases 的 className" />
        title="公司页面名称" // 必传
        companies={companies} // 必传
        className="Companies 的 className"

Custom Tag in Markdown

We support three type of custom tags in markdown

  • tag
<tag color="green" text="分类图例">分类图例</tag>

See antd Tag components for more usage.

  • swatch
<swatch colors="#F4664A,#30BF78,#FAAD14" colorNames="Red,Green,Yellow"></swatch>

swatch props:

name description isRequired type default
title - true string -
darkmode - false boolean -
colors - false string -
colornames - false string -
grid - false 'sudoku' 'sudoku'
  • playground

Insert demos to markdown document as code playground.

将 demo 以代码预览效果插入到 markdown 文档中。

<playground path='category/basic/demo/ts-demo.ts' rid='container'></playground>

playground props:

name description isRequired type default
path demo relative path true string -
height height of code playground false number 400
rid specify the container ID when more than one demo in docs false string 'container'


yarn install
yarn start

Visit https://localhost:8000 to preview.

Publish to npm

⚠️ If it is your first time for GitHub release, please read the following steps, otherwise, you can skip directly to the third step.

  1. Generate a personal access token: (release-it only needs "repo" access; no "admin" or other scopes).

generate token

Click 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!

  1. Make sure the token is available as an environment variable.



In macOS or Linux, this can be added to e.g. ~/.profile or ~/.zshrc, so it's available everytime the shell is used.

More details for the GitHub releases preperation: GitHub Releases

  1. Run the following commands in your terminal.
cd @antv/gatsby-theme-antv
npm run release


npm run deploy

Set envoironment variable GATSBY_PATH_PREFIX to / in deploy service like netlify to preview pathPrefix site in root domain.

Add Dependency

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


yarn workspace @antv/gatsby-theme-antv add shallowequal


How to customise layout footer?

// gatsby-browser.js
exports.wrapPageElement = ({ element, props }) => {
  return React.cloneElement(element, {
    footerProps: {
      bottom: 'xxx',

How to embed other markdown document in a markdown document


docs/common/ is the path relative to the current project. It supports multiple levels of nested.

Related libraries

Popular Theme Projects
Popular Gatsby Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Ant Design