Gatsby.js विस्तार से

जैसा कि आप जानते हैं, आप अकेले कुछ बॉयलर पर बहुत दूर नहीं जा सकते हैं, इसलिए आपको कुछ सार्थक लिखने के तरीके के बारे में जानने के लिए किसी भी तकनीक में गहराई तक जाना होगा। यह लेख Gatsby.js के विवरण पर चर्चा करता है, जिसके ज्ञान से आप जटिल वेबसाइटों और ब्लॉगों को बना और बनाए रख सकते हैं।

JAM- स्टैक का उपयोग करके एक व्यक्तिगत ब्लॉग बनाने और प्रकाशित करने के तरीके पर पिछला लेख

नीचे चर्चा किए गए विषय:

• पृष्ठ संरचना और मार्ग
• अवयव, टेम्पलेट, और उनकी सहभागिता
• डेटा के साथ काम करें
• प्लग-इन
• आवेदन स्टाइल
• प्रतिक्रिया-हेलमेट का उपयोग करके एसईओ अनुकूलन
• PWA सेटअप

ट्रेनिंग

yarn global add gatsby-cli 

  npx gatsby new gatsby-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world cd gatsby-tutorial 

  git init git add . git commit -m "init commit" 

  yarn start 

पृष्ठ संरचना और मार्ग

Gatsby में एक पेज बनाने के लिए, बस नई फ़ाइल / src / पेज फ़ोल्डर में रखें और इसे एक अलग HTML पेज में संकलित किया जाएगा। यह ध्यान रखना महत्वपूर्ण है कि इस पृष्ठ का पथ नाम के साथ वास्तविक पथ के अनुरूप होगा । उदाहरण के लिए, कुछ और पृष्ठ जोड़ें:

 src └── pages ├── about.js ├── index.js └── tutorial ├── part-four.js ├── part-one.js ├── part-three.js ├── part-two.js └── part-zero.js 

सामग्री अभी तक महत्वपूर्ण नहीं है, इसलिए पृष्ठों के बीच अंतर करने के लिए किसी भी पाठ का उपयोग किया जा सकता है।

 import React from "react"; export default () => <div>Welcome to tutorial/part-one</div>; 

ब्राउज़र में जांचें:

• http: // localhost: 8000 / ट्यूटोरियल / पार्ट-वन
• http: // लोकलहोस्ट: 8000 / के बारे में

इस प्रकार, जब फ़ाइलों को संरचित करते हैं, तो आप तुरंत रूटिंग मुद्दों को हल कर सकते हैं।

एक विशेष createPage API भी है जिसके साथ आप अधिक लचीले ढंग से पथों और पृष्ठों के नामों को नियंत्रित कर सकते हैं, लेकिन इसके साथ काम करने के लिए हमें Gatsby में डेटा के संचालन की समझ की आवश्यकता है, इसलिए हम इसे लेख में थोड़ा आगे पर विचार करेंगे।

लिंक का उपयोग करके बनाए गए पृष्ठों को मिलाएं, इसके लिए हम गैट्सबी पैकेज से <Link /> घटक का उपयोग करते हैं, जो विशेष रूप से आंतरिक नेविगेशन के लिए बनाया गया था। सभी बाहरी लिंक के लिए, नियमित <a> टैग का उपयोग करें।

/src/pages/index.js

 import React from "react"; import { Link } from "gatsby"; export default () => ( <div> <ul> <li> <Link to="/about">about</Link> </li> <li> <Link to="/tutorial/part-zero">Part #0</Link> </li> <li> <Link to="/tutorial/part-one">Part #1</Link> </li> <li> <Link to="/tutorial/part-two">Part #2</Link> </li> <li> <Link to="/tutorial/part-three">Part #3</Link> </li> <li> <Link to="/tutorial/part-four">Part #4</Link> </li> </ul> </div> ); 

<Link> हुड के तहत पृष्ठ लोड करने के अनुकूलन के लिए एक बहुत ही मुश्किल तंत्र है और इसलिए इसका उपयोग साइट को नेविगेट करने के लिए <a> बजाय किया जाता है। अधिक विवरण यहां पाया जा सकता है ।

पृष्ठ बनाए जाते हैं, लिंक जोड़े जाते हैं, यह पता चलता है कि नेविगेशन समाप्त हो गया है।

अवयव, टेम्प्लेट, और उनकी सहभागिता

जैसा कि आप जानते हैं, किसी भी परियोजना में हमेशा दोहराए जाने वाले तत्व होते हैं, वेबसाइटों के लिए यह एक हेडर, फुटर, नेविगेशन बार है। इसके अलावा, पृष्ठ, सामग्री की परवाह किए बिना, एक निश्चित संरचना के अनुसार बनाए जाते हैं, और चूंकि गैट्सबी रिएक्ट के लिए एक संकलक है, इसलिए इन समस्याओं को हल करने के लिए एक ही घटक दृष्टिकोण का उपयोग किया जाता है।

हेडर और नेविगेशन पैनल के लिए घटक बनाएँ:

/src/components/header.js

 import React from "react"; import { Link } from "gatsby"; /** *         *  ,     React-. *      ,    *  " ".     *    ""  GraphQL  gatsby- */ import logoSrc from "../images/logo.png"; export default () => ( <header> <Link to="/"> <img src={logoSrc} alt="logo" width="60px" height="60px" /> </Link> That is header </header> ); 

/src/components/sidebar.js

 import React from "react"; import { Link } from "gatsby"; export default () => ( <div> <ul> <li> <Link to="/about">about</Link> </li> <li> <Link to="/tutorial/part-zero">Part #0</Link> </li> <li> <Link to="/tutorial/part-one">Part #1</Link> </li> <li> <Link to="/tutorial/part-two">Part #2</Link> </li> <li> <Link to="/tutorial/part-three">Part #3</Link> </li> <li> <Link to="/tutorial/part-four">Part #4</Link> </li> </ul> </div> ); 

और उन्हें /src/pages/index.js में जोड़ें

 import React from "react"; import Header from "../components/header"; import Sidebar from "../components/sidebar"; export default () => ( <div> <Header /> <Sidebar /> <h1>Index page</h1> </div> ); 

हम जाँच करते हैं:

सब कुछ काम करता है, लेकिन हमें प्रत्येक पृष्ठ पर हैडर और साइडबार को अलग-अलग आयात करना होगा, जो बहुत सुविधाजनक नहीं है, और इस मुद्दे को हल करने के लिए एक लेआउट घटक बनाने और प्रत्येक पृष्ठ को इसके साथ लपेटने के लिए पर्याप्त है।

गैट्सबी लेआउट == प्रतिक्रिया कंटेनर
हां, यह सख्त समानता नहीं है, क्योंकि यह एक ही बात है

/src/components/layout.js

 import React from "react"; import Header from "./header"; import Sidebar from "./sidebar"; export default ({ children }) => ( <> <Header /> <div style={{ margin: `0 auto`, maxWidth: 650, backgroundColor: `#eeeeee` }} > <Sidebar /> {children} </div> </> ); 

/src/pages/index.js (और अन्य सभी पृष्ठ)

 import React from "react"; import Layout from "../components/layout"; export default () => ( <Layout> <h1>Index page</h1> </Layout> ); 

किया, ब्राउज़र को देखो:

क्यों परियोजना एक लोअरकेस पत्र के साथ सभी फ़ाइल नाम है? शुरू करने के लिए, यह निर्धारित करें कि प्रतिक्रिया के लिए नाम स्थान इस तथ्य से आता है कि "हर फ़ाइल एक वर्ग है, और वर्ग हमेशा पूंजीकृत होता है।" गैट्सबी में, फ़ाइलों में अभी भी कक्षाएं होती हैं, लेकिन एक "लेकिन" है - "प्रत्येक फ़ाइल एक संभावित पृष्ठ है, और इसका नाम इस पृष्ठ का URL है"। समुदाय इस निष्कर्ष पर पहुंचा कि http://domain.com/User/Settings जैसे लिंक कम्बल-इल-फाट और अनुमोदित कबाब-केस नहीं हैं।

  src ├── components │ ├── header.js │ ├── layout.js │ └── sidebar.js ├── images │ └── logo.png └── pages ├── about.js ├── index.js └── tutorial ├── part-eight.js ├── part-five.js ├── part-four.js ├── part-one.js ├── part-seven.js ├── part-six.js ├── part-three.js ├── part-two.js └── part-zero.js 

डेटा के साथ काम करें

अब जब साइट संरचना तैयार हो गई है, तो आप सामग्री भरने के लिए आगे बढ़ सकते हैं। क्लासिक "हार्डकोड" दृष्टिकोण जेएएम स्टैक के रचनाकारों के अनुरूप नहीं था, साथ ही साथ "AJAX अनुरोधों से सामग्री प्रस्तुत करना" और इसलिए उन्होंने संकलन समय पर साइटों को सामग्री के साथ भरने का सुझाव दिया। Gatsby के मामले में, इसके लिए GraphQL ज़िम्मेदार है, जो आपको किसी भी स्रोत से डेटा धाराओं के साथ आसानी से काम करने की अनुमति देता है।

ग्राफ़िकल के बारे में संक्षेप में बात करना असंभव है, इसलिए यह सलाह दी जाती है कि इसे स्वयं अध्ययन करें या मेरे अगले लेख की प्रतीक्षा करें। आप यहां ग्राफ़िकल के साथ काम करने के बारे में अधिक पढ़ सकते हैं।

दूसरे संस्करण से ग्राफक्लाइन के साथ काम करने के लिए, gatsby पैकेज में एक gatsby घटक है जिसका उपयोग पृष्ठों पर और सरल घटकों दोनों में किया जा सकता है, और इसके पूर्ववर्ती - पृष्ठ क्वेरी से इसका मुख्य अंतर है। अब तक, हमारी साइट किसी भी डेटा स्रोतों से जुड़ी नहीं है, इसलिए आइए, उदाहरण के लिए, मेटाडेटा पृष्ठ प्रदर्शित करने का प्रयास करें और फिर अधिक जटिल चीज़ों पर आगे बढ़ें।

query बनाने के लिए query आपको http: // localhost: 8000 / ___ graphql खोलने की जरूरत है, और साइट के बारे में उपलब्ध डेटा खोजने के लिए दस्तावेज़ीकरण के साथ साइडबार का उपयोग करना होगा, और ऑटो-पूर्णता के बारे में मत भूलना।

/src/components/sidebar.js

 import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; export default () => ( <StaticQuery query={graphql` { allSitePage { edges { node { id path } } } } `} render={({ allSitePage: { edges } }) => ( <ul> {edges.map(({ node: { id, path } }) => ( <li key={id}> <Link to={path}>{id}</Link> </li> ))} </ul> )} /> ); 

अब query का उपयोग करके query हम उन पृष्ठों के बारे में डेटा प्राप्त करते हैं जिन्हें हम नेविगेशन पैनल में प्रस्तुत करते हैं, और हमें इस तथ्य के बारे में चिंता करने की ज़रूरत नहीं है कि लिंक नाम से मेल नहीं खाएगा, क्योंकि सभी डेटा स्वचालित रूप से एकत्र किए जाते हैं।

वास्तव में, यह वह सभी डेटा है जो हमारी साइट पर बिना थर्ड-पार्टी प्लग-इन और अच्छे पुराने "हार्डकोड" का उपयोग किए बिना हो सकता है, इसलिए हम अपने लेख के अगले विषय पर आसानी से चलते हैं - प्लगइन्स।

प्लग-इन

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

एप्लिकेशन के रूट स्तर पर फ़ाइल /gatsby-config.js बनाएं। जो कम्पाइलर के विन्यास के लिए पूरी तरह से जिम्मेदार है, और फ़ाइलों के साथ काम करने के लिए पहला प्लगइन कॉन्फ़िगर करने का प्रयास करें:

प्लगइन स्थापना:

 yarn add gatsby-source-filesystem 

/Gatsby-config.js फ़ाइल में कॉन्फ़िगरेशन :

 module.exports = { plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } } ], } 

  /** * gatsby-config.js     *     JS *     */ module.exports = { /** *  'plugins'  pipeline  * ,      */ plugins: [ /** *        , *         */ `gatsby-example-plugin`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } } ], } 

याद रखें कि हमने Gatsby में "सही" छवि आयात के बारे में बात की थी?

/src/components/header.js

 import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; export default () => ( <StaticQuery query={graphql` { allFile(filter: { name: { eq: "logo" } }) { edges { node { publicURL } } } } `} render={({ allFile: { edges: [ { node: { publicURL } } ] } }) => ( <header> <Link to="/"> <img src={publicURL} alt="logo" width="60px" height="60px" /> </Link> That is header </header> )} /> ); 

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

स्टाइल के लिए प्लगइन्स इंस्टॉल करना:

 yarn add gatsby-plugin-typography react-typography typography typography-theme-noriega node-sass gatsby-plugin-sass gatsby-plugin-styled-components styled-components babel-plugin-styled-components 

gatsby-config.js

 module.exports = { plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, // add style plugins below `gatsby-plugin-typography`, `gatsby-plugin-sass`, `gatsby-plugin-styled-components` ] }; 

आधिकारिक वेबसाइट पर आप हर स्वाद के लिए एक प्लगइन पा सकते हैं।

आवेदन स्टाइल

आइए विभिन्न तरीकों का उपयोग करके एप्लिकेशन को स्टाइल करना शुरू करें। पिछले चरण में, हमने SASS , स्टाइल-कंपोनेंट्स और टाइपोग्राफी.जेएस लाइब्रेरी के साथ काम करने के लिए पहले से ही प्लग इन स्थापित किया है, जबकि यह ध्यान रखना महत्वपूर्ण है कि css.modules बॉक्स से बाहर समर्थित हैं।

आइए वैश्विक शैलियों के साथ शुरू करें, जो पूरी साइट से संबंधित अन्य चीजों की तरह, /gatsby-browser.js फ़ाइल में कॉन्फ़िगर की जानी चाहिए:

 import "./src/styles/global.scss"; 

Gatsby-browser.js के बारे में अधिक

/src/styles/global.scss

 body { background-color: lavenderblush; } 

विभिन्न कारणों से, हाल के वर्षों के रुझान "जेएस में सीएसएस" दृष्टिकोण की ओर झुक रहे हैं, इसलिए आपको वैश्विक शैलियों का दुरुपयोग नहीं करना चाहिए और फ़ॉन्ट और पुन: उपयोग किए गए वर्गों को इंगित करने के लिए खुद को सीमित करना बेहतर है। यह विशेष परियोजना इन उद्देश्यों के लिए टाइपोग्राफी.जेएस का उपयोग करने की योजना है, इसलिए वैश्विक शैली खाली रहेगी।

आपने कॉन्फ़िगरेशन में gatsby-plugin-typography जोड़ने के बाद साइट की उपस्थिति में परिवर्तन देखा हो सकता है - इसका कारण यह है कि इसका डिफ़ॉल्ट प्रीसेट लागू किया गया था, और अब हम इसे अपने लिए कॉन्फ़िगर करेंगे।

/src/utils/typography.js

 import Typography from "typography"; import theme from "typography-theme-noriega"; const typography = new Typography(theme); export default typography; 

आप सूची से किसी भी अन्य पूर्व निर्धारित का चयन कर सकते हैं या पैकेज एपीआई का उपयोग करके अपना खुद का बना सकते हैं (आधिकारिक गैट्सबी वेबसाइट के कॉन्फ़िगरेशन का उदाहरण )

/gatsby-config.js

 module.exports = { plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography` } }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components` ] }; 

और चयनित प्रीसेट के आधार पर, साइट की वैश्विक शैली को बदल दिया जाएगा। यह आपको तय करना है कि अपने लिए वैश्विक शैलियों को स्थापित करने के लिए कौन सा दृष्टिकोण है, यह एक तकनीकी दृष्टिकोण से व्यक्तिगत प्राथमिकताओं और मतभेदों का मामला नहीं है, और हम स्टाइल-घटकों का उपयोग करके स्टाइल घटकों पर चलते हैं :

वैश्विक चर /src/utils/vars.js के साथ एक फ़ाइल जोड़ें

 export const colors = { main: `#663399`, second: `#fbfafc`, main50: `rgba(102, 51, 153, 0.5)`, second50: `rgba(251, 250, 252, 0.5)`, textMain: `#000000`, textSecond: `#ffffff`, textBody: `#222222` }; 

  import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; import styled from "styled-components"; import { colors } from "../utils/vars"; const Header = styled.header` width: 100%; height: 3em; display: flex; justify-content: space-between; align-items: center; background-color: ${colors.main}; color: ${colors.textSecond}; padding: 0.5em; `; const Logo = styled.img` border-radius: 50%; height: 100%; `; const logoLink = `height: 100%;`; export default () => ( <StaticQuery query={graphql` { allFile(filter: { name: { eq: "logo" } }) { edges { node { publicURL } } } } `} render={({ allFile: { edges: [ { node: { publicURL } } ] } }) => ( <Header> That is header <Link to="/" css={logoLink}> <Logo src={publicURL} alt="logo" /> </Link> </Header> )} /> ); 

  import React from "react" import { Link, StaticQuery, graphql } from "gatsby" import styled from "styled-components" import { colors } from "../utils/vars" const Sidebar = styled.section` position: fixed; left: 0; width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: ${colors.second}; color: ${colors.textMain}; ` const navItem = ` display: flex; align-items: center; margin: 0 1em 0 2em; padding: 0.5em 0; border-bottom: 0.05em solid ${colors.mainHalf}; postion: relative; color: ${colors.textBody}; text-decoration: none; &:before { content: ''; transition: 0.5s; width: 0.5em; height: 0.5em; position: absolute; left: 0.8em; border-radius: 50%; display: block; background-color: ${colors.main}; transform: scale(0); } &:last-child { border-bottom: none; } &:hover { &:before { transform: scale(1); } } ` export default () => ( <StaticQuery query={graphql` { allSitePage { edges { node { id, path } } } } `} render={({ allSitePage: { edges } }) => ( <Sidebar> { edges.map(({ node: { id, path } }) => ( <Link to={path} key={id} css={navItem} >{id}</Link> )) } </Sidebar> )} /> ) 

पहले से ही मौजूद तत्वों को स्टाइल किया गया है, और कंटेंट के साथ कंटेंट को जोड़ने का समय है, मार्जिन प्लगइन को कनेक्ट करें और createPages API का उपयोग करके पेज जेनरेट करें।

पिछले लेख में Gatsby और Contentful को कैसे लिंक करें, इसके बारे में और पढ़ें ।

  [ { "id": "title", "type": "Symbol" }, { "id": "content", "type": "Text", }, { "id": "link", "type": "Symbol", }, { "id": "orderNumber", "type": "Integer", } ] 

पैकेज स्थापना:

 yarn add dotenv gatsby-source-contentful gatsby-transformer-remark 

/gatsby-config.js

 if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { plugins: [ `gatsby-transformer-remark`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography`, }, }, { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, }, }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components`, ], } , if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { plugins: [ `gatsby-transformer-remark`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/`, } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography`, }, }, { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, }, }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components`, ], } 

अंदर सभी फाइलों के साथ / src / Pages फ़ोल्डर को हटाएं और Gatsby में नोड्स को प्रबंधित करने के लिए एक नई फ़ाइल बनाएं:

/gatsby-node.js

 const path = require(`path`); /** *  ,      *       */ exports.createPages = ({ graphql, actions }) => { /** *        *        *    */ const { createPage } = actions; return graphql(` { allContentfulArticle { edges { node { title link content { childMarkdownRemark { html } } } } } } `).then(({ data: { allContentfulArticle: { edges } } }) => { /** *       *  createPage()    *      */ edges.forEach(({ node }) => { createPage({ path: node.link, component: path.resolve(`./src/templates/index.js`), context: { slug: node.link } }); }); }); }; 

Gatsby-node.js के बारे में अधिक

एक टेम्प्लेट फ़ाइल बनाएं जो उत्पन्न पृष्ठों के लिए आधार होगा
/src/templates/index.js

 import React from "react"; import { graphql } from "gatsby"; import Layout from "../components/layout"; export default ({ data: { allContentfulArticle: { edges: [ { node: { content: { childMarkdownRemark: { html } } } } ] } } }) => { return ( <Layout> <div dangerouslySetInnerHTML={{ __html: html }} /> </Layout> ); }; export const query = graphql` query($slug: String!) { allContentfulArticle(filter: { link: { eq: $slug } }) { edges { node { title link content { childMarkdownRemark { html } } } } } } `; 

यहां <StaticQuery /> घटक का उपयोग क्यों नहीं किया जाता है? बात यह है कि यह एक अनुरोध के निर्माण के लिए चर का समर्थन नहीं करता है, लेकिन हमें पृष्ठ के संदर्भ से $slug चर का उपयोग करने की आवश्यकता है।

  import React from "react"; import { Link, StaticQuery, graphql } from "gatsby"; import styled from "styled-components"; import { colors } from "../utils/vars"; const Sidebar = styled.section` position: fixed; left: 0; width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: ${colors.second}; color: ${colors.textMain}; `; const navItem = ` display: flex; align-items: center; margin: 0 1em 0 2em; padding: 0.5em 0; border-bottom: 0.05em solid ${colors.main50}; postion: relative; color: ${colors.textBody}; text-decoration: none; &:before { content: ''; transition: 0.5s; width: 0.5em; height: 0.5em; position: absolute; left: 0.8em; border-radius: 50%; display: block; background-color: ${colors.main}; transform: scale(0); } &:last-child { border-bottom: none; } &:hover { &:before { transform: scale(1); } } `; export default () => ( <StaticQuery query={graphql` { allContentfulArticle(sort: { order: ASC, fields: orderNumber }) { edges { node { title link orderNumber } } } } `} render={({ allContentfulArticle: { edges } }) => ( <Sidebar> {edges.map(({ node: { title, link, orderNumber } }) => ( <Link to={link} key={link} css={navItem}> {orderNumber}. {title} </Link> ))} </Sidebar> )} /> ); 

एसईओ अनुकूलन

तकनीकी पक्ष पर, साइट को तैयार माना जा सकता है, तो चलिए इसके मेटा-डेटा के साथ काम करते हैं। ऐसा करने के लिए, हमें निम्नलिखित प्लगइन्स की आवश्यकता है:

 yarn add gatsby-plugin-react-helmet react-helmet 

प्रतिक्रिया-हेलमेट HTML पृष्ठों के लिए <head>...</head> उत्पन्न करता है और Gatsby रेंडरिंग के साथ मिलकर SEO के साथ काम करने का एक शक्तिशाली और सुविधाजनक उपकरण है।

/src/templates/index.js

 import React from "react"; import { graphql } from "gatsby"; import { Helmet } from "react-helmet"; import Layout from "../components/layout"; export default ({ data: { allContentfulArticle: { edges: [ { node: { title, content: { childMarkdownRemark: { html } } } } ] } } }) => { return ( <Layout> <Helmet> <meta charSet="utf-8" /> <title>{title}</title> </Helmet> <div dangerouslySetInnerHTML={{ __html: html }} /> </Layout> ); }; export const query = graphql` query($slug: String!) { allContentfulArticle(filter: { link: { eq: $slug } }) { edges { node { title link content { childMarkdownRemark { html } } } } } } `; 

अब साइट का शीर्षक हमेशा लेख के शीर्षक से मेल खाएगा, जो इस मुद्दे पर विशेष रूप से खोज परिणामों में साइट के जारी होने को महत्वपूर्ण रूप से प्रभावित करेगा। यहां आप आसानी से प्रत्येक लेख के विवरण के साथ <meta name="description" content=" "> जोड़ सकते हैं, जिससे उपयोगकर्ता यह समझने में सक्षम हो सकता है कि खोज पृष्ठ पर लेख क्या है, सामान्य तौर पर, सभी एसईओ सुविधाएँ अब उपलब्ध हैं और प्रबंधनीय हैं एक जगह।

PWA सेटअप

Gatsby को प्रथम श्रेणी के प्रदर्शन को बॉक्स से बाहर करने के लिए डिज़ाइन किया गया है। यह कोड पृथक्करण और न्यूनता की समस्याओं के साथ-साथ पृष्ठभूमि में पूर्व-लोडिंग, छवि प्रसंस्करण आदि के रूप में अनुकूलन का ध्यान रखता है, जिससे आपके द्वारा बनाई गई साइट में बिना किसी मैन्युअल कॉन्फ़िगरेशन के उच्च प्रदर्शन होता है। ये प्रदर्शन सुविधाएँ एक प्रगतिशील वेब अनुप्रयोग दृष्टिकोण का समर्थन करने का एक महत्वपूर्ण हिस्सा हैं।

लेकिन उपरोक्त सभी के अलावा, एक साइट के लिए तीन बुनियादी मानदंड हैं जो इसे PWA के रूप में परिभाषित करते हैं:

• https प्रोटोकॉल
• उपस्थिति की उपस्थिति। json
• सेवाकर्मियों के कारण साइट पर ऑफ़लाइन पहुँच

पहले बिंदु को Gatsby द्वारा हल नहीं किया जा सकता है, क्योंकि डोमेन , होस्टिंग और प्रोटोकॉल परिनियोजन समस्याएँ हैं, और बिल्कुल भी विकास नहीं है, लेकिन मैं Netlify की सिफारिश कर सकता हूं , जो डिफ़ॉल्ट रूप से https समस्या को हल करता है।

हम शेष मदों पर आगे बढ़ते हैं, इसके लिए हम दो प्लगइन्स इंस्टॉल करेंगे:

 yarn add gatsby-plugin-manifest gatsby-plugin-offline 

और उन्हें /src/gatsby-config.js से कॉन्फ़िगर करें

 if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { plugins: [ { resolve: `gatsby-plugin-manifest`, options: { name: `GatsbyJS translated tutorial`, short_name: `GatsbyJS tutorial`, start_url: `/`, background_color: `#f7f0eb`, theme_color: `#a2466c`, display: `standalone`, icon: `public/favicon.ico`, include_favicon: true } }, `gatsby-plugin-offline`, `gatsby-transformer-remark`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography` } }, { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN } }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components`, `gatsby-plugin-react-helmet` ] }; , if (process.env.NODE_ENV === "development") { require("dotenv").config(); } module.exports = { plugins: [ { resolve: `gatsby-plugin-manifest`, options: { name: `GatsbyJS translated tutorial`, short_name: `GatsbyJS tutorial`, start_url: `/`, background_color: `#f7f0eb`, theme_color: `#a2466c`, display: `standalone`, icon: `public/favicon.ico`, include_favicon: true } }, `gatsby-plugin-offline`, `gatsby-transformer-remark`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images/` } }, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography` } }, { resolve: `gatsby-source-contentful`, options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN } }, `gatsby-plugin-sass`, `gatsby-plugin-styled-components`, `gatsby-plugin-react-helmet` ] }; 

आप दस्तावेज़ीकरण का उपयोग करके अपनी उपस्थिति को अनुकूलित कर सकते हैं, साथ ही प्लगइन सेटिंग्स को ओवरराइट करके सेवा-कार्यकर्ता रणनीति को अनुकूलित कर सकते हैं ।

आप विकास मोड में कोई बदलाव नहीं देखेंगे, लेकिन साइट पहले से ही वेब दुनिया की नवीनतम आवश्यकताओं को पूरा करती है, और जब इसे https: // डोमेन पर होस्ट किया जाता है तो यह बराबर नहीं होगा।

निष्कर्ष

कुछ साल पहले, जब मैंने पहली बार इंटरनेट पर रिएक्ट एप्लिकेशन को लाने में समस्याओं का सामना किया था, तो इसका समर्थन करना और सामग्री को अपडेट करना, मैं कल्पना नहीं कर सकता था कि बाजार पर पहले से ही एक जेएएम-स्टैक दृष्टिकोण था जो इन सभी प्रक्रियाओं को सरल करता है, और अब मुझे इस पर आश्चर्य नहीं होगा। सादगी। गैट्सबी ज्यादातर मुद्दों को हल करता है जो साइट के प्रदर्शन को "बॉक्स से बाहर" को प्रभावित करते हैं, और यदि आप इसे अपनी आवश्यकताओं को अनुकूलित करने की पेचीदगियों के बारे में थोड़ा और अधिक समझते हैं, तो आप लाइटहाउस में सभी वस्तुओं के लिए 100% संकेतक प्राप्त कर सकते हैं, जो खोज इंजन में साइट की डिलीवरी को महत्वपूर्ण रूप से प्रभावित करते हैं (द्वारा) कम से कम Google पर)।

परियोजना के साथ भंडार