معرفی

در ایجاد یک وب سایت یا برنامه ، اغلب یکی از سخت ترین کارها این است که داده ها را از منابع متعدد جمع آوری کرده و آنها را در یک خروجی یکنواخت جمع آوری کنید. یک راه رایج برای حل این مشکل استفاده از سیستم های ساخت کاملاً متفاوت برای قسمت های مختلف یک سایت است ، اما این امر گاهی پیچیدگی را افزایش می دهد در حالی که دستیابی به یکنواختی را دشوارتر می کند. اینجاست که Gatsby ، یک تولید کننده سایت استاتیک مبتنی بر داده (SSG) می تواند راه حلی ارائه دهد.

یکی از اهداف اصلی Gatsby حل این مشکل برای توسعه دهندگان است و افزونه های منبع اصلی ترین راه برای این کار هستند. افزونه منبع مجموعه ای از کد است که داده ها را از یک منبع معین وارد اکوسیستم Gatsby می کند. منابع می توانند از سیستم فایل محلی مانند فایلهای Markdown ، پایگاه های داده ، فیدهای داده منتشر شده یا حتی منابع داده از راه دور کاملاً پویا مانند API ها باشند.

در این آموزش ، شما پلاگین منبع سفارشی خود را ایجاد می کنید تا داده های جدید را از یک API دنیای واقعی به Gatsby وارد کنید. همچنین داده ها را فرمت می کنید تا در سراسر Gatsby به آنها دسترسی داشته باشید و در پایان آموزش ، یک پروژه کاری داشته باشید که HTML ایستا را از منبع داده پویای جدید شما ایجاد می کند.

پیش نیازها

قبل از شروع کار ، چند مورد را که لازم دارید در اینجا آورده ایم:

• نصب محلی Node.js برای اجرای Gatsby و ایجاد سایت شما. روش نصب بر اساس سیستم عامل متفاوت است ، اما vpsgol دارای راهنمای Ubuntu 20.04 و macOS است و همیشه می توانید آخرین نسخه را در صفحه بارگیری رسمی Node.js پیدا کنید.
• آشنایی با جاوا اسکریپت برای کار در Gatsby. زبان جاوا اسکریپت یک مبحث گسترده است ، اما نقطه شروع خوب ما نحوه کدگذاری در سری جاوا اسکریپت است.
• آشنایی با API های وب ، Node.js و JSON.
• یک پروژه جدید Gatsby، داربست از gatsby-starter-default. برای برآوردن این نیاز و ایجاد پروژه جدید Gatsbyاز ابتدا ، می توانید به مرحله 1 آموزش نحوه راه اندازی اولین وب سایت Gatsby مراجعه کنید.
• اگر می خواهید رابط کاربری (UI) پست های خود را فراتر از آنچه در این آموزش آمده است سفارشی کنید ، با React و JSX و همچنین عناصر HTML آشنا باشید.

این آموزش روی Node.js v14.16.1 ، npm v6.14.12 ، Gatsby v3.13.0 و node-fetch v2.6.2 آزمایش شده است.

مرحله 1 – فایل های داربست و نصب وابستگی ها

هنگام ساختن چیزی ، اولین قدم این است که ابزارها و قطعات خود را مرتب کنید. در این مرحله ، با ایجاد ساختار فایل لازم و نصب وابستگی هایی که کد شما بر آن تکیه می کند ، بلوک های اولیه افزونه منبع خود را در محل قرار می دهید.

از آنجا که این یک افزونه محلی خواهد بود ، یک دایرکتوری در پروژه Gatsby خود ایجاد کنید تا کد منبع افزونه را در زیر پوشه افزونه های سطح ریشه نگه دارید. می توانید این کار را با ایجاد پوشه به صورت دستی در مرورگر فایل خود یا از خط فرمان در ریشه پروژه با دستور mkdir انجام دهید:

mkdir -p plugins/my-custom-source-plugin

در مرحله بعد ، باید یک فایل package.json ایجاد کنید تا این دایرکتوری را به عنوان بسته Node.js با وابستگی های خاص خود علامت گذاری کنید. برای ایجاد این فایل و پیش پر کردن برخی از فیلدهای مورد نیاز ، از دستور زیر استفاده کنید:

cd plugins/my-custom-source-plugin
npm init -y

این دستور به پوشه افزونه تازه ایجاد شده شما منتقل می شود و سپس از npm init برای راه اندازی مجدد یک بسته جدید استفاده می کند. پرچم -y برخی از سوالات بی ربط به این پروژه را رد می کند و فایل package.json را با حداقل مقادیر مورد نیاز پر می کند.

اکنون که package.json وجود دارد ، می توانید وابستگی هایی را به افزونه خود اضافه کنید که کدگذاری عملکرد را آسان تر می کند. پیش بروید و تنها وابستگی اضافی مورد نیاز خود را در این آموزش ، node-fetch ، با استفاده از دستور زیر نصب کنید:

npm install node-fetch@^2

در نهایت ، فایل gatsby-node.js را ایجاد کنید که در نهایت کد اصلی افزونه منبع را در اختیار داشته باشد:

touch gatsby-node.js

اکنون که ساختار فایل را برای پشتیبانی از افزونه خود ایجاد کرده اید و وابستگی های اولیه را نصب کرده اید ، به دستورالعمل هایی برای یافتن و بارگیری افزونه خود به gatsby ادامه می دهید.

مرحله 2 – بارگیری و پیکربندی افزونه

مانند هر افزونه یا تم Gatsby ، Gatsby باید در مورد نحوه بارگیری افزونه از کجا آموزش داده شود. برای انجام این کار ، فایل پیکربندی اصلی Gatsby را ویرایش می کنید gatsby-config.js ، که در ریشه پروژه Gatsby شما قرار دارد. فایل را در ویرایشگر دلخواه خود باز کنید و خط برجسته زیر را اضافه کنید:

module.exports = {
...
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `my-custom-source-plugin`,
    `gatsby-transformer-sharp`,
...

از آنجا که کد منبع افزونه شما در فهرست افزونه ها وجود دارد ، تنها چیزی که برای بارگیری Gatsby لازم است این است که به نام زیر شاخه ای که در آن پوشه یافت می شود ، وارد شود. افزونه شما نیز در حال حاضر هیچ گزینه ای را انتخاب نمی کند ، بنابراین نیازی به ارسال شیء گزینه به آن در بلوک پیکربندی Gatsby نیست.

gatsby-config.js را ذخیره کرده و از فایل خارج شوید.

اکنون Gatsby را طوری پیکربندی کرده اید که افزونه منبع سفارشی شما را بارگذاری کند و همچنین به آن دقیقاً گفته اید که کجا باید کد منبع را پیدا کند. در مرحله بعد ، این کد منبع را برای کشیدن داده ها در زمان اجرا Node.js از منبع راه دور سفارشی خود ایجاد می کنید.

مرحله 3 – کشیدن داده های خام به Node.js

در مرحله قبل ، شما Gatsbyرا برای بارگیری و اجرای کد افزونه منبع سفارشی خود پیکربندی کرده اید ، اما برای انجام وظیفه وارد کردن داده های جدید به اکوسیستم Gatsby، هنوز باید این کد را ایجاد کنید. در این مرحله ، کدی را که این کار را انجام می دهد ، می نویسید ، داده های از راه دور را از طریق node-fetch واکشی کرده و برای استفاده در مراحل بعدی آماده می کنید.

افزونه های منبع می توانند تقریباً از هر جایی ، محلی یا از راه دور ، داده ها را جمع آوری کنند ، اما در این آموزش افزونه منبع شما به طور خاص عناوین و گزیده ای از دسته کتاب های برنامه نویسی رایانه ای در ویکی پدیا را از طریق API عمومی خود می کشد.

فایل my-custom-source-plugin/gatsby-node.js خود را در فهرست افزونه ها باز کرده و کد زیر را اضافه کنید:

const fetch = require('node-fetch').default

/**
 * Fetch a list of computer books from Wikipedia, with excerpts
 */
async function getWikiProgrammingBooks() {
  const BASE_ENDPOINT = "https://en.wikipedia.org/w/api.php?action=query&format=json&utf8=1&redirects=1";

  // Get list of books
  const listEndpoint = new URL(BASE_ENDPOINT);
  listEndpoint.searchParams.append('list', 'categorymembers');
  listEndpoint.searchParams.append("cmtitle", "Category:Computer_programming_books");
  listEndpoint.searchParams.append("cmlimit", "10");
  const listResults = await (await fetch(listEndpoint.toString())).json();


  // Extract out the page IDs from the list
  const pageIds = listResults.query.categorymembers.map((listing) => listing.pageid);

  // Fetch details for page IDs
  const extractEndpoint = new URL(BASE_ENDPOINT);
  extractEndpoint.searchParams.append("pageids", pageIds.join("|"));
  extractEndpoint.searchParams.append("prop", "extracts|info");
  extractEndpoint.searchParams.append("exintro", "");
  extractEndpoint.searchParams.append("explaintext", "");
  extractEndpoint.searchParams.append("inprop", "url");

  const bookResult = await (await fetch(extractEndpoint.toString())).json();

  return Object.values(bookResult.query.pages);
}

در این کد ، شما یک تابع قابل استفاده مجدد ایجاد کرده اید که می تواند برای بازگرداندن لیستی از کتابهای برنامه نویسی کامپیوتر ، به همراه شناسه های صفحه آنها (یک شناسه منحصر به فرد در ویکی پدیا) و گزیده ها/عصاره ها فراخوانی شود. در قسمت اول تابع ، URL API مناسب را ایجاد می کنید تا بتوانید لیست اولیه عناوین و شناسه های مربوط به یک دسته خاص (کتابهای برنامه نویسی کامپیوتر) را برای استفاده از آن استفاده کنید. از سازنده URL و رابط برای خواندن و مدیریت تغییرات پرس و جو استفاده می شود.

شما از روش واکشی از node-fetch برای درخواست GET به URL ساخته شده استفاده می کنید ، که لیستی از عناوین کتاب با شناسه های آنها را برمی گرداند. سپس این پاسخ به آرایه ای از مقادیر pageid تبدیل می شود ، سپس برای پرس و جو مجدد API ویکی پدیا استفاده می شود ، این بار درخواست استخراج و اطلاعات متای تولید شده برای شناسه صفحه داده شده. شناسه های صفحه با کاراکتر پیپ (|) به هم متصل می شوند ، زیرا API ویکی پدیا از این قالب برای پذیرش چندین شناسه از طریق یک مقدار رشته استفاده می کند.

سرانجام ، از آنجا که نتایج گزیده های صفحه به عنوان یک شیء باز می گردند و هر کتابی در شناسه خود به عنوان کلید درج شده است ، از Object.values ​​() برای حذف کلید شناسه صفحه و تبدیل نتایج به یک آرایه قبل از بازگشت آنها استفاده می کنید.

اگر خروجی این تابع را وارد کنید ، چیزی شبیه به این خواهد بود:

[
  {
    "pageid": 379671,
    "ns": 0,
    "title": "The C Programming Language",
    "extract": "The C Programming Language (sometimes termed K&R, after its authors' initials) is a computer programming book written by Brian Kernighan and Dennis Ritchie...",
    "fullurl": "https://en.wikipedia.org/wiki/The_C_Programming_Language",
    ...
  },
  ...
]

مطمئن شوید که تغییرات خود را ذخیره می کنید ، اما این فایل را باز نگه دارید زیرا در مرحله بعد کد بیشتری به آن اضافه می کنید.

در این مرحله از node-fetch برای بازیابی محتوای منبع از راه دور و نمایش آن در فایل gatsby-node.js استفاده کردید. در مرحله بعد ، محتوا را عادی می کنید زیرا از آن برای ایجاد گره های جدید Gatsby برای استفاده در کل پروژه Gatsby استفاده می کنید.

مرحله 4 – عادی سازی داده ها و ایجاد گره ها

واکشی محتوای از راه دور و آوردن آن در gatsby-node.js در مرحله قبل به این معنی نیست که اکنون در سراسر Gatsbyقابل دسترسی است. به منظور به اشتراک گذاری داده ها به صورت جهانی ، Gatsby از مفهوم گره ها استفاده می کند ، که در یک لایه داده GraphQL یکپارچه به اشتراک گذاشته می شوند. در این مرحله ، شما این گره ها را ایجاد می کنید و محتوای جدید خود را برای مطابقت قالب بندی می کنید.

اگرچه اکنون می توانید با فراخوانی getWikiProgrammingBooks () نتایج ویکی پدیا را بازیابی کرده و به آنها دسترسی پیدا کنید ، اما برای ادغام این کد با سیستم گره Gatsby، هنوز باید کد را اضافه کنید. در همان فایل gatsby-node.js مرحله قبل ، این بلوک جدید کد را برای مدیریت تولید گره ها اضافه کنید:

const fetch = require('node-fetch').default

...

exports.sourceNodes = async ({ actions, createContentDigest, createNodeId }) => {
  // Arbitrary node type constant
  const BOOK_TYPE = 'BookWikiPage';

  // Get books
  const bookResults = await getWikiProgrammingBooks();

  // Convert raw book results to nodes
  for (const book of bookResults) {
    actions.createNode({
      ...book,
      id: createNodeId(`${BOOK_TYPE}-${book.pageid}`),
      parent: null,
      children: [],
      internal: {
        type: BOOK_TYPE,
        contentDigest: createContentDigest(book)
      }
    })
  }
};

در این بلوک کد ، شما در حال تکرار هر کتابی هستید که توسط getWikiProgrammingBooks بازگردانده می شود و یک گره Gatsbyبرای آن از طریق روش createNode ایجاد می کنید. هر ویژگی و مقداری که به createNode منتقل می شود دارای اهمیت است و ارزش توجه دارد:

• … کتاب برای گسترش جفت های کلید-مقدار از شی API ویکی پدیا در گره Gatsby که ایجاد می کنید استفاده می شود. این بدان معناست که بعداً می توانید به node.title دسترسی پیدا کنید ، زیرا از book.title کپی می شود.
• شناسه یک ارزش جهانی منحصر به فرد در داخل Gatsby است. برای اینکه شناسه هر کتاب را در افزونه خود منحصر به فرد کنید ، باید نوع کتاب را با شناسه صفحه ویکی پدیا ترکیب کرده و یک رشته شناسه تشکیل دهید. با این حال ، از آنجا که نمی توانید مطمئن شوید سایر افزونه ها از چه شناسه هایی استفاده می کنند ، از بهترین روش ارسال شناسه خود برای ایجادNodeId استفاده کرده اید ، که یک تابع کمکی Gatsby است و تضمین می کند که شناسه به چیزی در سطح جهانی تبدیل شده است.
• والد فیلدی است که می توان از آن برای اتصال گره شما به دیگری از طریق شناسه استفاده کرد و این گره را در کودکی علامت گذاری کرد. از آنجا که هر کتاب موجودیت خاص خود است و به گره های دیگر متصل نیست ، این را به عنوان خالی گذاشته اید ، به این معنی که والد ندارد.
• کودکان به عنوان راهی برای پیوند گره ها شبیه به والدین هستند ، اما آرایه ای از شناسه ها را می گیرد. از آنجا که هر کتاب فرزندی ندارد ، آرایه را خالی گذاشته اید.
• داخلی شیئی است که زمینه های بسیار ویژه سیستم مدیریت گره داخلی Gatsby و سایر افزونه ها را با هم گروه بندی می کند. این فقط می تواند شامل فیلدهای رسمی باشد ، به همین دلیل است که شما شیء کتاب را در آن پخش نکرده اید.
• type یک رشته منحصر به فرد در سطح جهان است که نوع گره ای را که ایجاد می کنید توصیف می کند و بعداً هنگام درخواست گره ها از طریق GraphQL مورد استفاده قرار می گیرد.
• contentDigest یک رشته هش است که از محتویات گره و ابزار کمکی Gatsby createContentDigest ساخته شده است. این فیلد به Gatsby کمک می کند تا تشخیص دهد که یک گره چه زمانی تغییر کرده است ، زیرا در صورت اصلاح هرگونه ویژگی شیء کتاب ، رشته هش تغییر می کند.

شما به تازگی کدی را اضافه کرده اید که محتوای منبع شما را می گیرد و با آن گره های جدید Gatsby ایجاد می کند و آنها را در محیط Gatsby به اشتراک می گذارد. در مرحله بعد ، شما تأیید می کنید که این گره ها در لایه داده GraphQL ظاهر می شوند و می توان آنها را پرس و جو کرد.

مرحله 5 – (اختیاری) بازرسی خروجی گره با API GraphQL

در حال حاضر ، شما محتوای منبع خود را به داخل Gatsby کشانده اید و از آن برای ایجاد گره های جدید استفاده کرده اید. به عنوان جایگزینی برای اشکال زدایی دستی با نقاط شکست یا دستورات ورود به سیستم ، در این مرحله از GraphQL IDE تعاملی برای تأیید اینکه این گره های جدید در حال ایجاد شدن هستند و می توانند با API GraphQL پرس و جو شوند ، استفاده خواهید کرد.

پیش بروید و با اجرای این دستور از ریشه پروژه Gatsby خود ، سرور توسعه محلی خود را راه اندازی کنید:

npm run develop

علاوه بر راه اندازی نسخه زنده سایت Gatsby ، فرمان develop همچنین سرور GraphQL و IDE محلی را نیز نشان می دهد. برای تأیید اینکه کد شما در gatsby-node.js تمام گره های کتاب را ایجاد می کند ، از این پرس و جو GraphQL برای دریافت عناوین کتاب ، شناسه های صفحه و شناسه های Gatsby استفاده خواهید کرد:

{
  allBookWikiPage {
    edges {
      node {
        title
        pageid
        id
      }
    }
  }
}

برای اجرای این پرس و جو ، یا GraphQL IDE تعاملی را در localhost باز کنید: 8000/___ graphql و قبل از اجرا پرس و جو را در سمت چپ قرار دهید یا از طریق cURL آن را پرس و جو کنید.

curl –location –request POST ‘http://localhost:8000/___graphql’ \
–header ‘Content-Type: application/json’ \
–data-raw ‘{
“query”: “{ allBookWikiPage { edges { node { title pageid id } } } }”
}’

پاسخ JSON چیزی شبیه به این خواهد بود:

{
  "data": {
    "allBookWikiPage": {
      "edges": [
        {
          "node": {
            "title": "The C Programming Language",
            "pageid": 379671,
            "id": "818771ca-40aa-5cfd-b9e7-fddff093d5ec"
          }
        },
        ...
      ]
    }
  },
  "extensions": {}
}

پس از تأیید اینکه گره های منبع سفارشی جدید شما ایجاد شده اند و در لایه داده GraphQL قابل دسترسی هستند ، مرحله بعدی استفاده از آنها برای ایجاد محتوای قابل مشاهده برای بازدیدکنندگان سایت یا برنامه شما است.

مرحله 6 – (اختیاری) ایجاد صفحات بر اساس گره ها

تا کنون ، تمام مراحل قبلی بر ایجاد گره های داخلی Gatsby متمرکز شده است ، از جمله آخرین مرحله تأیید ایجاد و توانایی بازیابی آنها. با این حال ، این گره ها فقط برای کد در حال اجرا در پروژه Gatsby شما قابل مشاهده هستند ، نه برای بازدیدکنندگان از سایت یا برنامه شما. در این مرحله ، شما یک فایل قالب صفحه React اضافه کرده و آن را به گره های خود وصل می کنید تا محتوای افزونه منبع شما به صفحات وب واقعی واقعی تبدیل شود.

روش های مختلفی برای ایجاد صفحات بر اساس گره های Gatsby وجود دارد ، اما برای این آموزش شما از API File System Route استفاده خواهید کرد ، که صفحات را بر اساس نحو نام فایل خاص ایجاد می کند.

ابتدا یک فایل خالی در src/pages با نام فایل {BookWikiPage.title} .js ایجاد کنید. مهاربندهای پیچ دار به Gatsby می گویند که نام فایل از API مسیر سیستم استفاده می کند و در داخل براکت ها ، BookWikiPage.title به Gatsby می گوید که برای هر عنوان کتاب منحصر به فرد صفحه ای ایجاد کند. توجه داشته باشید که دیگر روی فایلهای موجود در فهرست افزونه ها کار نمی کنید ، اما اکنون در داخل پروژه اصلی Gatsby کار می کنید.

در مرحله بعد ، کدی را به آن فایل اضافه کنید که گره کتاب را گرفته و آن را به عنوان یک صفحه وب نمایش می دهد:

import { graphql } from "gatsby";
import * as React from "react";
import Layout from "../components/layout";
import Seo from "../components/seo";

export default function BookPageTemplate({ data: { bookWikiPage } }) {
  const { title, extract, fullurl } = bookWikiPage;
  return (
    <Layout>
      <Seo title={title} />
      <h1>{title}</h1>
      <blockquote>{extract}</blockquote>

      <i>This article uses material from the Wikipedia article <a href={fullurl} target="_blank" rel="noreferrer">"{title}"</a>, which is released under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</a>.</i>
    </Layout>
  );
}

export const pageQuery = graphql`
  query ($id: String!) {
    bookWikiPage(id: { eq: $id }) {
      title
      extract
      fullurl
    }
  }
`;

در انتهای کد شما یک متغیر صادر شده به نام pageQuery وجود دارد که از تگ Gatsby GraphQL استفاده می کند. Gatsby پرس و جو GraphQL را که از آن استفاده می کند ، ارزیابی کرده و نتایج را به تابع BookPageTemplate منتقل می کند.

تابع BookPageTemplate ، که جزء React است ، سپس نتایج پرس و جو GraphQL را گرفته و با جاسازی مقادیر در JSX که برمی گرداند ، آنها را به عنوان بخشی از یک صفحه وب نمایش می دهد. عنوان کتاب به عنوان عنوان اصلی و عنوان صفحه استفاده می شود ، عصاره به عنوان نقل قول بلوک نمایش داده می شود و پیوندی به صفحه ورود کامل ویکی پدیا در پایین تعبیه شده است.

شما همچنین با استفاده از پیش فرض صادرات قبل از اعلان ، عملکرد BookPageTemplate را به عنوان صادرات پیش فرض علامت گذاری می کنید ، زیرا Gatsby انتظار دارد که جزء React مسئول تولید صفحه رندر شده نهایی را به عنوان صادرات پیش فرض هر فایل قالب صفحه بیابد.

پس از افزودن کد قالب React به فایل ، تغییرات را ذخیره کرده و ببندید. به http: // localhost: 8000/the-c-programming-language بروید تا یک صفحه نمونه را ارائه دهید:

برای نمایش فهرستی از این گره های جدید و صفحات مرتبط با آنها ، همچنین یک صفحه فهرست اختصاصی ایجاد می کنید که همه کتابها را در یک مکان نمایش می دهد. در قسمت src/pages یک فایل جدید با نام فایل books.js ایجاد کنید. بعد ، کد زیر را به آن اضافه کنید:

import { graphql, Link } from "gatsby";
import * as React from "react";
import Layout from "../components/layout";
import Seo from "../components/seo";

export default function BookListingsPageTemplate({ data: { allBookWikiPage } }) {
  return (
    <Layout>
      <Seo title="Programming Books Listing" />
      <p>Here are some computer programming books that have their own Wikipedia entries:</p>

      {allBookWikiPage.edges.map((edge) => {
        const node = edge.node;
        return (
          <details key={node.title}>
            <summary>{node.title}</summary>

            <div className="details-body">
              <p>{node.extract}</p>
              <div className="links">
                <Link href={node.gatsbyPath}>Internal Page</Link>
                <a rel="noreferrer" href={node.fullurl}>Wikipedia Page</a>
              </div>
            </div>
          </details>
        )
      })}
    </Layout>
  );
}

export const pageQuery = graphql`
  query {
    allBookWikiPage {
      edges {
        node {
          title
          extract
          gatsbyPath(filePath: "/{BookWikiPage.title}")
          fullurl
        }
      }
    }
  }
`;

شبیه به الگوی صفحه {BookWikiPage.title} .js ، این فایل همچنین از برچسب GraphQL pageQuery برای برداشتن داده ها از لایه GraphQL و ارسال آن به یک جزء React استفاده می کند. با این حال ، در حالی که الگوی قبلی یک کتاب را بر اساس شناسه ارائه می داد ، این الگو فهرستی از همه کتابها را ارائه می دهد ، در حالی که به صفحات کتاب جداگانه پیوند داده شده است.

هر فهرست کتاب از یک عنصر <details> استفاده می کند ، که این لیست را قادر می سازد تا قسمت کامل کتاب و پیوندها را نشان دهد یا برای نشان دادن عنوان فقط جمع شود. با پیروی از بهترین روش ها ، شما همچنین یک مقدار منحصر به فرد را به کلید در حین تکرار در آرایه منتقل می کنید ، با استفاده از مولفه Gatsby Link برای پیوندهای داخلی و یک برچسب برای پیوندهای خارجی.

رشته gatsbyPath (filePath: “/{BookWikiPage.title}”) در پرس و جو GraphQL از تابع () gatsbyPath ویژه برای بازیابی مسیر عمومی ایجاد شده بر اساس نام فایل API مسیر فایل سیستم استفاده می کند.

این فایل را ذخیره کرده و از آن خارج شوید.

با وجود تمام کتابهای موجود در یک صفحه ، حتی با بخشهای جمع شونده همه چیز کمی شلوغ شده است ، بنابراین آخرین مرحله این است که برخی از ظاهر را اضافه کنید تا خوانندگان بتوانند فهرست را آسانتر کنند. یک فایل شیوه نامه جدید در src/styles/books.css ایجاد کنید. می توانید این کار را در مرورگر فایل خود یا با خط فرمان از ریشه پروژه Gatsby انجام دهید:

mkdir -p ./src/styles
touch ./src/styles/books.css

سپس CSS زیر را به فایل اضافه کنید:

details {
  border: 1px dotted black;
  margin: 6px;
  padding: 6px;
}

.details-body {
  background-color: #eedeff;
  margin: 4px 0px 2px 12px;
  padding: 4px;
  border-radius: 4px;
}

.links {
  display: flex;
  justify-content: space-evenly;
}

این CSS در اطراف هر فهرست کتاب ، فاصله و حاشیه های موجود در فهرست و فاصله بین پیوندهای داخلی و خارجی کتاب را اضافه می کند. پس از افزودن CSS به فایل ، قبل از ادامه آن را ذخیره و ببندید.

در نهایت ، الگوی صفحه فهرست کتاب را به روز کنید تا این فایل CSS را در آن بکشید:

import { graphql, Link } from "gatsby";
import * as React from "react";
import Layout from "../components/layout";
import Seo from "../components/seo";
import "../styles/books.css";

این فایل را با خط وارد کردن CSS که به تازگی اضافه شده است ذخیره و ببندید.

برای مشاهده نتایج ، دوباره فرمان develop را اجرا کنید تا سرور توسعه ظاهر شود و صفحات جدید را پیش نمایش کنید:

npm run develop

اکنون می توانید به صفحه فهرست کتابهای خود در localhost دسترسی داشته باشید: 8000/books/.

شما اکنون نه تنها یک افزونه منبع Gatsby را از ابتدا ایجاد کرده اید ، بلکه از آن برای تولید صفحات بر اساس یک قالب React نیز استفاده کرده اید.

نتیجه

با دنبال کردن مراحل این آموزش ، شما اکنون ساخت افزونه منبع سفارشی را که محتوای خارجی را در پروژه Gatsby شما وارد می کند ، به پایان رسانده و از آن برای تأمین صفحات جدید در سایت خود استفاده کرده اید.

منبع افزونه ها عمق زیادی دارد. اگر علاقه مند به پیروی از بهترین شیوه ها و یادگیری مفاهیم افزونه منبع پیشرفته تر هستید ، در اینجا مواردی وجود دارد که ممکن است برای شما جالب باشد:

• اگر می خواهید افزونه خود را با جهان به اشتراک بگذارید ، می توانید این کار را با انتشار آن در npm انجام دهید. می توانید این راهنمای انتشار بسته های npm را دنبال کنید و برای ارسال به کتابخانه افزونه Gatsby ، آن را با این گردش کار دنبال کنید.
• برای افزونه های منبع که کارهای زیادی را با ورودی هایی انجام می دهند که برای مدت زمان یکسانی باقی می مانند ، می توانید از مزایای مکانیزم کش Gatsby بین ساخت ها استفاده کنید.
• اگر گره های شما به یکدیگر مرتبط هستند یا به گره هایی که توسط افزونه های دیگر ایجاد شده اند ، می توانید آنها را از طریق روابط به هم پیوند دهید. این به طور خلاصه در این آموزش توضیح داده شده است ، اما می توانید جزئیات بیشتری را در اسناد Gatsby بیابید.
• افزونه ترانسفورماتور افزونه ای است که فقط گره های یک نوع را گرفته و آنها را به گره های جدید یا اصلاح شده تبدیل می کند. در اسناد افزونه ترانسفورماتور Gatsby می توانید اطلاعات بیشتری در مورد آنها بخوانید.

https://vpsgol.net/product/vps-germany/

https://vpsgol.net/product/vps-usa/

https://vpsgol.net/product/vps-france/

https://vpsgol.net/product/vps-canada/

https://vpsgol.net/product/vps-poland/

https://vpsgol.net/product/vps-netherlands/

https://vpsgol.net/product/vps-england/