Astro 正成为 TinaCMS 的默认入门模板

最新的 Astro 入门模板已经使用了无 React 的可视化编辑，一旦这种新路径在实际项目中有了更多的时间，Astro 将成为默认选择。

我们尚未更改默认设置。最新的 Astro 入门模板已经可用，我们希望在将 Astro 作为新项目的主要路径之前，有更多的人尝试它。

注意： Next.js 入门模板不会消失。

我们知道 🦙 TinaCMS 社区热爱 🚀 Astro，我们很高兴能够让我们的可视化编辑体验与数据岛一起工作。鉴于我们对由 markdown 驱动的快速静态网站的热爱……很快就显而易见，这是 🦙 TinaCMS 社区的最佳框架。

— Matt Wicks, TinaCMS 产品负责人

为什么选择 Astro？

越来越多的 TinaCMS 用户选择 Astro。尽管 Next.js 仍是默认选择，但入门模板的克隆数量最近已经超过了 Next.js 入门模板。我们也在 Discord 和支持中看到更多的 Astro 问题。这与我们的经验一致：

Astro 使用简单，适合许多人使用 TinaCMS 构建的网站，包括文档、博客、营销页面、变更日志和公司网站。

图： GitHub 讨论投票 关于投资哪个框架

图：Sprint 108 期间的入门模板仓库克隆数，一周的冲刺

Astro 也很快。它快速生成静态输出，能够并行渲染页面，并通过其 <Image /> 组件进行图像优化，处理格式、响应式大小和懒加载。

它也有意保持轻量。您可以在需要时使用 React、Vue 或其他 UI 框架，但不必让整个网站表现得像一个 React 应用。

这为我们提供了更好的可视化编辑基础。编辑者仍然可以获得实时预览。访客只会看到页面。

在 Sprint 108 回顾 的大约 17 分钟处有更多背景信息。

我们改进了什么

之前的 Astro 设置使用 React 进行实时编辑。这是可行的，但意味着网站可能会携带仅供编辑者使用的客户端代码。

这总是感觉比需要的要重。如果编辑 UI 仅供编辑者使用，访客不应该为此担心。

最新的 Astro 入门模板现在使用无 React 的可视化编辑。页面仍然可以构建为静态 HTML，并且可编辑部分在编辑者输入时仍然可以更新。

对于编辑者，工作流程应该感觉相同

他们打开 TinaCMS，点击页面上的内容，进行更改，并在发布前预览它们。内容仍然以 Markdown 或 MDX 的形式存在于您的仓库中，每次保存的更改仍然可以成为一个 Git 提交。

主要的变化是在幕后。当编辑者打开 TinaCMS 时，页面上的可编辑区域与编辑器连接。当编辑者输入时，Astro 仅重新渲染编辑的部分，并将 TinaCMS 的该部分替换到预览中，而无需重新加载整个页面。

这适用于静态和服务器生成的页面。您的页面仍然可以按照项目需要的方式渲染。TinaCMS 只需要刷新编辑者正在更改的部分。

在公共网站上，一个小的内联检查会检测页面是否在 TinaCMS 编辑器中。如果不是，它会立即退出。

给我看看代码！

页面的每个可编辑部分都注册为一个岛屿。岛屿知道如何获取其内容，渲染哪个组件，以及如何将获取的数据转换为组件属性。

// src/lib/islands.ts
import type { IslandRegistry } from '@tinacms/astro/experimental';
import BlogBody from '../components/islands/BlogBody.astro';
import { getBlog } from './data';

type BlogResult = {
  data?: {
    blog?: unknown;
  };
};

export const islands: IslandRegistry = {
  blog: {
    fetch: (_request, params) => getBlog(params.get('slug') ?? ''),
    component: BlogBody,
    wrapper: { tag: 'article' },
    propsFromData: (data) => {
      const result = data as BlogResult;
      return { data: result.data?.blog };
    },
  },
};

一个路由处理这些岛屿的预览更新：

// src/pages/tina-island/[name].ts
import { experimental_createIslandRoute } from '@tinacms/astro/experimental';
import { islands } from '../../lib/islands';

export const prerender = false;
export const ALL = experimental_createIslandRoute(islands);

在页面本身，您用 <TinaIsland> 包裹可编辑部分。当编辑者更改内容时，TinaCMS 将草稿数据发送到岛屿路由，Astro 使用应用的草稿覆盖渲染更新的 HTML，并将预览替换到页面中。

岛屿路由不需要在每次更新时重新读取内容存储。它从 TinaCMS 通过桥发送的草稿数据中渲染，并且更新是去抖动的，因此输入不会为每个按键发送请求。

以下是相同流程的序列图：

experimental_ 前缀是真实的。此功能在最新的 Astro 入门模板中可用，但我们仍在完善 API 并测试边缘情况，然后再将 Astro 设为默认。

已经在 Astro 上运行 TinaCMS？

您不必立即迁移。现有的基于 React 的设置 （@astrojs/react、client:tina 和 useTina()）仍然受支持和维护。

如果您想测试新的设置，大多数迁移工作通常在自定义富文本组件中。任何在 TinaMarkdown components 映射中的内容可能需要从 .tsx 移动到 .astro。

其他更改较小：安装 @tinacms/astro，用 <TinaIsland> 替换 useTina()，并更新您的数据加载器以适应新的预览流程。

准备好后，将您的项目与 Astro 指南 进行比较。

其他框架

同样的方法也可以适用于其他框架。Nuxt 或 Eleventy 适配器将遵循类似的形状：从编辑器发送草稿数据，在服务器上渲染更新的部分，然后将 HTML 替换到预览中。

我们尚未构建这些适配器，但我们很乐意审查 PR。

接下来是什么

在 Astro 成为默认入门模板之前，我们希望有更多的实际项目使用新的可视化编辑流程。

试试 Astro 入门模板：

npx create-tina-app@latest
# 选择 Astro 入门模板

如果您用它构建了什么，请在 Discord 中分享 URL。

如果有什么感觉不对劲，请告诉我们。打开一个问题，发送一个 PR，或者在 Discord 中告诉我们您发现了什么。

相关链接

讨论 - Astro with Contextual Editing #3399

投票 - 您希望在哪些框架上投入更多？#5247