gatsby.js - продвинутый стартер - Реализовать 2 префикса URL (2 разных раздела сайта)?

Question

Выглядит так, как будто вы помещаете ваши jsx-файлы в папку «pages» большинства начальных версий gatsby, URL-адреса следуют структуре каталогов из коробки, поэтому вы можете реализовать любые URL-адреса, которые вам нужны (http://blah.com/foo/post1,http://blah.com/bar/post2) просто путем вложения папок в исходное дерево (pages/foo/post.jsx, pages/bar/post2.jsx).

Проблема

Я использовал расширенный стартер gatsby (https://github.com/Vagr9K/gatsby-advanced-starter). Он помещает все файлы содержимого не в pages/, а в папку верхнего уровня content/, и я не могу понять, как будет проводиться репликация URL-адресов foo / xxx, bar / xxx даже после созданияcontent/foo/post1.md, content/bar/post2.md папок.

В нем есть файл siteconfig.js, который задает префикс одного пути, но я хочу два разных префикса для 2различные разделы сайта, так что я пока просто устанавливаю его в "/" (сборки, похоже, игнорируют любое значение, которое я установил для этого параметра конфигурации, так что ... пожимаем плечами).

Что я пробовал

• Я попытался добавить path к frontmatter файлов .md и установить его в родительское имя.Это было полностью проигнорировано (в любом случае я не думаю, что это то, что я хочу ... Я хотел бы сохранить сгенерированный слаг как часть URL).
• Раздельное использование gatsby-source-filesystem один длякаждая подпапка надеется, что это изменит график graphql для распознавания 2 отдельных источников данных, но это не имеет значения.

Что я делаю не так?

Answer 1

Выглядит так, как будто вы помещаете ваши файлы jsx в папку 'pages' большинства стартеров Гэтсби, URL-адреса следуют структуре каталогов из коробки [...]

Это не только для начинающих Гэтсби, это поведение Гэтсби по умолчанию.Каждый файл js / jsx в src/pages будет страницей.

, но в папке content/ верхнего уровня

В нем по-прежнему есть папка src/pagesдля обычных страниц.Но папка content содержит файлы, которые будут преобразованы с src/templates в gatsby-node.js в страницы.Или другими словами: содержимое папки content создается программным способом с использованием определенного шаблона в gatsby-node.js (а шаблон находится в src/templates).

---

Определен путь / URL-адрес getв функции createPage здесь: gatsby-nodeL144 .Эта строка ссылается на edge.node.fields.slug, который запрашивается в GraphQL выше здесь .Поле добавляется в функцию onCreateNode .В частности, поле slug в функции onCreateNodeField .Там вы видите, что ему передается slug, который определен выше.

---

Создайте две папки в вашей папке src/content, например, blog и projects.Убедитесь, что они оба определены в вашем gatsby-config.js:

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'blog',
    path: `${__dirname}/content/blog`,
  },
},
{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'projects',
    path: `${__dirname}/content/projects`,
  },
},

В вашем gatsby-node.js добавьте после определения fileNode строку:

const pathPrefix = fileNode.sourceInstanceName

sourceInstanceName - это то, что мы определили как name в gatsby-config записях.

Затем вы можете изменить строку на:

createNodeField({ node, name: "slug", value: `/${pathPrefix}${slug}` });
createNodeField({ node, name: 'sourceInstanceName', value: pathPrefix });

Вторая строка полезна, если вы хотите запросить только одну из двух папок, например:

export const pageQuery = graphql`
  query BlogQuery {
    allMarkdownRemark(filter: { fields: { sourceInstanceName: { eq: "blog } } }
    ) {
        edges {
          node {
            ... etc
          }
        }
      }
  }
`