প্রায় 10 মিনিটে কীভাবে একটি প্রতিক্রিয়া এবং গ্যাটসবি চালিত ব্লগ তৈরি করবেন

বাডিস / ফটো আনপ্লেশ-এ জেনেভিউ পেরের-ম্যাগেরন
দাবি অস্বীকার: এটি গ্যাটসবি সংস্করণ 1 এর জন্য লেখা হয়েছিল, সংস্করণ 2 সবেমাত্র প্রকাশিত হয়েছে এবং কিছু পরিবর্তন হয়েছে। আমি তার জন্য অন্য টিউটোরিয়ালে কাজ করছি।

গ্যাটসবি হ'ল একটি বিদ্যুত দ্রুত স্ট্যাটিক সাইট জেনারেটর যা রিঅ্যাকটিজেএস-এর উপর ভিত্তি করে।

একটি স্ট্যাটিক সাইট জেনারেটর (এসএসজি) একটি হার্ডকোডযুক্ত স্ট্যাটিক এইচটিএমএল সাইট এবং ওয়ার্ডপ্রেসের মতো একটি পূর্ণ সিএমএস (কন্টেন্ট ম্যানেজমেন্ট সিস্টেম) এর মধ্যে একটি সমঝোতা।

একটি এসএসজি কনটেন্ট-চালিত ওয়েবসাইটগুলির (যেমন ব্লগ) জন্য এইচটিএমএল পৃষ্ঠাগুলি তৈরি করতে ব্যবহার করা যেতে পারে। পৃষ্ঠার সামগ্রীর ডেটা এবং সামগ্রী পূরণ করার জন্য টেমপ্লেট যা যা প্রয়োজন তা হ'ল।

এই পোস্টটি পাঁচটি বিভাগে বিভক্ত:

  1. প্রস্তুত হও.
  2. বিন্যাস উপাদান তৈরি করুন।
  3. ব্লগ পোস্ট তৈরি করুন।
  4. ব্লগ পোস্ট ডেটা থেকে নতুন পৃষ্ঠা তৈরি করুন Gene
  5. অবতরণ পৃষ্ঠায় আমাদের ওয়েবসাইটের মার্কডাউন ফাইলগুলির একটি তালিকা তৈরি করুন।

আমরা কোডস্ট্যাক নামে একটি কাল্পনিক স্ট্যাটিক ব্লগ তৈরি করে গ্যাটসবি এবং এর কয়েকটি বৈশিষ্ট্যগুলির গভীর গভীরতম দিকে যাচ্ছি। মডেলটি নীচে দেখানো হয়েছে। চলো যাই! ️

একটি ব্লগ তালিকা পৃষ্ঠা / একটি একক ব্লগ পোস্ট

1. প্রথম পদক্ষেপ

প্রয়োজনীয়তা

প্রথমে নিশ্চিত হয়ে নিন যে আপনার সিস্টেমে নোড.জেএস ইনস্টল করা আছে। যদি তা না হয় তবে nodejs.org এ যান এবং আপনার অপারেটিং সিস্টেমের জন্য সর্বশেষতম সংস্করণ ইনস্টল করুন।

এই নিবন্ধটি ধরেও নিয়েছে যে আপনি রিএ্যাকটিজেএসের সাথে পরিচিত।

সিএলআই ইনস্টল করুন

গ্যাটসবির একটি কমান্ড লাইন সরঞ্জাম রয়েছে যা সহায়ক কমান্ডগুলি সরবরাহ করে যেমন:

  • gatsby new: একটি নতুন গ্যাটসবি প্রকল্প ভাসমান জন্য।
  • gatsby বিকাশ: একটি হট-লোড সক্ষম ওয়েব ডেভলপমেন্ট সার্ভার শুরু করতে।
  • গ্যাটসবি বিল্ড: প্রকল্পের একটি উত্পাদন-প্রস্তুত সংস্করণ তৈরি করার জন্য।

ইনস্টল করতে, আপনার টার্মিনাল এ নিম্নলিখিত টাইপ করুন এবং এন্টার টিপুন:

এনপিএম ইনস্টল করুন - গ্লোবাল গ্যাটসবি-ক্লিপ

কোডেস্ট্যাক ব্লগের জন্য একটি প্রকল্প ফোল্ডার তৈরি করুন এবং টার্মিনালটি ব্যবহার করে এটিতে নেভিগেট করুন।

গ্যাটসবি নতুন কোডেস্ট্যাক ব্লগ && সিডি $ _

আপনি যখন প্রকল্প ফোল্ডারে গ্যাটসবি ডেভলপ চালান, সশস্ত্র সাইটটি দেখতে দেখতে এমন হওয়া উচিত:

প্লাগইন যুক্ত করুন

গ্যাটসবিতে একটি বড় এবং ক্রমবর্ধমান সংখ্যক প্লাগইন রয়েছে। এগুলি মূলত নোড.জেএস প্যাকেজ যা গ্যাটসবির এপিআইগুলির সাথে কাজ করে।

এগুলি এনপিএম (নোড প্যাকেজ ম্যানেজার) এর মাধ্যমে টার্মিনালে ইনস্টল করা যেতে পারে এবং সাধারণত তিনটি বিভাগের হয়: ফাংশন, উত্স এবং ট্রান্সফর্মার প্লাগইন।

ফাংশন প্লাগইন

এই প্লাগইনগুলি একটি গ্যাটসবি সাইটে বা এর বিকাশের পরিবেশে অতিরিক্ত কার্যকারিতা সরবরাহ করে। আমাদের অ্যাপ্লিকেশনটির জন্য আমাদের প্রয়োজন:

  • গ্যাটসবি প্লাগইন প্রতিক্রিয়া হেলম: আপনাকে মাথার ট্যাগগুলি পরিবর্তন করতে দেয়। দ্রষ্টব্য যে এটি ইতিমধ্যে আমাদের ভারা প্রকল্পে ইনস্টল করা আছে।
  • gatsby- প্লাগইন-ক্যাচ-লিঙ্কস: মার্কডাউন এবং অন্যান্য প্রতিক্রিয়াহীন পৃষ্ঠা থেকে স্থানীয় লিঙ্কগুলি ধরে এবং পৃষ্ঠাটি রিফ্রেশ করতে ব্রাউজারটি এড়াতে ক্লায়েন্ট-সাইড পুশস্টেট কার্যকর করে exec

প্লাগইনগুলি ইনস্টল করুন বা কেবল দ্বিতীয় প্লাগইন।

এনপিএম গ্যাটসবি-প্লাগইন-রিঅ্যাক্ট-হেলমেট গ্যাটসবি-প্লাগইন-ক্যাচ-লিঙ্কগুলি ইনস্টল করুন

প্রতিবার আমরা যখন একটি নতুন প্লাগইন যুক্ত করি, আমাদের নতুন প্লাগইন সহ gatsby-config.js ফাইলটি আপডেট করতে হবে যাতে গ্যাটসবি এটি সনাক্ত করতে এবং ব্যবহার করতে পারে। আমরা পিছনে টিক্স ব্যবহার করি।

মডিউল.এক্সপোর্টস = {সাইটমেটডাটা: {শিরোনাম: `গ্যাটসবি ডিফল্ট স্টার্টার,}, প্লাগইনস: [ats গ্যাটসবি-প্লাগিন-প্রতিক্রিয়া-হেল্মি,` গ্যাটসবি-প্লাগইন-ক্যাচ-লিঙ্কস,],}

উত্স প্লাগইন

এই প্লাগইনগুলি দূরবর্তী বা স্থানীয় অবস্থান থেকে "উত্স" ডেটা যা গ্যাটসবি নোডকে কল করে। আমাদের স্থানীয় হার্ড ড্রাইভে মার্কডে আমাদের পোস্টগুলি লিখতে আমাদের প্রয়োজন:

  • gatsby- উত্স-ফাইল সিস্টেম: আপনার কম্পিউটারের ফাইল সিস্টেম থেকে ফাইলগুলিতে উত্স ডেটা।
এনপিএম gatsby- উত্স-ফাইল সিস্টেম ইনস্টল করুন

Gatsby-config.js ফাইল আপডেট করুন:

মডিউল.এক্সপোর্টস = {সাইটমেটডাটা: {শিরোনাম: `গ্যাটসবি ডিফল্ট স্টার্টার,}, প্লাগইনস: [` গ্যাটসবি-প্লাগইন-প্রতিক্রিয়া-হেল্মি, `গ্যাটসবি-প্লাগইন-ক্যাচ-লিঙ্কস, {সমাধান:: গ্যাটসবি-উত্স-ফাইল সিস্টেম `, বিকল্পগুলি: {পথ:` $ {__ dirname} / src / পৃষ্ঠাগুলি, নাম: "পৃষ্ঠাগুলি",},}],

এখানে কি হচ্ছে? একটি বিকল্প অবজেক্ট আরও কনফিগারেশনের জন্য একটি প্লাগইনে স্থানান্তরিত হতে পারে। আমরা ফাইল সিস্টেমের পাথ (অর্থাত্ আমাদের মার্কডাউন ফাইলগুলির অবস্থান) এবং তারপরে উত্স ফাইলগুলির একটি নাম পাস করি যাতে গ্যাটসবি আমাদের উত্স ফাইলগুলি সম্পর্কে সচেতন হয় এবং ট্রান্সফর্মার প্লাগইনগুলি কোথায় প্রয়োগ করতে পারে তা জানে।

ট্রান্সফর্মার প্লাগইন

এই প্লাগইনগুলি নোডগুলি থেকে কাঁচা ডেটা ব্যবহারযোগ্য ডেটা ফর্ম্যাটে রূপান্তর করে। উদাহরণস্বরূপ আমাদের প্রয়োজন:

  • গ্যাটসবি ট্রান্সফর্মার দ্রষ্টব্য: এটি স্থানীয় হার্ড ড্রাইভের মার্কডাউন এমডি ফাইলগুলিতে লিখিত ব্লগ পোস্টগুলি রেন্ডারিংয়ের জন্য এইচটিএমএলে রূপান্তর করবে।
এনপিএম গ্যাটসবি-ট্রান্সফরমার-নোট ইনস্টল করুন

Gatsby-config.js ফাইলটি আবার আপডেট করুন।

মডিউল.এক্সপোর্টস = {সাইটমেটাটাটা: {শিরোনাম: `গ্যাটসবি ডিফল্ট স্টার্টার,}, প্লাগইনস: [` গ্যাটসবি-প্লাগইন-প্রতিক্রিয়া-হেল্মি, `গ্যাটসবি-প্লাগইন-ক্যাচ-লিংকস, olve সমাধান:` গ্যাটসবি-উত্স-ফাইল সিস্টেম `, বিকল্পগুলি: {পথ: {$ {__ dirname} / src / পৃষ্ঠাগুলি, নাম:" পৃষ্ঠাগুলি ",},},` গ্যাটসবি ট্রান্সফর্মার মন্তব্য,],,
সাবাশ! / ক্রেডিট: নাইজেল পায়েন

2. লেআউট উপাদান তৈরি করুন

গ্যাটসবি "লেআউট উপাদান" তৈরি করা সহজ করে। লেআউট উপাদানগুলি আপনার ওয়েবসাইটের এমন বিভাগ যা আপনি একাধিক পৃষ্ঠায় ভাগ করতে চান। আমরা যে ব্লগটি তৈরি করছি তার জন্য এগুলি শিরোনাম এবং সাইডবারগুলি।

মূল ফোল্ডারে src / বিন্যাসগুলি একবার দেখুন। আপনি একটি সূচি.জেএস ফাইল আবিষ্কার করতে পারবেন যাতে আমরা বিন্যাসের উপাদানগুলি সংজ্ঞায়িত করি। index.css ইতিমধ্যে শৈলীর সাথে প্রেরণ করা হয়েছিল।

Index.js ফাইলটি ব্রাউজ করার পরে আপনি দেখতে পাবেন যে ইতিমধ্যে দুটি উপাদান তৈরি করা হয়েছে: শিরোনাম এবং টেমপ্লেট র্যাপার। টেম্পলেটওয়্যারারে, আমরা আমাদের ওয়েবসাইটের সামগ্রীটি বিন্যাসের উপাদানগুলির সাথে সংযুক্ত করি যা বেশ কয়েকটি পৃষ্ঠায় উপস্থিত থাকতে হবে।

এটি বাচ্চাদের () প্রপস দ্বারা সম্ভব হয়েছে। এটি আমাদের সাইটের কোনও অ-লেআউট উপাদান রেন্ডার করবে যেখানে এটি স্থাপন করা হয়েছে। মনে রাখবেন, প্রতিক্রিয়াযুক্ত শিশুদের প্রপসের বিপরীতে, বিন্যাসের উপাদানগুলিতে প্রদত্ত চাইল্ড প্রোপ একটি ফাংশন এবং তা সম্পাদন করা আবশ্যক।

প্রথমে এসসিআর / স্টাইলস / লেআউট-ওভারাইড.css এর অধীনে একটি নতুন ফোল্ডার এবং একটি নতুন সিএসএস ফাইল তৈরি করুন। Index.js ফাইলটিতে আমদানির তালিকায় যুক্ত করুন। কিছু বিদ্যমান স্টাইলের নিয়মগুলিকে ওভাররাইড করার জন্য আমাদের এটিকে সূচি.এসএস এ আমদানি করতে হবে।

'গ্যাটসবি-লিংক' থেকে 'প্রোপ-প্রকার' আমদানি লিংক থেকে 'প্রতিক্রিয়া হেলমেট' থেকে আমদানি করুন
আমদানি './index.css' আমদানি "../styles/layout-overide.css";

লেআউট-ওভারাইড.css খুলুন এবং নিম্নলিখিত স্টাইলের বিধিগুলিতে পেস্ট করুন। খুঁজে বের করার দরকার নেই।

* {পটভূমি: # f5f5f5; রঙ কালো; } এইচটিএমএল {উচ্চতা: 100%; }
দেহ {উচ্চতা: 100%; সীমানা: 5px কঠিন # ffdb3a; }
এইচ 1 {ফন্টের আকার: 1.5 মিমি; লাইন উচ্চতা: 0.5 মিমি; }
পি, ডিভি {ফন্টের আকার: 16px; }

শিরোনাম উপাদান আপডেট করুন।

কনড হেডার = () => ( কোডস্ট্যাক );

পাশাপাশি একটি সাইডবার উপাদান তৈরি করুন।

কনস্ট সাইডবার = (প্রপস) => (
{props.title}। s প্রপস.ডেসক্রিপশন}
);

আমরা চাই সাইডবার এবং রেন্ডার করা {শিশু ()} উপাদানগুলি এমন আচরণ করতে:

যেহেতু প্রতিক্রিয়াতে মিডিয়া প্রশ্নগুলি সংজ্ঞায়িত করার কোনও সহজ উপায় নেই, তাই আমি "রিঅ্যাক্ট-মিডিয়া" নামে একটি লাইব্রেরি পেয়েছি, প্রতিক্রিয়াটির জন্য একটি সিএসএস মিডিয়া ক্যোয়ারী উপাদান। এটি ইনস্টল করুন।

এনপিএম ইনস্টল - স্টোর প্রতিক্রিয়া মিডিয়া

এটি একটি প্রতিনিধিত্ব করে - প্রস্তুত উপাদান যা কোনও সিএসএস মিডিয়া ক্যোয়ারীর সাথে মিলে যাওয়ার জন্য অপেক্ষা করে এবং কোয়েরিটি মেলে কিনা তার ভিত্তিতে সামগ্রী সরবরাহ করে।

আমাদের ফাইলে আমদানির তালিকায় এটি যুক্ত করুন।

প্রতিক্রিয়া মিডিয়া থেকে মিডিয়া আমদানি করুন

টেম্পলেটওয়্যারারে পছন্দসই হিসাবে (শিরোনাম, সাইডবার এবং শিশুদের () উপাদান) এর সমস্ত উপাদানের বিন্যাসকে মঞ্জুরি দেয়। নিম্নলিখিত পরিবর্তনগুলি করুন (আমার নামের চটকদার প্লাগের জন্য দুঃখিত):

কনট টেম্পলেটওয়্যার্পার = ({শিশু}) => ( {ম্যাচ => ম্যাচ? ( {শিশু ()} ): ( {শিশু ()}
)} );
তুমি এটা করতে পার!  / ক্রেডিট: লেভন

কোডের এই একতাবদ্ধ ব্লকটিতে কী ঘটে? প্রতিক্রিয়া মিডিয়া সর্বাধিক 848px প্রস্থের উপর ভিত্তি করে কী রেন্ডার করতে হবে তা নির্ধারণ করতে একটি ত্রৈমাসিক অপারেশন ব্যবহার করে। স্ক্রিনটি যদি একই প্রস্থের হয় তবে কেবল শিরোনাম এবং শিশু () উপাদানগুলি রেন্ডার করা হয়।

{ম্যাচ => ম্যাচ? (... রেন্ডার করার জন্য জিনিসগুলি ...): (... রেন্ডার করার জিনিসগুলি ...)}
একটি ত্রিশী রিফ্রেশার। যদি শর্তটি সত্য হয় তবে অপারেটর এক্সপ্রেস 1 এর মান প্রদান করে। অন্যথায় expr2 এর মান ফিরে আসবে।

যদি আপনি খেয়াল করেন, আমরা শিশু উপাদানগুলির অবস্থানগুলি () এবং সাইডবারের উপাদানগুলির নকশা করতেও ফ্লেক্সবক্স ব্যবহার করেছি।

টার্মিনালে গ্যাটসবি বিকাশ চালান এবং আমাদের স্ট্যাটিক ব্লগটি এখন দেখতে এইরকম হওয়া উচিত:

আকার নিন

৩. ব্লগ পোস্ট তৈরি করুন

এখন আসল ব্লগ পোস্ট তৈরি করা শুরু করা যাক। এক বা একাধিক উত্স থেকে ডেটা টানতে গ্যাটসবি গ্রাফকিউএল ব্যবহার করে, উদাঃ আপনার স্থানীয় হার্ড ড্রাইভ, ওয়ার্ডপ্রেস API, ইত্যাদি থেকে বি।

ব্যক্তিগতভাবে, আমি এটি পছন্দ করি যে আমি একটি স্থিতিশীল ব্লগ তৈরি করতে পারি এবং ওয়ার্ডপ্রেস এপিআই থেকে সামগ্রী টানতে পারি। আমার ক্লায়েন্টের ওয়ার্ডপ্রেস সম্পাদকটিতে অ্যাক্সেস রয়েছে যা তারা পোস্ট করতে ব্যবহার করে এবং আমি কোনও ওয়ার্ডপ্রেস সাইট বিকাশের ঝামেলা এড়াতে পারি।

এই পোস্টে আমরা মার্কডাউন ফাইলগুলি থেকে ডেটা লোড করব যা আমরা আমাদের স্থানীয় হার্ড ড্রাইভে তৈরি করব। পূর্বে কনফিগার করা গ্যাটসবি উত্স ফাইল সিস্টেম প্লাগইনটি প্রত্যাশা করে যে আমাদের বিষয়বস্তু এসসিআর / পৃষ্ঠায় থাকবে।

একটি সাধারণ ব্লগ পোস্ট অনুশীলন হ'ল এমএম-ডিডি-ওয়াইওয়াই শিরোনামের মতো ফোল্ডারের নাম। আপনি যা খুশি তাই এর নাম দিতে পারেন বা আপনি / পেজ ফোল্ডারে একটি মার্কডাউন ফাইল রাখতে পারেন।

আসুন "src / পৃষ্ঠাগুলি / 12–22–2017-first-post" একটি ফোল্ডার তৈরি করুন এবং এতে একটি index.md স্থাপন করুন। লিখুন:

--- পথ: "/ হ্যালো-ওয়ার্ল্ড" তারিখ: 2017-07-12T17: 12: 33.962Z শিরোনাম: "আমার প্রথম গ্যাটসবি পোস্ট" ---
ওওউ-উইডি, আমার প্রথম ব্লগ এন্ট্রি!
ফার্স্ট পোস্ট ইপসাম সাফল্যের একটি গুরুত্বপূর্ণ চাবিকাঠি। অভিনন্দন, আপনি নিজে খেলেছেন। নিজেকে ফেরেশতাদের সাথে ঘিরে ফেলুন। সাফল্য উদযাপন করুন, একমাত্র উপায় আপেল। মূলটি হ'ল নারকেল, তাজা নারকেল পান করা, আমাকে বিশ্বাস করুন। ডিম সাদা, টার্কি সসেজ, গমের টোস্ট, জল। অবশ্যই, তারা আমাদের প্রাতঃরাশ খেতে চায় না, তাই আমরা আমাদের প্রাতঃরাশ উপভোগ করব।

ড্যাশযুক্ত রেখাগুলি দ্বারা বর্ণিত ব্লকটিকে সামনের বিষয়টি হিসাবে উল্লেখ করা হয়। এখানে প্রদত্ত ডেটা এবং অন্যান্য মার্কডাউন ফাইলগুলি গ্যাটসবি ট্রান্সফর্মার মন্তব্য মন্তব্য প্লাগইন দ্বারা স্বীকৃত।

প্লাগইনটি আপনার মার্কডাউন ফাইলের ফ্রন্টম্যাটার মেটাডেটা অংশটিকে ফ্রন্টম্যাটারে এবং সামগ্রীর অংশে (ইয়িপি, আমার প্রথম ব্লগ পোস্ট!) এইচটিএমএলে রূপান্তর করে।

আমরা যখন মার্কডাউন ফাইলগুলি থেকে সরাসরি ব্লগ পৃষ্ঠাগুলি তৈরি করতে বিভাগ 4 (পরবর্তী বিভাগ) এ শুরু করি, তখন URL টি URL নির্দিষ্ট করতে পাথ ব্যবহার করা হয় যার অধীনে ফাইলটি রেন্ডার করা উচিত। উদাহরণস্বরূপ, উপরের মার্কডাউন ফাইলটি লোকালহোস্ট: 8000 / হ্যালো-ওয়ার্ল্ডে রেন্ডার করা হয়েছে।

তার আগে, আপনি এমন একটি টেমপ্লেট তৈরি করতে পারেন যা প্রতিটি প্রতিলিপি ফাইলকে তার নিজস্ব ব্লগ পৃষ্ঠায় পরিণত করবে। এসআরসি / টেম্পলেট / ব্লগ-পোস্ট.জেএস ফাইলটি তৈরি করুন (দয়া করে ফোল্ডারটি এসআরসি / টেমপ্লেট তৈরি করুন)।

"প্রতিক্রিয়া" দ্বারা আমদানি প্রতিক্রিয়া; "প্রতিক্রিয়া হেলমেট" থেকে হেলমেট আমদানি করুন;
রফতানির স্ট্যান্ডার্ড ফাংশন টেম্পলেট ({ডেটা}) {কনস্ট পোস্ট = ডাটা.মার্কডাউনমার্ক; ফিরে ( । post.frontmatter.title} ); }

আমরা লিখতে যাচ্ছি গ্রাফিক্যুয়াল ক্যোয়ারী থেকে এসেছে এমন একটি ডেটা অবজেক্ট গ্রহণ করার জন্য আমরা টেম্পলেট উপাদানটি সেট আপ করেছি।

আবার উপাদানটিতে ডেটা পেতে গ্রাফকিউএল কোয়েরি প্রয়োজন। গ্যাটসবি ক্যোয়ারির ফলাফলটিকে টেমপ্লেট উপাদানটিতে ডেটা এবং মার্কডাউনমার্ক হিসাবে সন্নিবেশ করিয়ে দেয়।

আমরা দেখতে পাব যে মার্কডাউনমার্ক বৈশিষ্ট্যে মার্কডাউন ফাইলের সমস্ত বিবরণ রয়েছে।

এখন আসুন আসলে কোয়েরি করি। এটি টেম্পলেট উপাদান অধীনে স্থাপন করা উচিত:

এক্সট্রা কনট পেজকিয়ারি = গ্রাফিকল` ক্যোয়ারী ব্লগপোস্টবাইপ্যাথ ($ পথ: স্ট্রিং!) {মার্কডাউনমার্ক (ফ্রন্টমেটার: {পাথ: {eq: $ পাথ}}) {এইচটিএমএল ফ্রন্টমেটারি {তারিখ (ফর্ম্যাটস্ট্রিং: "এমএমএমএম ডিডি, ওয়াইওয়াইওয়াই") পাথ শিরোনাম}} } `;

আপনি যদি গ্রাফকিউএলটির সাথে পরিচিত না হন তবে আমি এখন যা চলছে তা ভেঙে ফেলার চেষ্টা করব। গ্রাফকিউএল সম্পর্কিত আরও তথ্যের জন্য, এই দুর্দান্ত উত্সটি দেখুন।

গ্রাফকিউএল একটি নির্দিষ্ট ধরণের সার্ভার সম্পর্কে কেবল ফেসবুকের ধারণা। এই সার্ভারে কী ধরনের অনুরোধগুলি প্রেরণ করা যায় এবং সার্ভারের কীভাবে প্রতিক্রিয়া দেখা উচিত তা আপনি নির্ধারণ করেছেন। গ্রাফকিউএল এর এপিআইআরটি আরএসটি এর চেয়ে ভাল কারণ এটি ক্লায়েন্টকে প্রয়োজনীয় সঠিক ডেটা বর্ণনা করে যাতে কোনও ডেটা খুব অল্প বা খুব বেশি পরিমাণে পাওয়া যায় না।

এর অর্থ আপনাকে নিজের গ্রাফকিউএল সার্ভার তৈরি করতে হবে। ভাগ্যক্রমে, গ্যাটসবিজেএস তার নিজস্ব গ্রাফকিউএল সার্ভারের সাথে আসে।

উপরের কোডে, ব্লগপোস্টবাইপথ হল অন্তর্নিহিত ক্যোয়ারী যার ফলস্বরূপ কোনও ব্লগ পোস্ট ফেরত আসবে। এটি টেম্পলেট উপাদানটিতে সন্নিবেশের জন্য ডেটা হিসাবে ফিরে আসে is

আমরা বর্তমানে প্রদর্শিত পথের সাথে সম্পর্কিত একটি ব্লগ পোস্ট ফিরিয়ে আনতে আমরা ব্লগপোস্টবাইপথের argument পথ তর্কটি অতিক্রম করছি।

অতিরিক্তভাবে, মার্কডাউনমার্কের কলব্যাকটি আমাদের মার্কডাউন ফাইলগুলিকে রূপান্তর করেছে। এটিকে সম্পত্তি হিসাবে বিবেচনা করা হয়, যার বিষয়বস্তু ডেটা.মার্কডাউনমার্কের মাধ্যমে পাওয়া যায়।

আমরা ডেটা.মার্কডাউনমার্ক। Html এর মাধ্যমে এইচটিএমএলটি অ্যাক্সেস করতে পারি। আমরা একটি দায়েশ ব্লক দিয়ে যে ফ্রন্টমেটার সামগ্রী তৈরি করেছি তা ডেটা.মার্কডাউনমার্ক.টাইটেল ইত্যাদির মাধ্যমেও অ্যাক্সেস করা যায় can

পুরো ব্লগ-টেম্পলেট.জেগুলি দেখতে এইরকম হওয়া উচিত:

"প্রতিক্রিয়া" দ্বারা আমদানি প্রতিক্রিয়া; "প্রতিক্রিয়া হেলমেট" থেকে হেলমেট আমদানি করুন;
রফতানি স্ট্যান্ডার্ড ফাংশন টেম্পলেট ({ডেটা}) {কনস্ট পোস্ট = ডেটা.মার্কডাউনমার্ক; ফিরে ( । post.frontmatter.title} ); }
এক্সট্রা কনট পেজকিয়ারি = গ্রাফিকল` ক্যোয়ারী ব্লগপোস্টবাইপ্যাথ ($ পথ: স্ট্রিং!) {মার্কডাউনমার্ক (ফ্রন্টমেটার: {পাথ: {eq: $ পাথ}}) {এইচটিএমএল ফ্রন্টমেটারি {তারিখ (ফরম্যাটস্ট্রিং: "এমএমএমএম ডিডি, ওয়াইওয়াইওয়াই") পাথ শিরোনাম}} } `;

এই মুহূর্তে:

  • আমরা কিছু ইউটিলিটি চালানোর জন্য ডিস্ক থেকে ফাইলগুলি লোড করার জন্য এবং মার্কডাউনকে এইচটিএমএল রূপান্তর করতে বেশ কয়েকটি প্লাগইন ইনস্টল করেছি।
  • আমাদের কাছে একটি একক, নিঃসঙ্গ মার্কডাউন ফাইল রয়েছে যা ব্লগ পোস্ট হিসাবে রেন্ডার করা হচ্ছে।
  • ব্লগ পোস্ট ডেটা জিজ্ঞাসা করতে এবং অনুরোধকৃত ডেটা সহ প্রতিক্রিয়া টেমপ্লেট সরবরাহ করতে আমাদের একটি লেআউটে ব্লগ পোস্টগুলি রেন্ডারিংয়ের জন্য একটি প্রতিক্রিয়া টেম্পলেট এবং তারযুক্ত গ্রাফকিউএল রয়েছে।

মিষ্টি!

৪. ব্লগ পোস্ট ডেটা থেকে নতুন পৃষ্ঠা তৈরি করুন।

গ্যাটসবি একটি নোড এপিআই সরবরাহ করে যা ব্লগ পোস্টগুলি থেকে গতিশীল পৃষ্ঠা তৈরির জন্য কার্যকারিতা সরবরাহ করে। এই প্রকল্পটি আপনার প্রকল্পের মূল ডিরেক্টরিতে thegatsby-node.js ফাইলে উপলব্ধ। এই ফাইলটি একাধিক নোড এপিআই রফতানি করতে পারে তবে আমরা ক্রিয়েপেজ এপিআইতে আগ্রহী।

অফিসিয়াল ডকুমেন্টগুলিতে উল্লিখিত কোডের নীচের ব্লকটি ব্যবহার করুন (নোট করুন যে ব্লগপোস্টটেমপ্লেটের জন্য পথটি আমাদের পথ প্রতিফলিত করার জন্য সেট করা হয়েছে):

কনস্ট পাথ = প্রয়োজনীয় ('পাথ');
রফতানি। ক্রিয়েটপেইজস = ({সীমানা ক্রিয়াকলাপী, গ্রাফিক্যাল}) => {কনস্ট {ক্রয়পেজ} = গিরিঅ্যাকশনক্রিটারস;
কনট্রপ ব্লগপোস্টটেম্পলেট = path.resolve (`src / টেমপ্লেটস / ব্লগ-পোস্ট.js`);
রিটার্ন গ্রাফিক্যেল (`{allMarkdownRemark (সাজান: {অর্ডার: DESC, ক্ষেত্র: [ফ্রন্টম্যাটার___ তারিখ]} সীমা: 1000) {প্রান্ত {নোডস {এক্সট্র্যাক্ট (pruneLength: 250) html আমি ফ্রন্টমেটার {তারিখের পথের শিরোনাম}}}}}`)) .পথ (ফলাফল => {যদি (ফলাফল.আরফারসস) Prom প্রতিশ্রুতি। রিজেক্ট (ফলাফল.আরফারসস); {
ফলাফল.data.allMarkdownRemark.edges .forEach (({নোড}) => page পৃষ্ঠা তৈরি করুন ({পথ: নোড.ফ্রন্টমেটার.পাথ, উপাদান: ব্লগপোস্টটেম্পলেট, প্রসঙ্গ: {} // অতিরিক্ত ডেটা প্রসঙ্গে transferred) স্থানান্তরিত হতে পারে;); }); }); }

এটি কাজ করে কিনা তা পরীক্ষা করে দেখুন। আমি ব্রাউজার উইন্ডোটি বন্ধ করার এবং টার্মিনাল থেকে সিটিটিএল + সি দিয়ে গ্যাটসবি বিকাশ সার্ভারটি বন্ধ করার পরামর্শ দিচ্ছি। এখন চালান গ্যাটসবি আবার বিকাশ এবং খুলুন http: // লোকালহোস্ট: 8000 / হ্যালো-ওয়ার্ল্ড।

হ্যাঁ,

অন্য একটি ফাইল তৈরি করুন src / পৃষ্ঠা / 24–12–2017-learning-grid / index.md

--- পথ: "/ অন্য এক" তারিখ: 2017-07-12T17: 12: 33.962Z শিরোনাম: "আমার দ্বিতীয় গ্যাটসবি পোস্ট" ---
জীবনে রাস্তাগুলি থাকবে তবে আমরা সেগুলি কাটিয়ে উঠব। বিশেষ কাপড় সতর্কতা। নিজেকে কখনই খেলবেন না more আরও সফল হওয়ার মূল চাবিকাঠিটি সপ্তাহে একবার ম্যাসেজ করা, একটি খুব গুরুত্বপূর্ণ, কী কথোপকথন।
  // etwas CSS-Grid-Code  

আপনার ব্রাউজার উইন্ডোটি আবার বন্ধ করুন এবং গ্যাটসবি বিকাশকারী সার্ভারটি বন্ধ করুন। গ্যাটসবি আবার বিকাশ করুন এবং http: // লোকালহোস্ট: 8000 / অন্য এক খুলুন। এটি প্রদর্শিত হয়:

আপনি চাইলে এগিয়ে যান এবং নিজের পৃষ্ঠা তৈরি করুন।

৫. অবতরণ পৃষ্ঠায়, আমাদের সাইটের ট্রান্সক্রিপ্ট ফাইলগুলির একটি তালিকা তৈরি করুন।

আপগ্রেড গ্যাটসবি সাইটের সাথে স্ট্যান্ডার্ড ল্যান্ডিং পৃষ্ঠাটি এসসিআর / পৃষ্ঠাগুলি / সূচক.জেজে অবস্থিত। এখানে আমরা একটি টেমপ্লেট সংজ্ঞায়িত করেছি এবং এমডি ফাইলগুলির তালিকার জন্য ডেটা toোকাতে একটি প্রশ্ন জিজ্ঞাসা করি। কর এটা:

"প্রতিক্রিয়া" দ্বারা আমদানি প্রতিক্রিয়া; "gatsby-link" থেকে লিঙ্ক আমদানি করুন; "প্রতিক্রিয়া হেলমেট" থেকে হেলমেট আমদানি করুন;
আমদানি করুন '../styles/blog-listing.css';
রফতানি স্ট্যান্ডার্ড ফাংশন সূচক ({ডেটা}) {কনস্ট {প্রান্তগুলি: পোস্টগুলি} = ডেটা.আলমার্কডাউনমার্ক; ফিরে ( । পোষ্টস । post.frontmatter.title} {post.frontmatter.date} । post.excerpt ); })} ); }
এক্সপোর্ট কনজ পেজকুয়ারি = গ্রাফিক্যাল ক্যোরি ইনডেক্সকোয়ারি {allMarkdownRemark (সাজান: {অর্ডার: ডিইএসসি, ক্ষেত্র: [ফ্রন্টম্যাটার___ডেট]}) {প্রান্ত odes নোডস {এক্সট্র্যাক্ট (ছাঁটাই দৈর্ঘ্য: 250) আমি ফ্রন্টমেটার {শিরোনামের তারিখ (ফর্ম্যাটস্ট্রিং: "এমএমএমএম ডিডি, ওয়াইওয়াইওয়াই ") পথ}}}}}`;

আমি বিশ্বাস করি যে এই মুহুর্তে আপনি খারাপ মেজাজে আছেন এবং ইতিমধ্যে জানেন যে কী চলছে। লক্ষ্য করুন যে আমরা উপরে একটি আমদানি লিখেছি যা বিদ্যমান নেই। এখন ফাইল / স্টাইলস / ব্লগ-লিস্টিং.সিএস তৈরি করুন:

div.blog- পোস্ট-পূর্বরূপ দেখুন below মার্জিন নীচে: 2px অবিচ্ছিন্ন # e6e6e6; প্যাডিং শেল: 1 মিম; সজ্জিত বেস: 1 মিম; প্রান্ত নীচে: 1 মিম; }
এইচ 1> * {ফন্টের আকার: 1.2 মিমি; পাঠ্য সজ্জা রেখা: কিছুই নয়; }
এইচ 2 {ফন্টের আকার: 0.8 ক্রেম! গুরুত্বপূর্ণ; হরফ ওজন: 100! গুরুত্বপূর্ণ; }

সার্ভারটি পুনরায় চালু করুন, অবতরণ পৃষ্ঠায় যান এবং আপনার কাজ করার সাথে তালিকাগুলি দেখতে হবে:

উপসংহার

আমরা এই টিউটোরিয়াল এর শেষে এসেছি। পড়ার জন্য ধন্যবাদ.

এই পোস্টটি হ'ল আইসবার্গের কেবলমাত্র টিপসটি বিবেচনা করে গ্যাটস্বির সাথে কী করা উচিত। কীভাবে প্রয়োগ করা যায় তা নির্দ্বিধায় জানুন:

  • অনুসন্ধান ফাংশন
  • ব্লগ পোস্টগুলিকে শ্রেণীবদ্ধ করতে ট্যাগ ব্যবহার করা
  • আপনার গ্যাটসবি সাইট মোতায়েন করা হচ্ছে

আপনি এখানে চূড়ান্ত উত্স কোডটি ডাউনলোড করতে পারেন। নির্দ্বিধায় আমাকে সমর্থন করুন (devapparel.co) এবং এটি করতে ভাল দেখায়। মন্তব্য করুন বা এই পোস্টে ভাগ করুন। পড়ার জন্য আপনাকে ধন্যবাদ!

PS: আমি ওহানের এমানুয়ালের সাথে একটি প্রতিক্রিয়া বইয়ের সাথে কাজ করছি যা আপনাকে 30 দিনের মধ্যে 30 টি ছোট প্রকল্প তৈরি করে প্রতিক্রিয়া অর্জনে সহায়তা করবে। আপনি আপ টু ডেট রাখতে চাইলে মেলিং তালিকায় যোগ দিন। অনেক ধন্যবাদ!