Блог

Главная - Вопросы по программированию - Как предоставить область действия и пользовательские компоненты для netlify-cms-widget-mdx

Как предоставить область действия и пользовательские компоненты для netlify-cms-widget-mdx

#gatsby #netlify #netlify-cms #mdxjs

#гэтсби #netlify ( нетлифтинг ) #netlify-cms #mdxjs

Вопрос:

Я создал блог Gatsby с помощью Netlify CMS и добавил netlify-cms-widget-mdx .mdx файлы поддержки. У меня есть некоторые пользовательские компоненты, которые я передал MDXProvider , чтобы сделать их глобально доступными для всех моих .mdx файлов без необходимости импортировать их в каждый файл. Как мне использовать эти же компоненты, netlify-cms-widget-mdx чтобы компоненты правильно отображались в режиме предварительного просмотра в Netlify CMS? В README пакета есть блок кода, который, как я полагаю, отвечает на этот вопрос, но в нем нигде не сказано, куда я должен поместить этот код, не говоря уже о том, как мне нужно настроить его так, как мне нужно … любые рекомендации приветствуются!

Ответ №1:

Вам нужно только покопаться в документации Netlify о создании пользовательских виджетов CMS или в некоторых статьях 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.

Другие ресурсы: