gatsby template

قالب غاتسبي كامل!

ابدأ مشروعك بهذا القالب. يأتي هذا المشغل مزودًا بملفات Gatsby الأساسية والإعدادات التي قد تحتاجها للتشغيل بأقصى سرعة باستخدام منشئ التطبيقات فائق السرعة لـ React.

بداية سريعة

1. إنشاء موقع غاتسبي.

   استخدم Gatsby CLI لإنشاء موقع جديد، مع تحديد هذا القالب .

    # Crie um novo site do Gatsby usando esse Template
   gatsby new my-project https://github.com/solrachix/gatsby-template

2. ابدأ في التطوير.

   انتقل إلى دليل موقعك الجديد وقم بتشغيله.

    cd my-project/
   gatsby develop

3. افتح الكود وابدأ التحرير!

   موقعك يعمل الآن على http://localhost:8000 !

   ملاحظة: سترى أيضًا رابطًا ثانيًا: http://localhost:8000/___graphql . هذه أداة يمكنك استخدامها لتجربة الاستعلام عن بياناتك. تعرف على المزيد حول كيفية استخدام هذه الأداة في [برنامج Gatsby التعليمي](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).

   افتح دليل my-project في محرر التعليمات البرمجية الذي تختاره وقم بتحرير src/pages/index.js . احفظ تغييراتك وسيتم تحديث المتصفح في الوقت الفعلي!

PWA

تطبيق الويب التقدمي هو مصطلح يستخدم للإشارة إلى منهجية جديدة لتطوير البرمجيات. على عكس التطبيقات التقليدية، يمكن اعتبار تطبيق الويب التقدمي بمثابة تطور مختلط بين صفحات الويب العادية وتطبيق الهاتف المحمول.

يتيح بيان تطبيق الويب (جزء من مواصفات PWA) المدعوم من البرنامج الإضافي للبيان للمستخدمين إضافة موقع الويب الخاص بك إلى الشاشة الرئيسية في معظم متصفحات الأجهزة المحمولة - انظر هنا. يوفر البيان التكوين والأيقونات للهاتف.

يوفر هذا البرنامج المساعد العديد من الميزات بالإضافة إلى إعدادات البيان لتسهيل حياتك، وهي:

• إنشاء الأيقونات تلقائيًا - يُنشئ أحجام أيقونات متعددة من مصدر واحد
• دعم الأيقونة المفضلة
• دعم الأيقونة القديمة (iOS) 1
• حظر ذاكرة التخزين المؤقت
• الموقع - يوفر بيانات فريدة للموقع المستند إلى المسار (مثال Gatsby)

تتمتع كل ميزة من هذه الميزات بتكوين شامل متاح حتى تتمكن دائمًا من التحكم.

تم تنفيذ الإضافات:

أين تبحث عن هذه الإضافات؟ انقر هنا وابحث

• رد فعل خوذة : React Helmet هو مكون يسمح لك بالتحكم في رأس المستند باستخدام مكون React؛
• خريطة الموقع : يُنشئ خريطة موقع تلقائية عند الإنشاء؛
• Transformer-remark : وهو المسؤول عن تحويل منشورات المدونة المكتوبة بلغة Markdown إلى HTML؛
• البيان : ينشئ بيانًا خاليًا من المتاعب؛
• خلاصة : إنشاء خلاصة RSS لموقعك على الويب.
• nprogress : شريط التقدم في أعلى الصفحة، بأسلوب YouTube؛
• google-analytics : يدعم التحليلات على موقع الويب الخاص بك؛
• المكونات المصممة : نموذج التصميم CSS IN JS؛
• منشئ الصفحة : ينشئ تلقائيًا صفحات من مكونات React في أدلة محددة؛
• نظام الملفات المصدر : خادم للحصول على البيانات في تطبيق Gatsby من نظام الملفات المحلي؛
• غير متصل بالإنترنت : يدعم موقع الويب للعمل دون اتصال بالإنترنت؛

؟ ماذا يوجد بالداخل؟

نظرة سريعة على الملفات والأدلة ذات المستوى الأعلى التي ستراها في قالب Gatsby هذا.

 .
├── node_modules
├── config/
│ 	└── MetaData.js
├── src/
│ 	├── assets/
│ 	│ 	└── images/
│ 	│ 		└── logo.png
│ 	├── components/
│ 	├── Pages/
|	│ 	└── index.js
│ 	├── posts/
|	│ 	└── 2020-04-08--nosso-primeiro-post/
|	│ 		└── index.md
│ 	├── styles/
│ 	|	├── themes/
│ 	|	└── GlobalStyles.js
│ 	├── templates/
│ 	|	├── post.js
│ 	|	└── tag.js
│ 	└── html.js
├── static/
│ 	├── favicon.ico
│ 	└── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

الملفات/المجلدات	وصف
/node_modules	يحتوي هذا الدليل على كافة وحدات التعليمات البرمجية التي يعتمد عليها مشروعك (حزم npm) والتي يتم تثبيتها تلقائيًا.
/src	سيحتوي هذا الدليل على كافة الأكواد المتعلقة بما ستراه في الواجهة الأمامية لموقعك على الويب (ما تراه في المتصفح)، مثل رأس موقع الويب أو قالب الصفحة. src هو اصطلاح لـ "الكود المصدري".
.gitignore	يخبر هذا الملف git بالملفات التي يجب ألا يتتبعها/لا يحتفظ بسجل الإصدارات.
.prettierrc	هذا ملف تكوين لـ Prettier. Prettier هي أداة للمساعدة في الحفاظ على اتساق تنسيق التعليمات البرمجية الخاصة بك.
* غاتسبي-browser.js	في هذا الملف يتوقع Gatsby العثور على أي استخدام لواجهات برمجة تطبيقات متصفح Gatsby (إذا كانت موجودة). يسمح هذا بتخصيص/توسيع إعدادات Gatsby الافتراضية التي تؤثر على المتصفح.
غاتسبي-config.js	هذا هو ملف التكوين الرئيسي لموقع ويب Gatsby. هذا هو المكان الذي يمكنك فيه تحديد معلومات حول موقعك (بيانات التعريف) مثل عنوان موقعك ووصفه، ومكونات Gatsby الإضافية التي ترغب في تضمينها، وما إلى ذلك. (راجع مستندات التكوين لمزيد من التفاصيل).
غاتسبي-node.js	هذا الملف هو المكان الذي يتوقع Gatsby العثور فيه على أي استخدام لواجهات برمجة تطبيقات Gatsby Node (إذا كانت موجودة). يسمح هذا بتخصيص/توسيع إعدادات Gatsby الافتراضية التي تؤثر على أجزاء من عملية إنشاء الموقع.
غاتسبي-ssr.js	في هذا الملف يتوقع Gatsby العثور على أي استخدام لواجهات برمجة التطبيقات التي تعرض خادم Gatsby (إذا كانت موجودة). يسمح هذا بتخصيص إعدادات Gatsby الافتراضية التي تؤثر على العرض من جانب الخادم.
رخصة	تم ترخيص Gatsby بموجب ترخيص MIT
package-lock.json	(انظر package.json أدناه أولاً). هذا ملف يتم إنشاؤه تلقائيًا بناءً على الإصدارات الدقيقة لتبعيات npm التي تم تثبيتها لمشروعك. (لا يمكنك تغيير هذا الملف مباشرة).
package.json	ملف واضح لمشاريع Node.js، والذي يتضمن أشياء مثل البيانات الوصفية (اسم المشروع، المؤلف، وما إلى ذلك). هذا البيان هو كيف يعرف npm الحزم التي يجب تثبيتها لمشروعك.
التمهيدي.md	ملف نصي يحتوي على معلومات مرجعية مفيدة حول مشروعك.
****

؟ تعلم غاتسبي

هل تبحث عن المزيد من الإرشادات؟ وثائق غاتسبي الكاملة موجودة [على الموقع] (https://www.gatsbyjs.org/). فيما يلي بعض الأماكن للبدء:

• بالنسبة لمعظم المطورين، أوصي بالبدء بـ [البرنامج التعليمي المتعمق لإنشاء موقع ويب باستخدام Gatsby] (https://www.gatsbyjs.org/tutorial/). يبدأ الأمر بعدم وجود أي افتراضات حول مستوى قدرتك ويمر عبر كل خطوة من خطوات العملية.

• للتعمق مباشرة في أمثلة التعليمات البرمجية، قم بزيارة [الوثائق] (https://www.gatsbyjs.org/docs/). وعلى وجه الخصوص، راجع أقسام الأدلة ومرجع واجهة برمجة التطبيقات والبرامج التعليمية المتقدمة في الشريط الجانبي.

؟ نشر