下面是如何使用Airtable CMS后端制作GatsbyJS博客。在Airtable，我们使任何人都可以创建他们所需的工具，而不仅仅是开发人员，以便完成对他们重要的工作。你不需要知道任何代码来构建一个完全按照你的团队想要的方式工作的CMS。对于那些确实想在其基础上添加一些自定义代码的人，Airtable API为您提供了许多创建令人兴奋的工具的选项。在这篇技术文章中，我们将向您展示如何使用GatsbyJS和Airtable为您的博客构建一个定制的CMS。静电场发生器简介现代JavaScript框架节点.js以及React.js公司让您可以构建任何类型的web站点或应用程序，但开始通常需要大量样板文件和后端配置。如果您想利用这些框架进行站点设计，而不需要后端的麻烦，您可以使用GatsbyJS之类的静态站点生成器，它将数据和脚本一起编译成一个资产包，可以从任何web主机轻松地提供服务，而无需支持数据库或服务器应用程序。但是，云服务器哪家好，静态站点生成器中的"static"意味着您必须在内容更改时重新构建站点。这使得状态跟踪内容变得格外重要，因此大多数静态站点生成器都会与某种内容管理系统（CMS）在构建时检索内容。在本指南中，我们将向您展示如何使用Kev Zettler开发的gatsby source Airtable插件来访问Airtable API，从而制作一个带有Airtable CMS后端的GatsbyJS博客。在这个过程中，我们将进一步了解GraphQL，一种位于GatsbyJS核心的结构化查询语言。GatsbyJS静态站点生成器入门GatsbyJS构建了一个渐进式的web应用程序站点，这些站点具有使用"本地"应用程序的平滑体验节点.js, React.js公司，React路由器，Webpack和各种插件。构建过程还使得添加其他库（如样式化组件）变得容易，情感.js、引导带、索环和版式.js.为了生成页面，GatsbyJS将布局模板应用于通过GraphQL查询检索的内容。查询的标准内容源保存在本地文件中，但是有许多官方和社区开发的内容插件。还有许多启动程序集合的预先制作的页面模板，已经配置了扩展和内容插件。今天，我们将修改名为gatsby hampton theme的starter，以使用Airtable代替markdown文件源代码插件。为了展示Airtable附件字段的强大功能，我们还将使用post header图像扩展模板。要安装GatsbyJS，首先需要确保节点.js，以及纱线包管理器，这里有特定于平台的安装信息。如果您想了解更多，GatsbyJS项目还有很好的通用教程和文档。安装纱线将安装节点.js同样，完成后，大数据的概念，您可以通过执行以下命令来安装GatsbyJS：yarn global添加gatsby cli接下来，使用hampton starter创建一个新的GatsbyJS项目：盖茨比新airtable博客https://github.com/davad/gatsby-hampton-theme获取模板和必要的依赖项后，就可以使用以下内容构建模板站点：cd可播放博客盖茨比发展这将编译内容和模板，大数据的商业价值，然后生成一个带有站点的web服务器，可以在：8000/台。汉普顿初学者提供了一个最小的首页，博客和其他页面可以通过侧边栏菜单访问。要使用Airtable post数据，我们需要修改提供给blog页面的GraphQL查询。GraphQL项目有深入的文档和教程，您可以阅读，但是GatsbyJS让您非常容易亲自探索。在您的GatsbyJS开发站点运行后，前往：8000/\uuu graphql，用于所有站点数据的实时查询接口。要查看此操作，请在左窗格中输入以下查询，然后按Ctrl+enter键运行它：{allMarkdownRemark（排序：{order:DESC，字段：[frontmatter\uuuu date]}）{边缘{节点{节选（剪枝长度：250）身份证件前物质{标题日期（formatString:"MMMM-DD，YYYY"）}字段{鼻涕虫}}}}}这个GraphQL查询为blog提供信息/索引.js生成博客文章列表的文件。GraphQL查询处理分层映射中的链接数据对象关键：价值体系如果您以前使用过JSON或其他API结构，这可能会很熟悉。此查询中的allMarkdownRemark对象通过边连接到从markdown文件处理的所有数据节点，查询返回每个连接节点的信息字段。为了便于在查询中将降价文件替换为数据源，在下一节中，我们将使用类似于hampton starter中已经使用的字段名来设置Airtable库。建立一个可飞行的CMS用Airtable blog这样的描述性名称为Airtable CMS创建一个新的基，并给表起一个类似CMS的名称，字段（列）设置为以下名称和数据类型。标题—单行文本字段—条目的标题是表的主字段的良好标识符。slug-单行文本字段-每个帖子url的唯一组件。author-单行文本字段-公开显示的作者字符串。图像-附件字段-用作功能标头的图像。PostMarkdown-长文本字段-文章的书面内容，淘客网，格式为markdown。日期-日期字段-公开显示的发布日期。发布状态-单选字段-控制发布的文章。为了帮助您开始，我们在这里设置了一个示例库：确保你的数据库有几个记录（行），其中包含示例文章的占位符信息，并将至少一条记录设置为"发布"。最后一步是在你的数据库中创建一个名为published的新网格视图，并在"仅显示记录"设置为"publish"时添加一个过滤器一旦建立了基础，就可以使用Airtable最便捷的特性之一：API参考，您可以通过访问base右上角的"帮助"菜单并选择API文档来找到：API文档会自动根据您的基本结构进行自定义！它提供了您需要的一切，包括从GatsbyJS连接所需的API密钥。要获取密钥，请单击"显示API密钥"复选框，然后选择节点.js""选项卡。在"身份验证"部分，您将看到两条重要的行：apiKey:'您的\u API_密钥'以及：变量基数=Airtable.底座（'YOUR'u BASE_ID'）；我们将使用这两个值来配置gatsby source airtable插件，您可以在项目文件夹中使用以下命令与降价处理插件一起安装：纱线加盖茨比源航表统一备注html完成后，打开盖茨比-配置文件在第10行插件列表的开头添加以下段落（包含您自己的信息）：{resolve:'gatsby source airtable'，选项：{apiKey:'您的\u API_密钥'，baseId:'你的'u BASE'u ID'，tableName:'CMS'，tableView:'已发布'，查询名称：""}},从上面复制并粘贴apiKey和BaseId，如果您一直跟随demo base，那么您的tableName为"CMS"，tableView为"published"。修改gatsby-hampton主题查询Airtable数据要使用空降CMS数据，我们首先需要修改盖茨比-节点.js，根据slug字段将API记录转换为post节点。在第39行，云服务器购买，替换allMarkdownRemark GraphQL查询：`{所有降价备注{边缘{节点{字段{鼻涕虫}}}}}`使用新的allAirtable对象查询：`{所有的{边缘{节点{鼻涕虫}}}}`数据对象和变量也需要在第53行的页面创建函数中更新：result.data.allmarkdown备注.边缘.forEach（边=>{创建页面({路径：`${edge.node.fields.slug}`，组件：斜杠（blogPostTemplate），上下文：{鼻塞：edge.node.fields.鼻涕虫}});});GraphQL将数据字段馈送到JavaScript对象属性中，可以通过点表示法进行访问，如下所示：edge.node.fields.鼻涕虫。这意味着我们需要用下面的行替换上面第53行的代码，这些行使用新的allAirtable对象并删除.fields。在我们基地的层次结构中不需要的级别：结果.data.allAirtable.边缘.forEach（边=>{创建页面({路径：`${edge.node.slug}`,组件：斜杠（blogPostTemplate），上下文：{鼻塞：edge.node.slug}});});完成后请保存此文件，但请在重新加载站点之前执行下一步。在博客帖子模板中使用Airtable字段要在帖子中使用Airtable字段，我们需要修改src/templates/blog post-模板.js. 为了清楚起见，我们将按照与上面相同的顺序，从替换第38行的GraphQL查询开始：markdownRemark（字段：{slug:{eq:$slug}}）{html格式时间阅读前物质{日期（formatString:"MMMM-DD，YYYY"）标题作者{身份证件}}我们的新查询按slug搜索airtable data node并返回所有必需的post信息：airtable（slug:{eq:$slug}）{鼻涕虫标题作者邮戳图像{网址}日期}下标线处的备注18数据：const{markdownRemark:post}=data；还需要切换到airtable，如下所示：const{airtable:post}=data；markdownRemark对象有一个从markdown文件自动生成的html字段。因为gatsby source airtable对从airtable字段中提取的文本的格式是不可知的，所以我们需要在布局中将markdown单独处理为html。我们可以使用统一处理器执行此操作，首先在第2行插入以下内容：从"unified"导入unified；从remark parse导入降价；从"remark html"导入html；页面的实际布局从第17行开始React.js公司组件，带