跳到主要内容

知识库

上手开发​

本地环境要求安装有 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.js 的 createPages 中 ，首先用 GraphQL 获取所有文件的路由 信息，然后调用该模板在给定的路由下创建页面。