วิธีรับ Gatsby page HTML ใน graphQL

Oct 29 2020

ฉันกำลังพยายามใช้การค้นหาไซต์ด้วย elasticlunr และกำลังทำตามคำแนะนำสำหรับ gatsby-plugin-elasticlunr-search ฉันติดอยู่ในการพยายามสร้างดัชนีการค้นหาเนื่องจากฉันไม่สามารถสร้างข้อความค้นหา graphql ที่มีเนื้อหาใด ๆ ของฉันได้

ทุกตัวอย่างที่ฉันพบแสดงวิธีแก้ไข gatsby-config.js เพื่อเติมข้อมูล graphql ด้วยเนื้อหา markdown:

resolvers: {
      // For any node of type MarkdownRemark, list how to resolve the fields` values
      MarkdownRemark: {
        title: node => node.frontmatter.title,
        tags: node => node.frontmatter.tags,
        path: node => node.frontmatter.path,
      },
    },

ฉันไม่มีการทำเครื่องหมายใด ๆ เนื้อหาของฉันทั้งหมดเป็น HTML และไฟล์ JSON บางไฟล์ มีวิธีใดบ้างในการดึงเนื้อหา HTML ไปยัง graphql เพื่อให้รวมอยู่ในดัชนีการค้นหา

ฉันกำลังทำเรื่องนี้ผิดทางหรือเปล่า?

คำตอบ

1 FerranBuireu Oct 29 2020 at 13:06

คุณสามารถดึงไฟล์ / เนื้อหา JSON ในลักษณะเดียวกับที่คำแนะนำทำด้วย markdown (ดังที่คุณเห็นในเอกสารของ Gatsbyหรือในบทความนี้ ) อย่างไรก็ตามคุณอาจต้องสร้างโครงสร้างข้อมูลเพื่อเติม HTML ของคุณเนื่องจากคุณสามารถ ' ดึงข้อมูลจากไฟล์ HTML โดยตรงเนื่องจากไม่ได้อยู่ในระบบไฟล์ Gatsby ดังนั้น Gatsby จึงไม่รู้วิธีสร้างโหนดหรือ GraphQL schema จากเนื้อหานั้น

วิธีที่ง่ายที่สุดคือการสร้างระบบไฟล์ข้อมูลที่กำหนดเอง (ไฟล์ JSON, YAML หรือ markdown) เพื่อเติมข้อมูล HTML ของคุณและทำให้เป็นแบบไดนามิกไม่ใช่ "ฮาร์ดโค้ด" อย่างที่เป็นจริง เมื่อคุณตั้งค่าระบบไฟล์และคุณสามารถสร้างแบบสอบถามเพื่อรวบรวมข้อมูลและเติมเต็มหน้า / ส่วนประกอบของคุณคุณจะสามารถสร้างแบบสอบถามเพื่อใช้งานelasticlunrได้

แหล่งข้อมูล:

  • https://itnext.io/reading-data-from-a-json-file-with-gatsby-graphql-572b18ab98a
  • https://github.com/gatsbyjs/gatsby/issues/20734
  • GraphQL Query เข้าถึงไฟล์ json ที่แปลงแล้วทั้งหมดภายในโฟลเดอร์ที่อยู่ในไดเร็กทอรีย่อย