注意：本文档假设您已经有一个正在运行的站点。如果没有，您可以快速开始使用我们的NextJS入门项目。

添加Tina

我们创建了一种快速启动Tina应用程序的方法，以展示可视化编辑的强大功能；在终端中输入以下命令：

npx @tinacms/cli@latest init

有关非NextJS站点的提示帮助，请参阅本指南。

此命令将询问您几个问题，并在您的应用程序中设置Tina样板：

1. 安装Tina所需的所有依赖项。
2. 在tina目录中定义一个基本的内容架构。
3. 在demo目录中创建示例内容。
4. （仅限NextJS）：编辑package.json以使dev、build和start脚本运行tina GraphQL API。

更新您的构建脚本

根据您的框架，tina init可能会尝试更新您的package.json脚本。

NextJS示例

  "scripts": {
    "dev": "tinacms dev -c \"next dev\"",
    "build": "tinacms build && next build",
    "start": "tinacms build && next start"
  }

Hugo示例

  "scripts": {
    "dev": "tinacms dev -c \"hugo server -D\"",
    "build": "tinacms build && hugo"
  }

如果CLI没有设置这些，您需要手动应用。

快速测试

现在我们已经设置了一个基本的Tina样板，您可以使用以下命令启动您的应用程序：

yarn dev

当Tina在NextJS站点上初始化时，会创建一个"/admin/index.html"页面，允许编辑者登录并开始进行内容更改。

现在，如果您导航到http://localhost:3000/admin/index.html（假设您的站点运行在端口3000），您应该会看到一个新的CMS登录页面已添加到您的站点！

注意，许多框架提供了一种将/admin/index.html重定向到/admin的方法。

接下来，我们将向您展示如何使用CMS并开始编辑一些内容！