Визуализация уценки / HTML с frontmatter в проекте Gatsby NetlifyCMS

Question

NetlifyCMS предлагает редактор уценки, который позволяет вставлять уценку (и блоки кода) в frontmatter.

Полученный файл уценки может содержать следующее:

---
featureSubtitle: |-
  ![fdsaf](/img/cdc-w9keokhajkw-unsplash.jpg "blah")

  # Markdown H1

  ## Markdown H2


  <h1>Test</h1>
  <p>Paragraph</p>
---

Затем он загружается на страницу из frontmatter с помощью запроса graphql, например:

export const pageQuery = graphql`
  query FeaturePageByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        title
        description
        featureSubtitle
      }
    }
  }
`;

и

{featureSubtitle && featureSubtitle ? (
                  <div
                    dangerouslySetInnerHTML={{ __html: featureSubtitle }}
                  />
                ) : null}

Это, однако, похоже, правильно отображает HTML, но не уценку.

Answer 1

Плагин преобразователя замечаний gatsby преобразует уценку в html в теле вашего файла уценки и получает данные frontmatter вверху вашего файла уценки. Frontmatter используется в основном для метаданных. Однако вы можете самостоятельно преобразовать поле frontmatter в html. Смотрите эту ссылку.

Или убедитесь, что вы используете тело для поля уценки, как это в вашем config.yml для netlify cms:

fields:
      - { label: "featureSubtitle", name: "body", widget: "markdown" }

Затем его можно получить как html с помощью html поле в вашем запросе graphql и будет использоваться следующим образом:

<div dangerouslySetInnerHTML={{ __html: html}} />