将 TinaCMS 与 mdx 一起使用

如果您想要在您的 React 应用中使用编辑器，那么 TinaCMS 是您的不二选择。而如果您想要支持 Markdown 渲染，那么可以考虑使用 mdx。本文将介绍如何将 TinaCMS 与 mdx 一起使用。

1. 安装 TinaCMS

首先，我们需要安装 TinaCMS。

npm install --save react-tinacms@next tina-graphql-gateway

2. 创建 TinaCMS 实例

接下来，我们需要创建 TinaCMS 实例。

import { TinaCMS } from 'react-tinacms'

const cms = new TinaCMS({
   // 配置项
})

3. 集成 mdx

我们需要先安装 mdx。

npm install --save @mdx-js/react

然后，我们需要加载 .mdx 文件。

import React from 'react'
import { MDXProvider } from '@mdx-js/react'

export const components = {
  h1: props => <h1 {...props} style={{ color: 'tomato' }} />,
  p: props => <p {...props} style={{ fontSize: '18px' }} />,
  // ...
}

export const wrapMDX = (Content, components) => {
  return props => (
    <MDXProvider components={components}>
      <Content {...props} />
    </MDXProvider>
  )
}

4. 集成 TinaCMS 和 mdx

最后，我们需要将 TinaCMS 和 mdx 集成。

import { TinaProvider, Tina } from 'tinacms'
import { wrapMDX } from './mdx'
import { BlogPost } from './blog-post'

export default function BlogPostTemplate({ data }) {
  const { markdownRemark } = data
  const post = markdownRemark.frontmatter
  return (
    <TinaProvider cms={cms}>
      <Tina>
        {wrapMDX(<BlogPost {...post} />, components)}
      </Tina>
    </TinaProvider>
  )
}

这样就完成了 TinaCMS 和 mdx 的集成。我们现在可以在 TinaCMS 编辑器中编辑 Markdown，然后以 mdx 格式渲染。