Как мне создать несколько страниц из одного файла уценки?

В Gatsby у меня есть file.md, и я хотел бы создать несколько страниц - по одной для каждого раздела file.md.

Гэтсби-трансформер-замечание

При использовании gatsby-transformer-remark я могу получить HTML-код всего файла уценки с помощью allMarkdownRemark.nodes.html. Как мне получить HTML-код каждого раздела файла? Например:

file.md:

# section 1

**bold**

# section 2

foo

Я хотел бы получить массив HTML-кодов разделов, например:

[
  '<div><h1>section 1</h1><b>bold</b></div>', 
  '<div><h1>section 2</h1>foo</div>'
]

Гэтсби-плагин-MDX

С gatsby-plugin-mdx, когда я

query MyQuery {
  mdx {
    headings {
      value
      depth
    }
  }
}

я получил

{
  "data": {
    "mdx": {
      "headings": [
        {
          "value": "Section1",
          "depth": 1
        },
        {
          "value": "Section2",
          "depth": 1
        },
      ]
    }
  },
  "extensions": {}
}

Но когда я сделаю:

query MyQuery {
  mdx(headings: {elemMatch: {value: {eq: "Section1"}}}) {
    body
  }
}

body - это весь файл, а не только Section1.


gatsby markdown gatsby-plugin
person Loren    schedule 23.02.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В вашем файле уценки file.md все, что находится после ---, является телом уценки, поэтому вы можете напрямую получить его части.

Я бы предложил другой обходной путь с использованием MDX (M ark d own + JS X), который позволяет вам добавлять логику React в файл уценки. У Gatsby есть подробный плагин для этого: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/

Другой обходной путь без использования многомерных выражений - использование разделов внутри уценки. Например, такая структура:

---
title: Test
section1:
  description: some description 
section2:
    title: Some **bold title** for the section 2
---
The rest of the body content

Создает узел для каждого раздела, поэтому ваш объект будет выглядеть как allMarkdownRemark.nodes.section1.description и allMarkdownRemark.nodes.section2.title соответственно.

Обратите внимание, что вместе с ним вы можете добавить все стили, поддерживаемые уценкой.

person Ferran Buireu    schedule 23.02.2021
comment
Спасибо, на самом деле разделы очень длинные, поэтому они не помещаются в переднюю часть с большим отступом. Я попробовал ваше предложение gatsby-plugin-mdx, но не вижу, как получить содержимое каждого раздела отдельно. Ты знаешь как? Редактировал вопрос со своим прогрессом. - person Loren; 25.02.2021
comment
Тело MDX - это буквально файл JSX, поэтому добавьте компоненты и оберните содержимое по своему усмотрению. - person Ferran Buireu; 26.02.2021
comment
Я не уверен, как добавление компонентов может позволить мне сгенерировать несколько страниц из одного файла mdx? - person Loren; 28.02.2021
comment
Нет, добавление компонентов в файл MDX позволит вам настроить разделы тела уценки. - person Ferran Buireu; 28.02.2021
comment
Хорошо, похоже, что использование gatsby-plugin-mdx не является решением моего исходного вопроса. - person Loren; 02.03.2021