[DONE] translation of tutorial/part-three

docs/tutorial/part-three/index.md

@@ -1,57 +1,57 @@
 ---
-title: Creating Nested Layout Components
+title: إنشاء مكونات تخطيط متداخل
 typora-copy-images-to: ./
 disableTableOfContents: true
 ---
 
-Welcome to part three!
+مرحبا بكم في الجزء الثالث!!
 
-## What's in this tutorial?
+## ماذا يوجد في هذا الدليل التطبيقي؟?
 
-In this part, you'll learn about Gatsby plugins and creating "layout" components.
+في هذا الجزء ، ستتعرف على المكونات الإضافية لـ Gatsby وإنشاء مكونات "layout".
 
-Gatsby plugins are JavaScript packages that help add functionality to a Gatsby site. Gatsby is designed to be extensible, which means plugins are able to extend and modify just about everything Gatsby does.
+ملحقات Gatsby هي حزم JavaScript تساعد على إضافة وظائف إلى موقع Gatsby. تم تصميم Gatsby ليكون قابلاً للتوسعة ، مما يعني أن الإضافات قادرة على تمديد وتعديل كل ما يفعله Gatsby.
 
-Layout components are for sections of your site that you want to share across multiple pages. For example, sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.org's layout component.
 
-Let's dive into part three.
+مكونات النسق مخصصة لأقسام موقعك التي ترغب في مشاركتها عبر عدة صفحات. على سبيل المثال ، سيكون للمواقع عادةً مكون تخطيط برأس وتذييل مشترك. الأشياء الشائعة الأخرى المراد إضافتها إلى التخطيطات هي شريط جانبي و / أو قائمة تنقل. في هذه الصفحة على سبيل المثال ، يمثل الرأس في الجزء العلوي جزءًا من مكون تخطيط gatsbyjs.org.
 
-## Using plugins
+دعونا الغوص في الجزء الثالث.
 
-You’re probably familiar with the idea of plugins. Many software systems support adding custom plugins to add new functionality or even modify the core workings of the software. Gatsby plugins work the same way.
+## باستخدام الإضافات
 
-Community members (like you!) can contribute plugins (small amounts of JavaScript code) that others can then use when building Gatsby sites.
+ربما تكون على دراية بفكرة المكونات الإضافية. تدعم العديد من أنظمة البرامج إضافة مكونات إضافية مخصصة لإضافة وظائف جديدة أو حتى تعديل الأعمال الأساسية للبرنامج. الإضافات Gatsby تعمل بنفس الطريقة.
 
-> There are already hundreds of plugins! Explore the Gatsby [Plugin Library](/plugins/).
+يمكن لأعضاء المجتمع (مثلك!) المساهمة في المكونات الإضافية (كميات صغيرة من شفرة JavaScript) التي يمكن للآخرين استخدامها عند إنشاء مواقع Gatsby.
 
-Our goal with plugins is to make them straightforward to install and use. You will likely be using plugins in almost every Gatsby site you build. While working through the rest of the tutorial you’ll have many opportunities to practice installing and using plugins.
+> هناك بالفعل المئات من الإضافات! استكشف Gatsby [Plugin Library](/plugins/).
 
-For an initial introduction to using plugins, we'll install and implement the Gatsby plugin for Typography.js.
+هدفنا مع المكونات الإضافية هو جعلها سهلة التركيب والاستخدام. من المحتمل أنك تستخدم المكونات الإضافية في كل موقع Gatsby تقريبًا تقوم بإنشائه. أثناء العمل خلال بقية الدليل التطبيقي، ستتاح لك العديد من الفرص للتدرب على تثبيت المكونات الإضافية واستخدامها.
 
-[Typography.js](https://kyleamathews.github.io/typography.js/) is a JavaScript library which generates global base styles for your site's typography. The library has a [corresponding Gatsby plugin](/packages/gatsby-plugin-typography/) to streamline using it in a Gatsby site.
+للحصول على مقدمة أولية لاستخدام المكونات الإضافية ، سنقوم بتثبيت وتطبيق Gatsby plugin لـ Typography.js.
 
-### ✋ Create a new Gatsby site
+[Typography.js] (https://kyleamathews.github.io/typography.js/) هي مكتبة JavaScript تنشئ تناسيق أساسية عالمية لطباعة موقعك. تحتوي المكتبة على [ملحق Gatsby المقابل] (/package/gatsby-plugin-typography/) لتبسيط استخدامه في موقع Gatsby.
+### ✋ إنشاء موقع Gatsby جديد
 
-As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory:
+كما ذكرنا في [الجزء الثاني] (/tutorial/part-two/) ، في هذه المرحلة ربما يكون من الجيد إغلاق النافذة (النوافذ) النهائية وملفات المشروع من الأجزاء السابقة من البرنامج التعليمي ، للحفاظ على الأمور نظيفة سطح المكتب. ثم افتح نافذة طرفية جديدة وقم بتشغيل الأوامر التالية لإنشاء موقع Gatsby جديد في دليل يسمى `tutorial-part-three` ثم انتقل إلى هذا الدليل الجديد:
 
 ```shell
 gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd tutorial-part-three
 ```
 
-### ✋ Install and configure `gatsby-plugin-typography`
+### ✋ تثبيت وتكوين `gatsby-plugin-typography`
 
-There are two main steps to using a plugin: Installing and configuring.
+هناك خطوتان أساسيتان لاستخدام مكون إضافي: التثبيت والتكوين.
 
-1. Install the `gatsby-plugin-typography` NPM package.
+1. تحميل `gatsby-plugin-typography`  حزمة NPM.
 
 ```shell
 npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates
 ```
 
-> Note: Typography.js requires a few additional packages, so those are included in the instructions. Additional requirements like this will be listed in the "install" instructions of each plugin.
+> ملاحظة: يتطلب Typography.js بعض الحزم الإضافية ، بحيث يتم تضمينها في الإرشادات. سيتم إدراج متطلبات إضافية مثل هذا في تعليمات "التثبيت" لكل مكون إضافي.
 
-2. Edit the file `gatsby-config.js` at the root of your project to the following:
+2. قم بتحرير الملف `gatsby-config.js` في جذر مشروعك إلى ما يلي:
 
 ```javascript:title=gatsby-config.js
 module.exports = {
@@ -66,11 +66,11 @@ module.exports = {
 }
 ```
 
-The `gatsby-config.js` is another special file that Gatsby will automatically recognize. This is where you add plugins and other site configuration.
+يعد `gatsby-config.js` ملفًا خاصًا آخر يتعرف عليه Gatsby تلقائيًا. هذا هو المكان الذي تضيف فيه الإضافات وبقية تهيئة الموقع الأخرى.
 
-> Check out the [doc on gatsby-config.js](/docs/gatsby-config/) to read more, if you wish.
+> تحقق من [doc on gatsby-config.js] (/docs/gatsby-config/) لقراءة المزيد ، إذا كنت ترغب في ذلك.
 
-3. Typography.js needs a configuration file. Create a new directory called `utils` in the `src` directory. Then add a new file called `typography.js` to `utils` and copy the following into the file:
+3. Typography.js يحتاج إلى ملف التكوين. قم بإنشاء مجلد جديد يسمى `utils` في دليل` src`. ثم قم بإضافة ملف جديد يسمى `typography.js` إلى` utils` وانسخ ما يلي إلى الملف:
 
 ```javascript:title=src/utils/typography.js
 import Typography from "typography"
@@ -82,20 +82,19 @@ export const { scale, rhythm, options } = typography
 export default typography
 ```
 
-4. Start the development server.
+4. تشغيل خادم التطوير .
 
 ```shell
 gatsby develop
 ```
-
-Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you’ll see that the typography plugin added a `<style>` element to the `<head>` element with its generated CSS:
-
+بمجرد تحميل الموقع ، إذا قمت بفحص HTML الذي تم إنشاؤه باستخدام أدوات مطور Chrome ، فسترى أن المكوّن الإضافي الخاص بالطباعة قد أضاف عنصر <style> إلى العنصر <head> مع CSS الذي تم إنشاؤه:
+
 ![typography-styles](typography-styles.png)
 
-### ✋ Make some content and style changes
+### ✋ قم بإجراء بعض التغييرات في المحتوى والأسلوب
 
-Copy the following into your `src/pages/index.js` so you can see the
-effect of the CSS generated by Typography.js better.
+انسخ ما يلي إلى `src/pages/index.js` حتى تتمكن من رؤية
+تأثير CSS التي تم إنشاؤها بواسطة Typography.js أفضل.
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -111,11 +110,12 @@ export default () => (
 )
 ```
 
-Your site should now look like this:
+يجب أن يبدو موقعك الآن هكذا:
 
 ![no-layout](no-layout.png)
 
-Let's make a quick improvement. Many sites have a single column of text centered in the middle of the page. To create this, add the following styles to the
+دعونا نجعل تحسنا سريعا. تحتوي العديد من المواقع على عمود واحد من النص يتمركز في منتصف الصفحة. لإنشاء هذا ، أضف التناسيق التالية إلى
+
 `<div>` in `src/pages/index.js`.
 
 ```jsx:title=src/pages/index.js
@@ -135,11 +135,11 @@ export default () => (
 
 ![with-layout2](with-layout2.png)
 
-Sweet. You've installed and configured your very first Gatsby plugin!
+حلو. لقد قمت بتثبيت وتهيئة أول مكون إضافي لـ Gatsby!
 
-## Creating layout components
+## إنشاء مكونات التخطيط
 
-Now let's move on to learning about layout components. To get ready for this part, add a couple new pages to your project: an about page and a contact page.
+الآن دعنا ننتقل إلى التعرف على مكونات التخطيط. للاستعداد لهذا الجزء ، أضف صفحتين جديدتين إلى مشروعك: صفحة حول وصفحة اتصال.
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -165,19 +165,19 @@ export default () => (
 )
 ```
 
-Let's see what the new about page looks like:
+لنرى كيف تبدو الصفحة الجديدة:
 
 ![about-uncentered](about-uncentered.png)
 
-Hmm. It would be nice if the content of the two new pages were centered like the index page. And it would be nice to have some sort of global navigation so it's easy for visitors to find and visit each of the sub-pages.
+سيكون من الرائع أن يتم توسيط محتوى الصفحتين الجديدتين مثل صفحة الفهرس. وسيكون من الجيد أن يكون لديك نوع من التنقل الشامل ، لذلك يسهل على الزائرين العثور على كل صفحة من الصفحات الفرعية وزيارتها.
 
-You'll tackle these changes by creating your first layout component.
+ستتعامل مع هذه التغييرات عن طريق إنشاء مكون التخطيط الأول.
 
-### ✋ Create your first layout component
+### ✋ قم بإنشاء مكون التصميم الأول الخاص بك
 
-1. Create a new directory at `src/components`.
+1. إنشاء مجلد جديد في `src/components`.
 
-2. Create a very basic layout component at `src/components/layout.js`:
+2. قم بإنشاء مكون تخطيط أساسي جدًا على `src/components/layout.js`:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
@@ -189,7 +189,7 @@ export default ({ children }) => (
 )
 ```
 
-3. Import this new layout component into your `src/pages/index.js` page component:
+3. قم باستيراد مكون التصميم الجديد هذا إلى مكون الصفحة src/pages/index.js`:
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -208,17 +208,17 @@ export default () => (
 
 ![with-layout2](with-layout2.png)
 
-Sweet, the layout is working! The content of your index page is still centered.
+الحلو ، والتخطيط يعمل! لا يزال محتوى صفحة الفهرس مركَّزًا.
 
-But try navigating to `/about/`, or `/contact/`. The content on those pages still won't be centered.
+ولكن حاول الانتقال إلى `/about/`, أو `/contact/`. لا يزال المحتوى على تلك الصفحات غير مركز.
 
-4. Import the layout component in `about.js` and `contact.js` (as you did for `index.js` in the previous step).
+4. قم باستيراد مكون التخطيط في `about.js` و` contact.js` (كما فعلت بالنسبة لـ index.js` في الخطوة السابقة).
 
-The content of all three of your pages is centered thanks to this single shared layout component!
+تتمحور محتويات الصفحات الثلاث جميعها بفضل مكون التخطيط المشترك هذا!
 
-### ✋ Add a site title
+### ✋ إضافة عنوان الموقع
 
-1. Add the following line to your new layout component:
+1. أضف السطر التالي إلى مكون التخطيط الجديد الخاص بك:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
@@ -231,13 +231,13 @@ export default ({ children }) => (
 )
 ```
 
-If you go to any of your three pages, you'll see the same title added, e.g. the `/about/` page:
+إذا ذهبت إلى أي من صفحاتك الثلاث ، فستظهر العنوان نفسه مضافًا ، على سبيل المثال صفحة `/about/`:
 
 ![with-title](with-title.png)
 
-### ✋ Add navigation links between pages
+### ✋ إضافة روابط التنقل بين الصفحات
 
-1. Copy the following into your layout component file:
+1. انسخ ما يلي إلى ملف مكون التخطيط الخاص بك:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
@@ -272,10 +272,9 @@ export default ({ children }) => (
 
 ![with-navigation2](with-navigation2.png)
 
-And there you have it! A three page site with basic global navigation.
-
-_Challenge:_ With your new "layout component" powers, trying adding headers, footers, global navigation, sidebars, etc. to your Gatsby sites!
+وهناك لديك! موقع من ثلاث صفحات مع تنقل شامل أساسي.
 
-## What's coming next?
+__تحدي: _بفضل قوى "مكون التخطيط" الجديدة ، حاول إضافة الرؤوس والتذييلات والتنقل الشامل والأشرطة الجانبية وما إلى ذلك إلى مواقع Gatsby الخاصة بك!
 
-Continue on to [part four of the tutorial](/tutorial/part-four/) where you'll start learning about Gatsby's data layer and programmatically creating pages!
+## ما الذي سيأتي بعد ذلك؟
+متابعة إلى [الجزء الرابع من الدليل التطبيقي](/tutorial/part-four/) حيث ستبدأ في التعرف على طبقة بيانات Gatsby وإنشاء صفحات برمجياً!