У меня есть категории, кусочки и картинки.Они все в каскадном порядке;Типичные отношения ребенок-родитель.И структура папок уже представляет эту иерархию.В конце я объясню мою основную проблему более подробно.
Структура папки:
work
├── drawing
│ ├── drawing-1
│ │ ├── image.1.jpg
│ │ ├── image.2.jpg
│ │ ├── image.3.jpg
│ │ ├── image.jpg
│ │ └── index.md
│ └── index.md
├── sculpture
│ ├── gaehnschreier
│ │ ├── image.1.JPG
│ │ ├── image.2.jpg
│ │ ├── image.3.JPEG
│ │ ├── image.4.png
│ │ ├── image.PNG
│ │ └── index.md
│ └── index.md
└── watercolor
├── index.md
├── portrait-1
│ ├── image.jpg
│ └── index.md
└── portrait-2
├── image.jpg
└── index.md
Это простая иерархия портфеля.work является корневой папкой и имеет разные категории, например drawing.Внутри вы найдете папки, которые представляют определенный кусок.Каждый фрагмент имеет index.md с подробной информацией об этом фрагменте и несколькими изображениями (jpeg, png и т. Д.).
gatsby-config.js:
// ...
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'work',
path: `${__dirname}/work/`,
},
},
// ...
Для разрешения файлов я использую плагин gatsby-source-filesystem.Таким образом, я могу запросить эту папку по sourceInstanceName: { eq: "work" }.
gatsby-node.js:
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `Directory`) {
if (node.sourceInstanceName === `work`) {
if (!node.relativeDirectory) {
createNodeField({
node,
name: `workCategory`,
value: true,
})
}
}
}
}
Этот кодпомогает мне пометить категории для последующего использования, например, для отображения списка категорий на странице обзора.
Примеры запросов:
{
allDirectory(
filter: {
sourceInstanceName: { eq: "work" }
relativeDirectory: { eq: "" }
}
) {
edges {
node {
dir
name
extension
relativeDirectory
relativePath
}
}
}
}
Запрос всех категорий.
{
allDirectory(
filter: {
sourceInstanceName: { eq: "work" }
relativeDirectory: { eq: "drawing" }
}
) {
edges {
node {
dir
name
extension
relativeDirectory
relativePath
}
}
}
}
Запрос всех фрагментов категории drawing.
{
allFile(
filter: {
sourceInstanceName: { eq: "work" }
extension: { in: ["jpg", "jpeg", "png"] }
relativeDirectory: { eq: "drawing/drawing-1" }
}
) {
edges {
node {
dir
name
extension
relativeDirectory
relativePath
}
}
}
}
Запрос всех изображений произведения drawing-1 внутри категории drawing.
1060 *
Проблема:
В лучшем случаеЯ хотел бы пройтись по каждой категории и отобразить работы с их изображениями и описаниями из index.md.Но как я могу извлечь категории отдельно, чтобы запросить куски?Как я должен сопоставить эти объекты вместе с Гэтсби?Моя концепция обманчива?Если у вас есть хорошее предложение, о чем я должен подумать, чтобы достичь своей цели, я буду очень рад этому.
РЕДАКТИРОВАТЬ:
Прямо сейчасЯ возлюсь с sourceNodes() и создаю абстрактные узлы из структуры папок.Желаемый JSON может выглядеть так:
{
"data": {
"allWorkCategory": {
"edges": [
{
"node": {
"path": "work/scuplture",
"children": [
{
"node": {
"internal": {
"type": "WorkItem",
"name": "Drawing 1",
"pictures": {
// ...
}
}
}
}
],
"internal": {
"type": "WorkCategory"
}
}
},
{
"node": {
"path": "work/drawing",
"children": [],
"internal": {
"type": "WorkCategory"
}
}
},
{
"node": {
"path": "work/watercolor",
"children": [],
"internal": {
"type": "WorkCategory"
}
}
}
]
}
}
}