@aaromp/gatsby-source-ghost 中文文档教程

发布于 4年前 浏览 19 项目主页 更新于 3年前

Gatsby Source Ghost

用于将数据从 Ghost 拉入 Gatsby.js 的源插件,使用 Ghost 内容 API

  • Demo: https://gatsby.ghost.org
  • Gatsby Starter https://github.com/TryGhost/gatsby-starter-ghost
  • Documentation: https://docs.ghost.org/api/gatsby/

Install

yarn add gatsby-source-ghost

npm install --save gatsby-source-ghost

How to use

gatsby-config.js 的插件配置:

{
   resolve: `gatsby-source-ghost`,
   options: {
       apiUrl: `https://<your-subdomain>.ghost.io`,
       contentApiKey: `<your content api key>`,
       version: `v3` // Ghost API version, optional, defaults to "v3".
                     // Pass in "v2" if your Ghost install is not on 3.0 yet!!!
   }
}

apiUrl Ghost Content API URL - 对于 Ghost(Pro) 客户,这是您的 .ghost.io 域,它与用于查看管理面板的 URL 相同,但没有 /ghost子目录。 这应该通过 https 提供。

contentApiKey 从 Ghost Admin 的“集成”屏幕复制的“内容 API 密钥”。

如果您想将这些值保密(如果您的网站不公开),您可以使用环境变量 .

How to query

Ghost 提供 5 种节点类型:帖子、页面、作者、标签和设置。

可用于每种资源类型的完整字段集的文档可以是 在 Content API 文档中找到。 帖子和页面具有相同的属性。

Example Post Query

{
  allGhostPost(sort: { order: DESC, fields: [published_at] }) {
    edges {
      node {
        id
        slug
        title
        html
        published_at
        ...
        tags {
          id
          slug
          ...
        }
        primary_tag {
          id
          slug
          ...
        }
        authors {
          id
          slug
          ...
        }
      }
    }
  }
}

Filter Posts by Tag

一个常见但棘手的按标签过滤帖子的例子,可以像这样实现(Gatsby v2+):

{
  allGhostPost(filter: {tags: {elemMatch: {slug: {eq: $slug}}}}) {
    edges {
      node {
        slug
        ...
      }
    }
  }
}

Query Settings

设置节点不同,因为只有一个对象,它具有在此处列出的属性。

{
  allGhostSettings {
    edges {
      node {
        title
        description
        lang
        ...
        navigation {
            label
            url
        }
      }
    }
  }
}

查询其他节点类型

Post、Page、Author 和 Tag 节点的工作方式相同。 在此查询中使用您需要的节点类型:

{
  allGhost${NodeType} {
    edges {
      node {
        id
        slug
        ...
      }
    }
  }
}

Copyright & License

版权所有 (c) 2013-2020 Ghost Foundation - 根据 MIT 许可证 发布。

Gatsby Source Ghost

Source plugin for pulling data into Gatsby.js from Ghost, using the Ghost Content API.

  • Demo: https://gatsby.ghost.org
  • Gatsby Starter https://github.com/TryGhost/gatsby-starter-ghost
  • Documentation: https://docs.ghost.org/api/gatsby/

Install

yarn add gatsby-source-ghost

npm install --save gatsby-source-ghost

How to use

Plugin configuration for gatsby-config.js:

{
   resolve: `gatsby-source-ghost`,
   options: {
       apiUrl: `https://<your-subdomain>.ghost.io`,
       contentApiKey: `<your content api key>`,
       version: `v3` // Ghost API version, optional, defaults to "v3".
                     // Pass in "v2" if your Ghost install is not on 3.0 yet!!!
   }
}

apiUrl Ghost Content API URL - for Ghost(Pro) customers this is your .ghost.io domain, it’s the same URL used to view the admin panel, but without the /ghost subdirectory. This should be served over https.

contentApiKey The "Content API Key" copied from the "Integrations" screen in Ghost Admin.

If you want to keep these values private (if your site is not public) you can do so using environment variables.

How to query

There are 5 node types available from Ghost: Post, Page, Author, Tag, and Settings.

Documentation for the full set of fields made available for each resource type can be found in the Content API docs. Posts and Pages have the same properties.

Example Post Query

{
  allGhostPost(sort: { order: DESC, fields: [published_at] }) {
    edges {
      node {
        id
        slug
        title
        html
        published_at
        ...
        tags {
          id
          slug
          ...
        }
        primary_tag {
          id
          slug
          ...
        }
        authors {
          id
          slug
          ...
        }
      }
    }
  }
}

Filter Posts by Tag

A common but tricky example of filtering posts by tag, can be achieved like this (Gatsby v2+):

{
  allGhostPost(filter: {tags: {elemMatch: {slug: {eq: $slug}}}}) {
    edges {
      node {
        slug
        ...
      }
    }
  }
}

Query Settings

The settings node is different as there's only one object, and it has the properties listed here.

{
  allGhostSettings {
    edges {
      node {
        title
        description
        lang
        ...
        navigation {
            label
            url
        }
      }
    }
  }
}

Query Other Node Types

The Post, Page, Author and Tag nodes all work the same. Use the node type you need in this query:

{
  allGhost${NodeType} {
    edges {
      node {
        id
        slug
        ...
      }
    }
  }
}

Copyright & License

Copyright (c) 2013-2020 Ghost Foundation - Released under the MIT license.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文