Loving Tina? us on GitHub0.0k
宣布新的“扩展Tina”
April 28, 2022
By Logan Anderson
注意: 本文已过时。有关最新的Tina使用,请查看我们的文档

最新的更新使开发人员能够将validationcomponentparse函数直接放入架构中。

如何更新

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

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

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

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

2. 将defineConfig添加到架构中

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

所以以前,架构文件看起来像这样。

export default defineSchema({
// schema here
});

必须更改为

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

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

import TinaCMS from 'tinacms';
import { tinaConfig } from '../schema.ts';
// 直接将TinaProvider导入到您的页面中会导致Tina被添加到生产包中。
// 相反,导入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: April 28, 2022