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编辑器中。如果不是，它会立即退出。

给我看看代码！

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

// 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上运行Tina？

您不必立即迁移。现有的基于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与上下文编辑 #3399

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