Gatsby Theme for Your web site ⚛
✨ Polished Gatsby theme for documentation site.
Features
- ⚛ 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
Usage
Create a Gatsby site from gatsby-theme-hansin.
$ yarn global add gatsby-cli // or npm install gatsby-cli -g$ gatsby new mysite https://github.com/hansinhu/gatsby-theme-hansin-starter
Start developing.
$ cd mysite$ yarn start
gatsby-config.js
// gatsby-config.jsconst version repository homepage = ; moduleexports = plugins: resolve: 'gatsby-theme-hansin' options: theme: 'primary-color': '#fa4946' siteMetadata: title: 'Your Site Title' description: 'Site Description from meta info' siteUrl: homepage logoUrl: 'https://f.cfcdn.club/assets/4e4863f9b1b33ffdc7821e872317c11a_131x128.png' githubUrl: repositoryurl navs: slug: 'docs/specification/getting-started' title: zh: '设计语言' en: 'Specification' slug: 'docs/other' title: zh: '其他文档' en: 'other' slug: 'examples' title: zh: '图表演示' en: 'Examples' slug: 'independent' title: zh: '独立' en: 'MyApp' // target: '_blank', docs: slug: 'specification/category' title: zh: '分类一' en: 'category1' order: 4 slug: 'specification/category/three' title: zh: '第三层' en: 'three level' order: 2 slug: 'other/category' title: zh: '分类二' en: 'category2' order: 4 examples: slug: 'category' icon: 'pie' title: zh: '饼图分类' en: 'Category' versions: version: `` '2.x': `` '1.x': `` moreNavCards: icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'More 1-1' url: `` description: '数据驱动,高度易用,可扩展的可视化图形语法。' icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'More 1-2' url: `` description: '数据驱动,高度易用,可扩展的可视化图形语法。' icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'More 1-3' url: `` description: '数据驱动,高度易用,可扩展的可视化图形语法。' icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'More 1-4' url: `` description: '数据驱动,高度易用,可扩展的可视化图形语法。' icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'More 1-5' url: `` description: '数据驱动,高度易用,可扩展的可视化图形语法。' footerLinks: title: 'Footer01' icon: 'https://gw.alipayobjects.com/zos/antfincdn/trEfLRh5pc/G2%252520keshihuatuxingyufa.svg' slogan: '可视化引擎' description: '数据驱动,高度易用,可扩展的可视化图形语法。' category: 'ecology' items: icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer01-1' url: `` icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer01-2' url: `` title: 'Footer02' icon: 'https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg' slogan: '移动可视化方案' description: '专注于移动端的可视化解决方案,兼容 H5/小程序/Weex 等多端环境' category: 'ecology' items: icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer02-1' url: `` icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer02-2' url: `` title: 'Footer03' icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' items: icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer03-1' url: `` description: '企业级 UI 设计语言' openExternal: true icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer03-2' url: `` description: '知识创作与分享工具' openExternal: true icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Footer03-3' url: `` description: '中台建站平台' openExternal: true bottomLinks: icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Bottom1' url: `` icon: 'https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg' title: 'Bottom2' url: `` title: 'Bottom3' url: `` hiddenThemeAuthor: false siteCopyright: '© 2020 XXXXXX' playground: container: '<div id="container" class="ok" />' playgroundDidMount: 'console.log("playgroundDidMount");' playgroundWillUnmount: 'console.log("playgroundWillUnmount");' dependencies: '@antv/l7': 'beta' htmlCodeTemplate: `<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>{{title}}</title> </head> <body> <div id="container" /> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script>{{code}} </script> </body></html>` redirects: ;
Components
import SEO from 'gatsby-theme-hansin/site/components/Seo';import Header from 'gatsby-theme-hansin/site/components/Header';import Footer from 'gatsby-theme-hansin/site/components/Footer';import Banner from 'gatsby-theme-hansin/site/components/Banner';import Features from 'gatsby-theme-hansin/site/components/Features';import Applications from 'gatsby-theme-hansin/site/components/Applications';import Companies from 'gatsby-theme-hansin/site/components/Companies'; // gatsby-theme-hansin/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 ="蚂蚁数据可视化" ="zh" /> <Header ="子产品名" = ="https://github.com/antvis/g2" // = = = = = ="zh" /> <Banner = // 右侧 内容 ="主页标题" ="主页描述内容描述内容描述内容描述内容" ="按钮文字" = = // 可传 个内容,若不传则显示 个默认通知 = ="Banner 的 className" ="视频按钮点开后视频的链接,不传则不会出现视频按钮" ="Github Star 链接,不传则不会出现 GitHub Start 按钮" = // 不传则不会出现下载按钮 /> <Features ="优势页面名称" // 可不传 = // 必传 = ="Features 的 className" /> <Cases = = ="Cases 的 className" /> <Companies ="公司页面名称" // 必传 = // 必传 = ="Companies 的 className" /> </> ;;
Develop
yarn installyarn start
Visit https://localhost:8000 to preview.
Publish to npm
cd gatsby-theme-hansinnpm run release
Deploy
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 gatsby-theme-hansinyarn add shallowequal
or
yarn workspace gatsby-theme-hansin shallowequal