Блог

Мне нужна помощь, и я не могу найти какое-либо работоспособное решение.

Структура моего проекта выглядит так:

     blog
        post1
            index.md
            image.jpg
            data.json
        post2
            index.md
            image.jpg
            data.json
        and so on...
 

Каждая сгенерированная страница должна исходить из их файла markdown (и он отлично работает из-за возможности фильтрации с помощью slug), файла изображения (который волшебным образом также работает), но я понятия не имею, как запрашивать данные JSON только из той же папки, что и файл MD и jpeg? Я не могу фильтровать allDataJson по slug, пути к каталогу и так далее. Я думал, что выясню что-нибудь о родительском узле, но идентификационный номер мне ничего не говорит.

Есть предложения? Я был бы очень признателен 🙏

У вас есть несколько путей, которым нужно следовать, чтобы достичь этого, но все они основаны на одной и той же идее. Передача контекстного поля на основе файла markdown для фильтрации файла JSON.

Чтобы использовать slug в ваших файлах JSON, вам нужно создать узел slug, как вы это делаете с MarkdownRemark .

 exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;

  if (node.internal.type === `MarkdownRemark` || node.internal.type === `postJson`) {
    let value = createFilePath({ node, getNode });

    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};
 

В соответствии с помехой схемы тип внутреннего узла должен быть postJson ( MarkdownRemark для файлов markdown). С приведенным выше фрагментом вы должны иметь возможность использовать slug из JSON, если ваши данные имеют одинаковую внутреннюю структуру.

Другой подход заключается в передаче через контекст параметра идентификатора, что-то вроде id или имени сообщения.

 createPage({
  path: node.fields.slug,
  component: path.resolve(`./src/templates/blog-post.js`),
  context: {
    slug: node.fields.slug,
    id: node.id // or the name
  },
})
 

Затем в вашем шаблоне выполните фильтр по параметру:

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