title | description | type | stub | service | i18nReady |
---|---|---|---|---|---|
Tina CMS 与 Astro |
使用 Tina 作为 CMS 并为你的 Astro 项目添加内容 |
cms |
false |
Tina CMS |
true |
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro';
import Grid from '/components/FluidGrid.astro';
import Card from '~/components/ShowcaseCard.astro';
import { Steps } from '@astrojs/starlight/components';
Tina CMS 是一个基于 Git 的无头(headless)内容管理系统(CMS)。
在开始前,你需要有一个 Astro 项目。然后:
1. 运行以下命令将 Tina 安装到你的 Astro 项目中。<PackageManagerTabs>
<Fragment slot="npm">
```shell
npx @tinacms/cli@latest init
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm dlx @tinacms/cli@latest init
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn dlx @tinacms/cli@latest init
```
</Fragment>
</PackageManagerTabs>
- 当被要求提供 Cloud ID 时,按下 <kbd>Enter</kbd> 键跳过。如果你想使用 Tina Cloud,稍后可以生成一个 Cloud ID;
- 当被询问「你使用的是哪个框架」时,选择 **Other**;
- 当被问到公共资产存储在哪里时,按下 <kbd>Enter</kbd> 键。
等待完成后,你现在应该在项目的根目录下有一个名为 `.tina` 的文件夹和在 `content/posts` 中生成的 `hello-world.md` 文件。
-
修改
```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ``` ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ``` ```json del={4} ins={5} // package.json { "scripts": { "dev": "astro dev", "dev": "tinacms dev -c \"astro dev\"" } } ```package.json
中的dev
脚本: -
Tina CMS 现在以本地模式设置完成。你可以通过运行
dev
脚本,然后导航到/admin/index.html#/collections/post
来进行测试。编辑《Hello, World!》文章将会更新项目目录中的
content/posts/hello-world.md
文件。 -
通过编辑
.tina/config.ts
中的schema.collections
属性来设置你的 Tina 集合。例如,你可以向我们的文章添加一个必需的 frontmatter 属性「date posted」:
import { defineConfig } from "tinacms"; // 你的托管提供商需要作为环境变量暴露出来 const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main"; export default defineConfig({ branch, clientId: null, // 从 tina.io 获取这个值 token: null, // 从 tina.io 获取这个值 build: { outputFolder: "admin", publicFolder: "public", }, media: { tina: { mediaRoot: "images", publicFolder: "public", }, }, schema: { collections: [ { name: "posts", label: "Posts", path: "src/content/posts", format: 'mdx', fields: [ { type: "string", name: "title", label: "Title", isTitle: true, required: true, }, { type: "datetime", name: "posted", label: "Date Posted", required: true, }, { type: "rich-text", name: "body", label: "Body", isBody: true, }, ], }, ], }, });
在 Tina 文档 中了解更多关于 Tina 集合的信息。
-
在生产环境中,Tina CMS 可以直接将更改提交到你的 GitHub 存储库中。要为生产环境设置 Tina CMS,你可以选择使用 Tina Cloud 或自托管的 Tina Data Layer。你可以在 Tina 文档中 了解更多关于注册 Tina Cloud 的信息。
- 由 Jeff See 和 Dylan Awalt-Conley 创建的 Astro Tina Starter with visual editing
- 由 Tom Bennet 创建的 Astro Tina Starter with basic editing
- 在 Tina 中使用 Astro 图像优化