跳到主要内容

知识库

上手开发

本地环境要求安装有 Node 16。请首先向开发者团队获取 Strapi Token,然后在项目根目录下新建 .env 文件,添加如下内容:

STRAPI_TOKEN=<your-token>

然后运行

npm i
npm run develop

访问 http://localhost:8000/ 即可看到网页。对本地源代码进行修改时网页会自动重载。

代码结构

从 Strapi 获取数据

gatsby-config.js 中定义了 gatsby-source-strapi 插件,它可以获取 Strapi 内容管理系统中大家编写的所有文章。另外在 gatsby-node.js 中还有一个自行编写的 REST 请求,用于获取文章的目录。这些数据会汇总到 Gatsby 的 GraphQL 数据层中,共有三种不同的类型:

  • StrapiArticle 对象:包含了文章的标题和内容,其中内容对应的 Markdown 文档已经用 gatsby-plugin-mdx 插件转化为了 JSX 组件;
  • StrapiSeries 对象:每个对象是一个文章系列(如乳首、前列腺等)的树状目录结构;
  • StrapiIndex 对象:每个对象是文章的路由信息

静态页面生成

首页

首页的页面内容在 src/pages/index.js 中定义。该文件引用了 src/components 中编写的各类组件。

文章

每一篇文章的页面模板在 src/templates/article.js 中定义。在 gatsby-node.jscreatePages 中 ,首先用 GraphQL 获取所有文件的路由 信息,然后调用该模板在给定的路由下创建页面。