Как вызывать и использовать встроенные ресурсы из полей Contentful Rich Text с помощью Gatsby? - PullRequest
Новая
       17

Как вызывать и использовать встроенные ресурсы из полей Contentful Rich Text с помощью Gatsby?

1 голос
/ 07 апреля 2019

Я использую Гэтсби как стартер для своего приложения реакции Для обработки контента я использую Contentful.

В моей модели содержательного контента я создал следующие типы контента:

  • Краткий текст
  • Краткий текст
  • Media
  • Rich Text
  • Rich Text

Используя плагины Gatsby gatsby-source-contenful и @ contentful / gatsby-transformer-contentful-richtext, я успешно отрисовал все эти типы содержимого, кроме типов Rich Text, которые я не могу отобразить встраиваемыми. Активы в нем.

Я пытался установить @ contentful / rich-text-types через npm и использовать константы MARK и INLINES на основе примера из документации Гэтсби , найденного здесь 

const { MARKS, INLINES } = require('@contentful/rich-text-types')

{
      resolve: `@contentful/gatsby-transformer-contentful-richtext`,
      options: {
        renderOptions: {
          /*
           * Defines custom html string for each node type like heading, embedded entries etc..
           */
          renderNode: {
            // Example
            [INLINES.ASSET_HYPERLINK]: node => {
              return `<img class='custom-asset' src="${
                node.data.target.fields.file['en-US'].url
              }"/>`
            },
            [INLINES.EMBEDDED_ENTRY]: node => {
              return `<div class='custom-entry' />${
                node.data.target.fields.name['en-US']
              }</div>`
            },
          },
          /*
           * Defines custom html string for each mark type like bold, italic etc..
           */
          renderMark: {
            // Example
            [MARKS.BOLD]: text => `<strong>${text}<strong>`,
          },
        },
      },
    },

В идеале, я бы хотел, чтобы Gatbsy автоматически отображал ресурсы изображений в типах Rich Text как <img src="[ASSET URL]" alt="[ASSET DESCRIPTION]">

1 Ответ

0 голосов
/ 20 апреля 2019

Попробуйте: 

const { BLOCKS } = require('@contentful/rich-text-types')
...
renderNode: {
  [BLOCKS.EMBEDDED_ASSET]: node => {
    // console.log(node)
    let { description, title, file } = node.data.target.fields
    // console.log(file["en-US"].url)
    return <img src={file["en-US"].url} />
  },
},

Мне кажется, это работает, хотя изображение кажется полноразмерным и загружается довольно медленно.Требуется дополнительная работа, но, похоже, это работает (по крайней мере, в разработке)

EDIT:
Кажется, что свойство fields в моем node.data.target перестало появляться, когда я отправляю свой запрос graphql ..... и это перестало работать ... super bizarre

EDIT 2: если вы удалите папку .cache (project-root/.cache), вышеуказанная проблема будет исправлена.https://github.com/gatsbyjs/gatsby/issues/10592

...