1

我已经使用 Netlify CMS 建立了一个 Gatsby 博客并添加netlify-cms-widget-mdx到支持.mdx文件中。我有一些已传递给的自定义组件，MDXProvider以使它们对我的所有.mdx文件全局可用，而无需在每个文件中导入它们。如何使用这些相同netlify-cms-widget-mdx的组件，以便在 Netlify CMS 中以预览模式正确呈现组件？包的自述文件中有一个代码块，我认为它回答了这个问题，但它没有说明我应该把这段代码放在哪里，更不用说我需要如何按照我需要的方式配置它了......感谢任何指导！

4

1 回答 1

0

您只需要深入了解有关创建自定义 CMS 小部件的 Netlify 文档或Netlify 的一些文章。您需要创建一个隔离文件，您将在其中创建小部件，例如/src/cms/cms.js：

import Trend from 'react-trend';
import { MdxControl, setupPreview } from 'netlify-cms-widget-mdx';
import Trend from 'react-trend';
import remarkEmojiPlugin from 'remark-emoji';

CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    components: {
      h1: ({ children, ...props }) => (
        <h1 style={{ color: 'tomato' }} {...props}>
          {children}
        </h1>
      ),
    },
    scope: {
      Layout: (props) => (
        <div
          style={{
            padding: '10px',
            border: '1px solid green',
            borderRadius: '5px',
          }}
          {...props}
        />
      ),
    },
    allowedImports: {
      'react-trend': {
        ImportDefault: Trend,
      },
    },
    mdPlugins: [remarkEmojiPlugin],
  })
);

然后，在/static/admin文件夹中，创建一个index.html指向该文件的文件：

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <link rel="stylesheet" href="./cms.css" />

</head>
<body>
  <script src="./cms.js"></script>
</body>
</html>

Netlify 将推断该 HTML 并将您的新小部件添加到 CMS。

其他资源：

于 2021-01-18T10:35:33.093 回答