以編程方式生成Gatsby頁面，無需Graphql的slug

我在 WordPress 中設定了一個名為 Projects 的 ACF 選項頁面

在專案選項頁面內有一個 ACF 中繼器，允許用戶添加多個專案。

在 Gatsby 中，我使用 Graphql 在兩個檔案中查詢我的專案的資料：

• 在自定義掛鉤中，允許訪問我的 Gatsby 站點中的全域資料

• 在 gatsby-node.js 檔案中，以便為我的模板頁面生成一個名為 project-details.js 的 slug

顯然，Graphql 中沒有針對 ACF 選項頁面中的此轉發器欄位的 slug。相反，我基于在每個專案轉發器欄位中找到的嵌套標題文本欄位生成一個 slug。

我同時使用 replaceAll() 和 toLowerCase() 方法來創建 slug，然后將其作為我資料的一部分提供。

這是我的自定義鉤子：

export const useProjectsQueryAlt = () => {

  const data = useStaticQuery(graphql`
    query ProjectsQueryAlt {
      wp {
        projects {
          projects {
            allprojects {
              projectContent
              projectTitle
              featuredImage {
                mediaItemUrl
                id
              }
              projectGallery {
                caption
                id
                mediaItemUrl
              }
            }
          }
        }
      }
    }
    `)

    const project = data.wp.projects.projects.allprojects.map(node => {
      const { projectContent, projectTitle, featuredImage, projectGallery } = node;
        
        const title = node.projectTitle;
        const spacesToHyphen = title.replaceAll(' ', '-');
        const slugFromTitle = spacesToHyphen.toLowerCase()

        return {
          projectContent, 
          projectTitle,
          slug: slugFromTitle,
          featuredImage,
        
          projectGallery: projectGallery.map(node => {
            const { caption, id, mediaItemUrl } = node;
            return {
              caption, 
              id, 
              mediaItemUrl
            }
          })

      }
    })

    return { project }
}

這是我的 gatsby-node 檔案：

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {

    const { data } = await graphql(`
    query Projects {
        wp {
            projects {
                projects {
                    allprojects {
                        projectTitle
                    }
                }
            }
        }
    }
    `) 

    data.wp.projects.projects.allprojects.forEach(node => {

        const title = node.projectTitle;

        const spacesToHyphen = title.replaceAll(' ', '-');
        const slugFromTitle = spacesToHyphen.toLowerCase()

        actions.createPage({
            path: '/projects/'   slugFromTitle,
            component: path.resolve('./src/templates/project-details.js'),
            context: { slug: slugFromTitle },
        })
    })

}

這是我的模板檔案 project-details.js

import React from 'react'

function ProjectDetails() {

  return (
    <div>
      ...my page template content
    </div>
  )
}

export default ProjectDetails

我現在需要找到一種方法來檢查兩個附加的 slug 在我的“project-details.js”模板檔案中是否匹配，以便將相關的專案資料顯示到相應的 URL。

看到我在前端生成了我的 slug，遵循 Gatsby Docs 設定動態生成頁面與我的用例不符。我希望有人對這個用例有過經驗，可以為我指明正確的方向。

uj5u.com熱心網友回復：

您的方法中的問題是您正在生成基于title專案的“假”slug，因此您不能使用該欄位來過濾任何 GraphQL 節點，因為該欄位不存在于專案欄位中。您最好的選擇是使用它title本身或使用任何自動生成的識別符號（id如果它作為欄位存在）。

actions.createPage({
    path: '/projects/'   slugFromTitle,
    component: path.resolve('./src/templates/project-details.js'),
    context: { title },
})

注意：可以省略{ title: title }

您仍然可以使用path生成的 slug，這是一種有效的方法。

我假設如果title是唯一欄位，則slug必須也是如此，因此您將是一個有效的過濾器。

現在在project-details.js：

import React from 'react'

function ProjectDetails({ data }) {
  console.log("my data is", data);

  return (
    <div>
      ...my page template content
    </div>
  )
}

export const query = graphql`
  query($title: String!) {
    yourACFNode(title: { eq: $title} ) {
      # your fields
    }
  }
`

export default ProjectDetails

當然，調整上面的查詢以匹配您的 ACF 節點，但獲得方法。

標籤：javascript 图形 盖茨比

上一篇：洗掉表行按鈕洗掉所有后續行

下一篇：Javascript：我如何為2個不同的html頁面使用“全域變數”？