快速入门指南

¥Quick Start Guide

Strapi 提供了很大的灵活性。无论你是想快速查看最终结果，还是想更深入地了解产品，我们都能满足你的需求。在本教程中，我们将采用 DIY 方法，从头开始构建项目和数据结构，然后将项目部署到 Strapi Cloud 以从那里添加数据。

¥Strapi offers a lot of flexibility. Whether you want to go fast and quickly see the final result, or would rather dive deeper into the product, we got you covered. For this tutorial, we'll go for the DIY approach and build a project and data structure from scratch, then deploy your project to Strapi Cloud to add data from there.

☑️ Prerequisites

在安装 Strapi 之前，你的计算机上必须安装以下要求：

¥Before installing Strapi, the following requirements must be installed on your computer:

• Node.js：仅支持 活动 LTS 或维护 LTS 版本（目前支持 v18 和 v20）。不支持 Node 的奇数版本（称为 Node.js 的 "current" 版本）（例如 v19、v21）。

  ¥Node.js: Only Active LTS or Maintenance LTS versions are supported (currently v18 and v20). Odd-number releases of Node, known as "current" versions of Node.js, are not supported (e.g. v19, v21).

• 你首选的 Node.js 包管理器：

  ¥Your preferred Node.js package manager:

  • npm(v6 及以上)

    ¥npm (v6 and above)

  • yarn

• Python（如果使用 SQLite 数据库）

  ¥Python (if using a SQLite database)

你还需要 安装 git 并拥有 GitHub 账户才能将项目部署到 Strapi Cloud。

¥You will also need to install git and to have a GitHub account to deploy your project to Strapi Cloud.

🚀 A 部分：使用 Strapi 创建一个新项目

¥🚀 Part A: Create a new project with Strapi

我们将首先通过在终端中运行命令在你的计算机上创建一个新的 Strapi 项目，然后注册我们的第一个本地管理员用户。

¥We will first create a new Strapi project on your machine by running a command in the terminal, and then register our first local administrator user.

请按照以下步骤操作，单击可切换内容以阅读更多说明。

¥Follow the steps below by clicking on the togglable content to read more instructions.

Step 1: Run the installation script

步骤 1：运行安装脚本

¥Step 1: Run the installation script

在终端中运行以下命令：

¥Run the following command in a terminal:

Yarn

yarn create strapi-app my-project --quickstart

NPM

npx create-strapi-app@latest my-project --quickstart

👀 信息

quick start 安装使用 SQLite 数据库设置 Strapi。还可以使用其他数据库和安装选项（参见 CLI 安装指南）。

¥The quick start installation sets up Strapi with a SQLite database. Other databases and installation options are available (see CLI installation guide).

Step 2: Register the first local administrator user

第 2 步：注册第一个本地管理员用户

¥Step 2: Register the first local administrator user

安装完成后，你的浏览器会自动打开一个新选项卡。

¥Once the installation is complete, your browser automatically opens a new tab.

填写表格后，你将创建自己的账户。完成后，你将成为该 Strapi 应用的第一个管理员用户。欢迎登上，命令器！

¥By completing the form, you create your own account. Once done, you become the first administrator user of this Strapi application. Welcome aboard, commander!

你现在可以访问 管理面板：

¥You now have access to the admin panel:

🥳 CONGRATULATIONS!

你刚刚创建了一个新的 Strapi 项目！你可以开始使用 Strapi 并使用我们的 用户指南 自行发现该产品，或继续执行下面的 B 部分。

¥You have just created a new Strapi project! You can start playing with Strapi and discover the product by yourself using our User Guide, or proceed to part B below.

🛠 B 部分：使用内容类型生成器构建数据结构

¥🛠 Part B: Build your data structure with the Content-type Builder

安装脚本刚刚创建了一个空项目。现在，受 FoodAdvisor 示例应用的启发，我们将指导你创建餐厅目录。

¥The installation script has just created an empty project. We will now guide you through creating a restaurants directory, inspired by our FoodAdvisor example application.

本地 Strapi 项目的管理面板在 http://localhost:1337/admin 运行。你将在这里花费大部分时间来创建和更新内容。

¥The admin panel of a local Strapi project runs at http://localhost:1337/admin. This is where you will spend most of your time creating and updating content.

首先，我们将为你的内容构建一个数据结构。这只能在开发模式下完成，这是本地创建的项目的默认模式。

¥First we will build a data structure for your content. This can only be done while in development mode, which is the default mode for projects that are created locally.

💡 TIP

如果服务器尚未运行，请在终端中将 cd 放入 my-project 文件夹并运行 npm run develop（或 yarn develop）来启动它。

¥If the server is not already running, in your terminal, cd into the my-project folder and run npm run develop (or yarn develop) to launch it.

内容类型生成器可帮助你创建数据结构。当使用 Strapi 创建空项目时，聚会就从这里开始！

¥The Content-Type Builder helps you create your data structure. When creating an empty project with Strapi, this is where to get the party started!

Step 1: Create a "Restaurant" collection type

步骤 1：创建 "餐厅" 集合类型

¥Step 1: Create a "Restaurant" collection type

你的餐馆目录最终将包含许多餐馆，因此我们需要创建一个 "餐厅" 集合类型。然后我们可以描述添加新餐厅条目时要显示的字段：

¥Your restaurants directory will eventually include many restaurants, so we need to create a "Restaurant" collection type. Then we can describe the fields to display when adding a new restaurant entry:

1. 单击“创建你的第一个内容类型”按钮。
   如果未显示，请转到

   ¥Click on the Create your first Content type button.
   If it's not showing up, go to

主导航中的 内容类型生成器。2.3.4.5.6.7.8.9.10.最后，点击保存并等待 Strapi 重新启动。

¥Content-type Builder in the main navigation. 2. Click on Create new collection type. 3. Type Restaurant for the Display name, and click Continue.\ 4. Click the Text field. 5. Type Name in the Name field. 6. Switch to the Advanced Settings tab, and check the Required field and the Unique field settings. 7. Click on Add another field. 8. Choose the Rich text (Blocks) field in the list. 9. Type Description under the Name field, then click Finish. 10. Finally, click Save and wait for Strapi to restart.

Strapi 重新启动后，"餐厅" 将列在下面

¥Once Strapi has restarted, "Restaurant" is listed under

导航中的内容管理器 > 集合类型。哇，你刚刚创建了第一个内容类型！这太酷了 - 让我们现在再创建一个，只是为了好玩。

¥Content Manager > Collection types in the navigation. Wow, you have just created your very first content-type! It was so cool — let's create another one right now, just for pleasure.

Step 2: Create a "Category" collection type

第 2 步：创建 "类别" 集合类型

¥Step 2: Create a "Category" collection type

如果我们的餐厅目录有一些类别，这将有助于变得更有条理。让我们创建一个 "类别" 集合类型：

¥It would help getting a bit more organized if our restaurants directory had some categories. Let's create a "Category" collection type:

1. 去

   ¥Go to

主导航中的 内容类型生成器。2.3.4.5.6.7.8.9.

¥Content-type Builder in the main navigation. 2. Click on Create new collection type. 3. Type Category for the Display name, and click Continue. 4. Click the Text field. 5. Type Name in the Name field. 6. Switch to the Advanced Settings tab, and check the Required field and the Unique field settings. 7. Click on Add another field. 8. Choose the Relation field. 9. In the center, select the icon that represents "many-to-many"

。 文本应为 Categories has and belongs to many Restaurants。

¥. The text should read Categories has and belongs to many Restaurants.

11. 最后，单击“完成”，然后单击“保存”按钮，然后等待 Strapi 重新启动。

    ¥Finally, click Finish, then the Save button, and wait for Strapi to restart.

🥳 CONGRATULATIONS!

你刚刚为 Strapi 项目创建了一个基本数据结构！你可以继续使用 内容类型生成器，或者继续下面的 C 和 D 部分来发现 Strapi Cloud 并将实际内容添加到你的项目中。

¥You have just created a basic data structure for your Strapi project! You can keep on playing with the Content-type Builder, or proceed to parts C and D below to discover Strapi Cloud and add actual content to your project.

☁️ C 部分：部署到 Strapi 云

¥☁️ Part C: Deploy to Strapi Cloud

现在你美丽的第一个 Strapi 项目已在本地运行，是时候让全世界看到它的现场表演了！托管项目最直接的方法是使用 Strapi Cloud。在部署到 Strapi Cloud 之前，你需要将 Strapi 项目托管在在线存储库上 - 我们将使用 GitHub。

¥Now that your beautiful first Strapi project is working locally, it's time for the world to see it live! The most straightforward way to host your project is to use Strapi Cloud. Before deploying to Strapi Cloud, you will need to host your Strapi project on an online repository — we will use GitHub.

Step 1: Host the code of your Strapi project on GitHub

步骤 1：在 GitHub 上托管 Strapi 项目的代码

¥Step 1: Host the code of your Strapi project on GitHub

创建一个新的 GitHub 存储库并将 Strapi 项目的代码推送到此存储库。如果你还不熟悉 GitHub，下面的可切换内容应该可以帮助你入门 👇

¥Create a new GitHub repository and push the code of your Strapi project to this repository. If you're not already familiar with GitHub, the togglable content below should get you started 👇

Steps required to push your Strapi project code to GitHub:

1. 在终端中，确保你仍在托管我们创建的 Strapi 项目的 my-project 文件夹中。如果到目前为止你密切关注本教程，我们应该仍然在那里。

   ¥In the terminal, ensure you are still in the my-project folder that hosts the Strapi project we created. If you followed this tutorial closely so far, we should still be there.

2. 运行 git init 命令为此文件夹初始化 git。

   ¥Run the git init command to initialize git for this folder.

3. 运行 git add . 命令将所有修改的文件添加到 git 索引中。

   ¥Run the git add . command to add all modified files to the git index.

4. 运行 git commit -m "Initial commit" 命令以创建包含所有添加更改的提交。

   ¥Run the git commit -m "Initial commit" command to create a commit with all the added changes.

5. 登录你的 GitHub 账户和 创建一个新的存储库。为新存储库命名，例如 my-first-strapi-project，并记住该名称。

   ¥Log in into your GitHub account and create a new repository. Give the new repository a name, for instance my-first-strapi-project, and remember this name.

6. 返回终端并将本地存储库推送到 GitHub：

   ¥Go back to the terminal and push your local repository to GitHub:

A。 运行类似于以下内容的命令：git remote add origin git@github.com:yourname/my-first-strapi-project.git，确保将 yourname 替换为你的实际 GitHub 配置文件名称，将 my-first-strapi-project 替换为你在步骤 4 中使用的实际名称。

¥a. Run a command similar to the following: git remote add origin git@github.com:yourname/my-first-strapi-project.git, ensuring you replace yourname by your actual GitHub profile name, and my-first-strapi-project by the actual name you used at step 4.

b. 运行 git push --set-upstream origin main 命令以最终将提交推送到 GitHub 存储库。

¥b. Run the git push --set-upstream origin main command to finally push the commit to your GitHub repository.

有关通过命令行接口使用 git 的其他信息可以在 GitHub 官方文档。

¥Additional information about using git with the command line interface can be found in the official GitHub documentation.

Step 2: Create a Strapi Cloud account and a new Strapi Cloud project

第 2 步：创建 Strapi Cloud 账户和新的 Strapi Cloud 项目

¥Step 2: Create a Strapi Cloud account and a new Strapi Cloud project

要创建新的 Strapi 云账户：

¥To create a new Strapi Cloud account:

1. 导航至 Strapi 云 登录页面。

   ¥Navigate to the Strapi Cloud login page.

2. 单击“继续使用 GitHub”按钮并使用托管 Strapi 项目存储库的 GitHub 账户登录。

   ¥Click the Continue with GitHub button and log in with the GitHub account where your Strapi project's repository is hosted.

你现在应该看到 Strapi Cloud 仪表板。你可以在此处管理托管在 Strapi Cloud 上的 Strapi 项目。

¥You should now see the Strapi Cloud dashboard. This is where you manage your Strapi projects hosted on Strapi Cloud.

我们将通过导入你刚刚推送到 GitHub 存储库的本地 Strapi 项目来创建一个新的 Strapi Cloud 项目：

¥We will create a new Strapi Cloud project by importing the local Strapi project you have just pushed to a GitHub repository:

1. 单击+创建项目按钮。

   ¥Click the + Create project button.

2. 选择免费试用计划。

   ¥Select the free trial plan.

3. 向下滚动，然后在 "导入 git 存储库部分" 中，从列表中选择适当的账户和存储库（例如，账户：yourname，存储库：my-first-strapi-project）。

   ¥Scroll down, and in the "Import git repository section", choose the appropriate Account and Repository from the list (for instance, Account: yourname, Repository: my-first-strapi-project).

4. 进一步向下滚动，在 "设置" 部分中，为你的项目指定一个显示名称（例如 my-first-strapi-project），并保持其他选项不变。

   ¥Scroll down further, and in the "Setup" section, give your project a Display name (for instance my-first-strapi-project) and leave the other options unchanged.

5. 单击页面底部的创建项目。

   ¥Click Create project at the bottom of the page.

你的 Strapi 项目应在几分钟内完成部署。🚀 完成后，你将能够通过单击右上角的“访问应用”按钮来登录已部署的 Strapi 项目。

¥Your Strapi project should be deployed within minutes. 🚀 Once it's done, you'll be able to log into your deployed Strapi project by clicking the Visit app button in the top right corner.

🥳 CONGRATULATIONS!

现在，你的项目托管在 Strapi Cloud 上并可在线访问。你可以通过阅读 其专用文档 了解有关 Strapi Cloud 的更多信息，或继续阅读 D 部分，登录你的在线 Strapi 项目并从那里添加你的第一个数据。

¥Now your project is hosted on Strapi Cloud and accessible online. You can learn more about Strapi Cloud by reading its dedicated documentation or proceed to part D to log in into your online Strapi project and add your first data from there.

📝 D 部分：使用内容管理器将内容添加到你的 Strapi Cloud 项目

¥📝 Part D: Add content to your Strapi Cloud project with the Content Manager

现在我们已经创建了具有 "餐厅" 和 "类别" 2 种集合类型的基本数据结构，并将你的项目部署到 Strapi Cloud，让我们使用 Cloud 通过创建新条目来实际添加内容。

¥Now that we have created a basic data structure with 2 collection types, "Restaurant" and "Category", and deployed your project to Strapi Cloud, let's use the Cloud to actually add content by creating new entries.

Step 1: Log in to the admin panel of your new Strapi Cloud project

步骤 1：登录到新 Strapi Cloud 项目的管理面板

¥Step 1: Log in to the admin panel of your new Strapi Cloud project

现在你的 Strapi Cloud 项目已创建，让我们登录该项目：

¥Now that your Strapi Cloud project is created, let's log in into the project:

1. 在 Strapi 云仪表板 中，单击 my-first-strapi-project 项目。

   ¥From your Strapi Cloud dashboard, click the my-first-strapi-project project.

2. 单击访问应用按钮。

   ¥Click the Visit app button.

3. 在打开的新页面中，填写表单以创建此 Strapi Cloud 项目的第一个管理员用户。

   ¥In the new page that opens, complete the form to create the first administrator user of this Strapi Cloud project.

登录到我们的第一个 Strapi Cloud 项目，我们现在将从那里添加数据。

¥Logged in into our first Strapi Cloud project, we will now add data from there.

ℹ️ Additional information and tips about users and Strapi Cloud projects:

✏️ 注意：本地用户和 Strapi Cloud 用户不同

Strapi Cloud 项目和本地项目的数据库不同。这意味着数据不会自动从本地项目传输到 Strapi Cloud。这包括你之前在本地创建的用户。这就是为什么你在首次登录 Strapi Cloud 项目时会被邀请创建一个新的管理员账户。

¥The databases for your Strapi Cloud project and your local project are different. This means that data is not automatically transferred from your local project to Strapi Cloud. This includes users that you previously created locally. That's why you are invited to create a new administrator account when logging in to your Strapi Cloud project for the first time.

💡 提示：直接访问 Strapi Cloud 项目的管理面板

Strapi Cloud 上托管的任何项目都可以通过其自己的 URL 访问，例如 https://my-strapi-project-name.strapiapp.com。要访问在线项目的管理面板，只需将 /admin 添加到 URL，例如 https://my-strapi-project-name.strapiapp.com/admin。URL 可以在你的 Strapi Cloud 仪表板中找到，你还可以通过单击项目名称然后单击“访问应用”按钮从那里直接访问你的 Strapi Cloud 项目。

¥Any project hosted on Strapi Cloud is accessible from its own URL, something like https://my-strapi-project-name.strapiapp.com. To access the admin panel of your online project, simply add /admin to the URL, for instance as in https://my-strapi-project-name.strapiapp.com/admin. URLs can be found in your Strapi Cloud dashboard and you can also directly access your Strapi Cloud projects from there by clicking on the name of your project then on the Visit app button.

Step 2: Create an entry for the "Restaurant" collection type

第 2 步：为 "餐厅" 集合类型创建条目

¥Step 2: Create an entry for the "Restaurant" collection type

1. 去

   ¥Go to

内容管理器 > 集合类型 - 导航中的餐厅。2.3.假设它是 Biscotte Restaurant。4.如果你缺乏一些灵感，你可以使用 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. 5。单击“保存”。

¥Content Manager > Collection types - Restaurant in the navigation. 2. Click on Create new entry. 3. Type the name of your favorite local restaurant in the Name field. Let's say it's Biscotte Restaurant. 4. In the Description field, write a few words about it. If you're lacking some inspiration, you can use 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. 5. Click Save.

该餐厅现已列入集合类型 - 餐厅景观

¥The restaurant is now listed in the Collection types - Restaurant view of the

内容管理者。

¥Content Manager.

Step 3: Add Categories

步骤 3：添加类别

¥Step 3: Add Categories

让我们去

¥Let's go to

内容管理器 > 集合类型 - 分类并创建 2 个类别：

¥Content Manager > Collection types - Category and create 2 categories:

1. 单击创建新条目。

   ¥Click on Create new entry.

2. 在名称字段中输入 French Food。

   ¥Type French Food in the Name field.

3. 单击“保存”。

   ¥Click Save.

4. 返回集合类型 - 类别，然后再次单击“创建新条目”。

   ¥Go back to Collection types - Category, then click again on Create new entry.

5. 在“名称”字段中键入 Brunch，然后单击“保存”。

   ¥Type Brunch in the Name field, then click Save.

"法国食物" 和 "早午餐" 类别现在列在集合类型中 - 的类别视图

¥The "French Food" and "Brunch" categories are now listed in the Collection types - Category view of the

内容管理者。

¥Content Manager.

现在，我们将为餐厅添加一个类别：

¥Now, we will add a category to a restaurant:

1. 去

   ¥Go to

内容管理器 > 集合类型 - 在导航中的餐厅，然后点击 "比斯科特餐厅"。2.滚动回到页面顶部，然后单击“保存”。

¥Content Manager > Collection types - Restaurant in the navigation, and click on "Biscotte Restaurant". 2. In the Categories drop-down list at the bottom of the page, select "Brunch". Scroll back to the top of the page and click Save.

Step 4: Set Roles & Permissions

步骤 4：设置角色和权限

¥Step 4: Set Roles & Permissions

我们刚刚添加了一家餐厅和 2 个类别。我们现在有足够的内容可供消费（双关语）。但首先，我们需要确保内容可以通过 API 公开访问：

¥We have just added a restaurant and 2 categories. We now have enough content to consume (pun intended). But first, we need to make sure that the content is publicly accessible through the API:

1. 单击主导航底部的 设置。

   ¥Click on Settings at the bottom of the main navigation.

2. 在用户和权限插件下，选择角色。

   ¥Under Users & Permissions Plugin, choose Roles.

3. 单击公共角色。

   ¥Click the Public role.

4. 在“权限”下向下滚动。

   ¥Scroll down under Permissions.

5. 在“权限”选项卡中，找到“餐厅”并单击它。

   ¥In the Permissions tab, find Restaurant and click on it.

6. 单击“查找”和“findOne”旁边的复选框。

   ¥Click the checkboxes next to find and findOne.

7. 重复类别：单击“查找”和“findOne”旁边的复选框。

   ¥Repeat with Category: click the checkboxes next to find and findOne.

8. 最后，单击“保存”。

   ¥Finally, click Save.

Step 5: Publish the content

第 5 步：发布内容

¥Step 5: Publish the content

默认情况下，你创建的任何内容都会保存为草稿。让我们发布我们的类别和餐厅。

¥By default, any content you create is saved as a draft. Let's publish our categories and restaurant.

首先，导航至

¥First, navigate to

内容管理器 > 集合类型 - 类别。从那里：

¥Content Manager > Collection types - Category. From there:

1. 单击 "早午餐" 条目。

   ¥Click the "Brunch" entry.

2. 在下一个屏幕上，单击“发布”。

   ¥On the next screen, click Publish.

3. 在确认窗口中，单击是，发布。

   ¥In the Confirmation window, click Yes, publish.

然后，返回类别列表并对 "法国食物" 类别重复此操作。

¥Then, go back to the Categories list and repeat for the "French Food" category.

最后，要发布你最喜欢的餐厅，请访问

¥Finally, to publish your favorite restaurant, go to

内容管理器 > 集合类型 - 餐厅，单击 "比斯科特餐厅" 条目，然后发布它。

¥Content Manager > Collection types - Restaurant, click the "Biscotte Restaurant" entry, and Publish it.

Step 6: Use the API

第 6 步：使用 API

¥Step 6: Use the API

好的，亲爱的美食家，我们刚刚完成了内容的创建并使其可以通过 API 进行访问。你可以拍拍自己的背 - 但你还没有看到你努力工作的最终结果。

¥OK dear gourmet, we have just finished creating our content and making it accessible through the API. You can give yourself a pat on the back — but you have yet to see the final result of your hard work.

你在这：应可通过访问 Strapi Cloud 项目 URL 的 /api/restaurants 路径（例如 https://beautiful-first-strapi-project.strapiapp.com/api/restaurants）来访问餐厅列表。

¥There you are: the list of restaurants should be accessible by visting the /api/restaurants path of your Strapi Cloud project URL (e.g., https://beautiful-first-strapi-project.strapiapp.com/api/restaurants).

现在就试试！结果应该与下面的示例响应类似👇。

¥Try it now! The result should be similar to the example response below 👇.

Click me to view an example of API response:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "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.",
        "createdAt": "2021-11-18T13:34:53.885Z",
        "updatedAt": "2021-11-18T13:59:05.035Z",
        "publishedAt": "2021-11-18T13:59:05.033Z"
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

🥳 CONGRATULATIONS!

现在你的内容已创建、发布，并且你有权通过 API 请求它。继续创造精彩的内容！

¥Now your content is created, published, and you have permissions to request it through the API. Keep on creating amazing content!

💡 提示：在本地和 Strapi Cloud 项目之间传输数据

Strapi Cloud 项目和本地项目的数据库不同。这意味着数据不会在你的 Strapi Cloud 和本地项目之间自动同步。你可以使用 数据管理系统 在项目之间传输数据。

¥The databases for your Strapi Cloud project and your local project are different. This means that data is not automatically synchronized between your Strapi Cloud and local projects. You can use the data management system to transfer data between projects.

⏩ 接下来做什么？

¥⏩ What to do next?

现在你已经了解了使用 Strapi 创建和发布内容的基础知识，我们鼓励你更深入地探索和挖掘 Strapi 的一些功能：

¥Now that you know the basics of creating and publishing content with Strapi, we encourage you to explore and dig deeper into some Strapi features:

• 👉 了解如何使用 Strapi 的 REST API 来查询内容，

  ¥👉 learn how to use Strapi's REST API to query the content,

• 👉 通过浏览 用户指南 了解有关 Strapi 功能的更多信息，

  ¥👉 learn more about Strapi features by browsing the User Guide,

• 👉 定制你的 Strapi 后端 和 管理面板 用于高级用例。

  ¥👉 and customize your Strapi back end and admin panel for advanced use cases.