วิธีรับ Gatsby page HTML ใน graphQL
ฉันกำลังพยายามใช้การค้นหาไซต์ด้วย 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 เพื่อให้รวมอยู่ในดัชนีการค้นหา
ฉันกำลังทำเรื่องนี้ผิดทางหรือเปล่า?
คำตอบ
คุณสามารถดึงไฟล์ / เนื้อหา 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 ที่แปลงแล้วทั้งหมดภายในโฟลเดอร์ที่อยู่ในไดเร็กทอรีย่อย