आइए बाहरी सामग्री के साथ एक स्थिर वेबसाइट बनाएं।
इस पोस्ट में मैं आपको दिखाऊंगा कि आप GatsbyJS के साथ किसी भी डेटा स्रोत से डेटा को स्टैटिक-रेंडर कैसे कर सकते हैं।

गैट्सबीजेएस

यदि आप रिएक्ट का आनंद लेते हैं और एक मानक-अनुपालक और उच्च प्रदर्शन वेब चाहते हैं, तो आपको गैट्सबीजेएस को देखना चाहिए।

इससे क्या होता है?

यह आपके रिएक्ट कोड को स्थिर HTML फ़ाइलों के संग्रह में संकलित करेगा।

आपको परवाह क्यों करनी चाहिए?

1. अधिकतम प्रदर्शन - जब कोई उपयोगकर्ता आपके वेब को देखता है, तो क्लाइंट या सर्वर साइड पर कोई कोड नहीं चलता है!
2. सबसे तेज़ छवियां - उपयोगकर्ता के डिवाइस के लिए सही रिज़ॉल्यूशन में छवियों की प्रगतिशील लोडिंग।
3. एसईओ - स्थिर HTML गूगल (रोबोट) के अनुकूल है। धीमी वेबसाइटों को Google खोज द्वारा दंडित किया जाता है!
4. प्रतिक्रिया - उत्पादक फ्रंटएंड विकास।
5. टाइपस्क्रिप्ट - त्रुटियों को पकड़ें, इससे पहले कि आपके उपयोगकर्ता उन्हें देखें (वैकल्पिक, लेकिन अत्यधिक अनुशंसित)!
6. सामग्री - आउट-ऑफ़-द-बॉक्स कई सामग्री स्रोतों को कनेक्ट करें और उपयोग करें या अपना खुद का जोड़ें!

गैट्सबी जेएस सामग्री

GatsbyJS सामग्री को नोड्स के पेड़ के रूप में दर्शाता है। एक नोड एक छवि, पाठ का एक ब्लॉक हो सकता है।
उदाहरण के लिए एक ब्लॉग पोस्ट टेक्स्ट और छवि नोड्स का एक संग्रह है।

आप अपनी gatsby-node.js फ़ाइल में हाथ से नोड्स बना सकते हैं। लेकिन आसान तरीके भी हैं।

प्लग-इन

नोड्स प्लगइन्स द्वारा बनाए जाते हैं। आपको कौन सा प्लगइन चाहिए, यह आपकी पसंद के सीएमएस पर निर्भर करता है।
सबसे सीधा विकल्प फाइलसिस्टम प्लगइन है, जो फाइलों को नोड्स में बदल देता है।
अपने लिए सही प्लगइन ढूंढने के लिए यहां देखें

प्लगइन नहीं मिला

यदि आपके पास कोई डेटा स्रोत है जो मौजूदा प्लगइन्स द्वारा कवर नहीं किया गया है, तो आइए अपना स्वयं का निर्माण करें।

प्रक्रिया काफी सीधी है, एकमात्र जटिल हिस्सा छवियां हैं।

नोड्स लोड हो रहे हैं

अपने गैट्सबी प्रोजेक्ट रूट फ़ोल्डर में gatsby-node.ts (या js) फ़ाइल बनाएं।

आरंभ करने के लिए यह कोड जोड़ें. जब गैट्सबी प्रोजेक्ट बनाया जाता है तो सोर्सनोड्स विधि स्वचालित रूप से कॉल की जाती है।

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

अब अपना डेटा लाते हैं। यहां मैं https://inuko.net ऐप प्लेटफॉर्म का उपयोग करता हूं, लेकिन प्रक्रिया किसी भी स्रोत के लिए समान है।

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

और आइए वे छवियां भी लाएं जिनकी हमें आवश्यकता होगी।

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

अब हमारे पास (ब्लॉग) पोस्ट की एक सूची और छवियों (लिंक) की एक सूची है।
इस उदाहरण में हमारे पास एक सरल संरचना है जहां प्रत्येक पोस्ट में कुछ टेक्स्ट सामग्री और एक छवि की एक आईडी होती है।

अगला कदम हमारे सर्वर से प्राप्त डेटा को उस डेटा में परिवर्तित करना है जिसे गैट्सबी उपयोग कर सकता है।
गैट्सबी में डेटा को *नोड*एस द्वारा दर्शाया जाता है, तो आइए देखें कि हमारे सर्वर डेटा को नोड में कैसे परिवर्तित किया जाए।

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

हम सभी पोस्टों को दोहराते हैं और प्रत्येक के लिए एक संबंधित नोड बनाते हैं।
यदि किसी पोस्ट में एक छवि पोस्ट.इमेज_आईडी है तो हम एक रिमोटफाइलनोड नोड भी बनाते हैं और
इसे पोस्ट नोड में जोड़ें
post.mediaFile___NODE = fileNode.id

महत्वपूर्ण नोट: गैट्सबी स्वचालित रूप से हमारे फ़ाइल नोड्स से छवि नोड्स बनाएगा, लेकिन इसे यह पता लगाने के लिए एक तरीके की आवश्यकता है कि यह एक छवि है।
यदि आपके यूआरएल में फ़ाइल एक्सटेंशन हैं या आपका सर्वर एक छवि सामग्री प्रकार के साथ उत्तर देगा, तो आप पूरी तरह तैयार हैं।
यदि ऐसा नहीं है, तो आप छवि नोड निर्माण को ट्रिगर करने के लिए फ़ाइल नोड (पीएनजी, जेपीजी) पर एक स्पष्ट एक्सटेंशन सेट कर सकते हैं।
पाठ: name.substring(name.lastIndexOf(''''))

छवि नोड्स

शायद आप सोच रहे होंगे कि हम छवियों को नोड्स के रूप में लोड करने की इतनी परेशानी क्यों उठाते हैं। हम सीधे छवि यूआरएल का उपयोग कर सकते हैं।
उदाहरण के लिए, कभी-कभी छवियाँ किसी प्रमाणित सेवा के पीछे हो सकती हैं।
लेकिन असली कारण यह है कि हम गैट्सबी द्वारा प्रदान किए जाने वाले शानदार इमेज प्लगइन का उपयोग करना चाहते हैं।
यह स्वचालित रूप से छवियों को हमारे वेब पर देखने वाले किसी भी उपकरण के लिए सर्वोत्तम प्रारूप और आकार में परिवर्तित कर देगा।
इसका मतलब है कि छवियां तेजी से लोड होंगी और बेहतर दिखेंगी (और Google द्वारा बेहतर स्कोर प्राप्त करेंगी:)।

पृष्ठों में नोड्स का उपभोग करना

अब हम अपने द्वारा बनाए गए नोड्स का उपभोग करने के लिए तैयार हैं।
ऐसे कई तरीके हैं जिनसे आप ऐसा कर सकते हैं, इस उदाहरण के लिए हम कुछ पोस्ट करेंगे और उन्हें features पेज पर प्रस्तुत करेंगे।

सबसे पहले हमें उन डेटा नोड्स को लोड करना होगा जिनमें हम रुचि रखते हैं। हम useStaticQuery का उपयोग करेंगे।
फिर हम डेटा को सेक्शनग्रिड नामक हमारे पुन: प्रयोज्य घटक में भेज देंगे जो सभी लोड किए गए पोस्ट को प्रस्तुत करेगा।

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return Features} />
}

रेंडर समय!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return 

        

            {props.title}
        
        {edges.map(edge => {
            const node = edge.node;
            return 

                

                    
                

                    
{node.title}
                    
{node.content}
                
            
        })}
    
}

यह घटक हमें आउट क्वेरी से प्राप्त सभी नोड्स पर पुनरावृत्त करेगा। और यह दो div प्रस्तुत करेगा एक पोस्ट छवि के लिए और एक text सामग्री के लिए।

वह एक कवर है

एक बेहतरीन दिखने वाली और अच्छा प्रदर्शन करने वाली वेबसाइट बनाना इतना आसान कभी नहीं रहा।
Gatsbyjs (और इसके प्लगइन्स) जैसे उपकरण हमारे लिए अधिकांश भारी काम करेंगे।
इस प्रकार हम अपना 100% समय सामग्री और डिज़ाइन के लिए समर्पित कर सकते हैं।

मुझे आशा है कि इस पोस्ट से आप अपने वर्कफ़्लो को और अधिक स्वचालित करने में सक्षम होंगे।
अब आप अपनी उत्पाद सूची, ज्ञानकोष या अन्य मूल्यवान सामग्री अपनी वेबसाइट पर ला सकते हैं।
बिना कॉपी-पास्ता और पूरी तरह से स्वचालित छवि प्रसंस्करण के साथ।

हैप्पी हैकिंग!