Skip to content
Starter kit to build site with Gatsby.js & Notion.so
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README-EN.md
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package-lock.json
package.json
yarn.lock

README.md

Gatsby-starter-notion

English Doc | 中文文档

这是一个新手包,帮助你快速地使用 Gatsby.js & Notion.so 构建站点

内置了 gatsby-source-notion-database 插件,将 Notion Database 中的数据转化为 Gatsby 中可用的 Graphql 数据节点。

这里是演示站点:https://gatsby-stater-notion.netlify.com/

快速开始

gatsby new my-gatsby-notion-site https://github.com/mayneyao/gatsby-starter-notion
cd my-gatsby-notion-site
yarn develop

特性

  • 一个简单的博客应用。包含文章列表,文章详情,书单页。
  • 使用 Notion Database 作数据源。
  • 支持 Notion Database 中的 Relation 关联数据。
  • 简单的分页演示,动态创建文章详情页。参见:gatsby-node.js

配置

默认配置 2 个表格,它们之间存在关联关系。分别是

  • posts - 文章表格
  • books - 书单表格

你可以在这个页面找到这 2 个表格。

// gatsby-config.js
    {
      resolve: `gatsby-source-notion-database`,
      options: {
        sourceConfig: [
          {
            name: 'posts',
            table: 'https://www.notion.so/4b50defc60ce4e89a6539f511d9d946f?v=8e71dde4479040b5a3e6ca0d91d3d8e6',
            cacheType: 'html'
          },
          {
            name: 'books',
            table: 'https://www.notion.so/4ae9328e650945eb9adbd882b3b453d3?v=0966bdbd0645437cbcc62e6a933e241c',
            cacheType: 'static'
          }
        ]
      }
    }

cacheType 类型说明

cacheType note
static 表格数据会转化成 graphql 节点 ,本地开发时可以在 http://localhost:8000/___graphql 中查看调试。
html 在 static 的基础上,将记录对应页面的 html 缓存下来(使用 Puppeteer 抓取页面 HTML )。可通过 html 字段访问。
dynamic 数据不会在 build 时候存储,仅记录表格 meta 信息,方便后续在页面中动态获取数据
You can’t perform that action at this time.