Gridsome 入门

¥Getting Started with Gridsome

🧹 删除了集成指南

Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。

¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的集成页面。

¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.

同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。

¥In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.

本集成指南遵循快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。

¥This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

如果你尚未阅读快速入门指南，则使用 Gridsome 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。

¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Gridsome remains the same except that you do not fetch the same content.

创建一个 Gridsome 应用

¥Create a Gridsome app

使用 Gridsome CLI 创建一个基本的 Gridsome 应用。

¥Create a basic Gridsome application using the Gridsome CLI.

gridsome create gridsome-app

配置 Gridsome

¥Configure Gridsome

Gridsome 是静态站点生成器，将在构建时从 Strapi 获取你的内容。你需要配置 Gridsome 才能与 Strapi 应用进行通信。

¥Gridsome is a Static Site Generator and will fetch your content from Strapi at build time. You need to configure Gridsome to communicate with your Strapi application.

yarn add @gridsome/source-strapi

将 @gridsome/source-strapi 添加到 gridsome.config.js 文件的插件部分：

¥Add the @gridsome/source-strapi to the plugins section in the gridsome.config.js file:

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: '@gridsome/source-strapi',
      options: {
        apiURL: `http://localhost:1337`,
        queryLimit: 1000, // Defaults to 100
        contentTypes: [`restaurant`, `category`],
      },
    },
  ],
};

GET 请求你的集合类型

¥GET Request your collection type

对 restaurant 集合类型执行 GET 请求以获取所有餐厅。

¥Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

确保你激活了 restaurant 集合类型的 find 权限。

¥Be sure that you activated the find permission for the restaurant collection type.

Example GET request

query {
  allStrapiRestaurant {
    edges {
      node {
        id
        name
        description
      }
    }
  }
}

Example response

{
  "data": {
    "allStrapiRestaurant": {
      "edges": [
        {
          "node": {
            "id": 1,
            "name": "Biscotte Restaurant",
            "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
            "categories": [1]
          }
        }
      ]
    }
  }
}

示例

¥Example

./src/pages/Index.vue

<template>
<Layout>
  <ul>
    <li v-for="restaurant in $page.allStrapiRestaurant.edges" :key="restaurant.node.id">
      {{ restaurant.node.name }}
      <ul>
        <li v-for="category in restaurant.node.categories">
          <g-link :to="'categories/' + category.id">{{ category.name }}</g-link>
        </li>
      </ul>
    </li>
  </ul>
</Layout>
</template>

<page-query>
  query {
      allStrapiRestaurant {
        edges {
          node {
            id
            name
            categories {
              id
              name
            }
          }
        }
      }
    }
</page-query>

对 category 集合类型执行 GET 请求，以获取具有所有关联餐厅的特定类别。

¥Execute a GET request on the category collection type in order to fetch a specific category with all the associated restaurants.

确保你激活了 category 集合类型的 findOne 权限。

¥Be sure that you activated the findOne permission for the category collection type.

Example GET request

query {
  strapiCategory(id: 1) {
    id
    name
    restaurants {
      name
      description
    }
  }
}

Example response

{
  "data": {
    "strapiCategory": {
      "id": "1",
      "name": "French Food",
      "restaurants": [
        {
          "name": "Biscotte Restaurant",
          "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
        }
      ]
    }
  },
  "extensions": {}
}

示例

¥Example

./src/pages/Index.vue

<template>
<Layout>
  <h1>{{ $page.strapiCategory.name }}</h1>
  <ul>
    <li v-for="restaurant in $page.strapiCategory.restaurants" :key="restaurant.id">{{ restaurant.name }}</li>
  </ul>
</Layout>
</template>

<page-query>
  query  {
    strapiCategory(id: 1) {
      id
      name
      restaurants {
        name
        description
      }
    }
  }
</page-query>

我们可以为每个类别生成页面。

¥We can generate pages for each category.

通过使用以下内容更新 gridsome-server.js 文件，告诉 Gridsome 为每个类别生成一个页面：

¥Tell Gridsome to generate a page for each category by updating the gridsome-server.js file with the following:

module.exports = function(api) {
  api.createPages(async ({ graphql, createPage }) => {
    const { data } = await graphql(`
      {
        allStrapiCategory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `);

    const categories = data.allStrapiCategory.edges;

    categories.forEach(category => {
      createPage({
        path: `/categories/${category.node.id}`,
        component: './src/templates/Category.vue',
        context: {
          id: category.node.id,
        },
      });
    });
  });
};

创建一个 ./src/templates/Category.vue 文件，该文件将显示每个类别的内容：

¥Create a ./src/templates/Category.vue file that will display the content of each one of your category:

<template>
  <Layout>
    <div>
      <h1>{{ $page.category.name }}</h1>
      <ul>
        <li v-for="restaurant in $page.category.restaurants">{{ restaurant.name }}</li>
      </ul>
    </div>
  </Layout>
</template>

<page-query>
  query Category($id: ID!) {
      category: strapiCategory(id: $id) {
        name
        restaurants {
          id
          name
        }
      }
    }
</page-query>

你可以通过浏览 http://localhost:8080/categories/<id-of-category> 找到你的餐厅类别。

¥You can find your restaurant categories by browsing http://localhost:8080/categories/<id-of-category>.

创建一个 Gridsome 应用​

配置 Gridsome​

GET 请求你的集合类型​

示例​

示例​

创建一个 Gridsome 应用

配置 Gridsome

GET 请求你的集合类型

示例

示例