Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 信息,方便后续在页面中动态获取数据

About

Starter kit to build site with Gatsby.js & Notion.so

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published