Loving Tina? us on GitHub0.0k

宣布新的“扩展 TinaCMS”

ByLogan Anderson
注意： 本文已过时。有关最新的 TinaCMS 使用，请查看我们的文档。

最新的更新使开发人员能够将 validation、component 和 parse 函数直接放入架构中。

如何更新

如果您想开始使用 tina，请查看这个入门指南

要更新，请执行以下操作，

1. 更新 .tina/schema.{ts,tsx,js} 文件中的导入

我们将在后端和前端使用 schema 文件（以前仅在前端使用），因此所有从 @tinacms/cli 的导入都需要更改为 tinacms。

2. 在架构中添加 defineConfig

我们现在建议将您的配置与包装组件分开，并放置在 schema.{ts,tsx,js} 中或其单独的文件夹中。

因此以前，架构文件看起来像这样。

export default defineSchema({
  // 这里是架构
});

必须更改为

import { defineConfig } from 'tinacms';


export default defineConfig({
  // 将 schema 和 apiUrl 传递给配置（必需）（这是如何传递给前端的）
  schema: schema,
  apiUrl: apiUrl,
  // 添加其他以前在 <TinaCMS> 组件中的 _app.{js,tsx} 文件中的配置。
  cmsCallback: (cms) => {
    //...
  },
  mediaStore: async () => {
    //...
  },
  collections: [
    // ...
  ],
});
export default schema;

您应该在 .tina/components 文件夹中添加以下两个文件。

3. 添加 .tina/components/TinaProvider.js

此文件处理 TinaCMS 配置和 tina 提供者组件，并且仅在编辑模式下加载，下面是一个示例。

import TinaCMS from 'tinacms';
import { tinaConfig } from '../schema.ts';


// 直接将 TinaProvider 导入到您的页面将导致 TinaCMS 被添加到生产包中。
// 相反，导入 tina/provider/index 默认导出以在编辑模式下动态导入
/**
 *
 * @private 请不要直接导入此文件，请改为导入动态提供者
 */
const TinaProvider = ({ children }) => {
  return <TinaCMS {...tinaConfig}>{children}</TinaCMS>;
};

4. 添加 .tina/components/TinaDynamicProvider.js

TinaDynamicProvider.js 处理在“编辑模式”下加载 TinaProvider。请参见下面提供的示例

import dynamic from 'next/dynamic';
const TinaProvider = dynamic(() => import('./TinaProvider'), { ssr: false });
import { TinaEditProvider } from 'tinacms/dist/edit-state';


const DynamicTina = ({ children }) => {
  return (
    <>
      <TinaEditProvider editMode={<TinaProvider>{children}</TinaProvider>}>
        {children}
      </TinaEditProvider>
    </>
  );
};


export default DynamicTina;
在我们的参考文档中阅读更多关于这两个文件的信息

5. 更新您的 _app.{js,tsx}

最后一步是更新您的 _app.{js,tsx}。由于配置和提供者在单独的文件中，这将比以前的代码更少。

_app.{js,tsx} 之前：

import dynamic from 'next/dynamic';
import { TinaEditProvider } from 'tinacms/dist/edit-state';
//...


const App = ({ Component, pageProps }) => {
  return (
    <>
      <TinaEditProvider
        showEditButton={true}
        editMode={
          <TinaCMS
            cmsCallback={(cms) => {
              //...
            }}
            apiURL={apiURL}
          >
            <Component {...pageProps} />
          </TinaCMS>
        }
      >
        <Component {...pageProps} />
      </TinaEditProvider>
    </>
  );
};
export default App;

_app.{js,tsx} 之后：

import DynamicTina from '../.tina/components/TinaDynamicProvider';


const App = ({ Component, pageProps }) => {
  return (
    <DynamicTina>
      <Component {...pageProps} />
    </DynamicTina>
  );
};
export default App;

将配置分离到另一个文件中使其更加简洁易懂。此外，现在架构作为配置的一部分并在前端使用，将允许传递和使用函数。由于我们拥有更多信息，这也将使我们减少网络请求。

结束语

我们在本文中讨论的新功能只是可能性的冰山一角，请阅读文档以了解更多信息。

如果您遇到任何问题，请通过 Discord 联系我们或创建一个 GitHub 问题。

Last Edited:
Last Page
自动化拉取请求
Next Page
GraphQL基础