Как отобразить переднюю часть уценки как HTML в Gatsby

моя индексная страница отображает сообщения с изображением и текстом. Но я не могу получить текст в формате HTML. Я использую виджет markdown с Netlify CMS и хочу, чтобы разбивка строк работала при размещении содержимого в панели администратора. Я тоже безуспешно пытался использовать dangerouslySetInnerHTML={item.text}.

item - это просто отображение всех объявлений.

<p> {item.text} </p>

graphql:

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        intro {
          blurbs {
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            heading
            text
          }
          heading
          description
        }
      }
    }
  }

метка в config.yml:

- {label: "Intro", name: "intro", widget: "object", fields: [{label: "Heading", name: "heading", widget: "string"}, {label: "Description", name: "description", widget: text}, {label: Blurbs, name: blurbs, widget: "list", fields: [{label: "Image", name: "image", widget: "image"}, {label: "Rubrik", name: "heading", widget: "string"}, {label: "Text", name: "text", widget: "markdown"}]}]}

Index.md, который я хочу прочитать (я думаю, это работает, потому что я получаю данные для отображения, но не в форме html)

  blurbs:
    - image: /img/img1.jpg
      heading: heading one
      text: >-
        This is the content i want in HTML
    
    - image: /img/img2.jpg
      heading: heading two
      text: >-
        This is also the content i want in HTML
       
        And this should give me a linebreak

html gatsby graphql netlify-cms markdown
person csk87    schedule 09.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

При условии, что все, как кажется, настроено правильно.

По умолчанию прямо внутри frontmatter находится свойство html:

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        html
        intro {
          blurbs {
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            heading
            text
          }
        }
      }
    }
  }

Примечание. Проверьте свой запрос на localhost:8000/___graphql

После того, как вы его запросили, просто отобразите его, как и вы, с вложением в правильное свойство:

dangerouslySetInnerHTML={html}

Вы можете найти полное руководство по адресу https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-netlify-cms/

person Ferran Buireu    schedule 09.02.2021
comment
Проблема в том, что у меня нет текстовых данных в разделе HTML в md файле. Насколько я понимаю, HTML - это код после окончания ===. Я хочу, чтобы это было в текстовом ключевом элементе / значении, но отображалось как html. Если в этом есть смысл? - person csk87; 09.02.2021
comment
В этом случае внутри frontmatter должен быть элемент, если ваш объект. Если вы запросите его (в localhost:8000/___graphql), он должен отобразить HTML. Это поле можно отобразить с помощью dangerouslySetInnerHTML - person Ferran Buireu; 09.02.2021
comment
«Размытые» - это массив объектов, но я не могу найти HTML-код на этом вложенном уровне. Может запрашивать только изображение, заголовок и текст ???? - person csk87; 09.02.2021
comment
Установлено ли поле в виджете как уценка? - person Ferran Buireu; 09.02.2021
comment
Да, это так! Может быть проблема из-за того, что он находится в виджете списка? - person csk87; 09.02.2021
comment
Не должно. Вы пробовали вариант mode? netlifycms.org/docs/widgets/#markdown - person Ferran Buireu; 09.02.2021
comment
Я использую как raw, так и rich, поэтому у меня есть опция переключения в cms - person csk87; 09.02.2021
comment
Я добавил ярлыки из config.yml и index.md, если кто-то видит проблему? - person csk87; 10.02.2021
comment
Мне кажется, это хорошо ... - person Ferran Buireu; 10.02.2021
comment
Я привожу такой пример, как ваш, и могу его показать. После того, как вы запросите его (используя имя поля уценки, в данном случае text), вам нужно будет распечатать все, что вы хотите. Я использую markdown-to-jsxlibrary - person Ferran Buireu; 10.02.2021
comment
Я могу отобразить его, но я хочу, чтобы отображалось и форматирование текста cms. Например, если я размещаю текст в разных разделах, мне нужны разрывы строк. или если я выделю какое-то слово жирным шрифтом, на сайте должно быть указано ???? (имеет ли это смысл? - person csk87; 11.02.2021