مشكلة في فهم إطار العمل Hugo

وعليكم السلام ورحمة الله وبركاته 

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

أهم ما يمكنك فعله خلال متابعتك للمسار هو إعادة الدرس الذي لا فعه أكثر من مرة ولو بشكل بطيئ وتدوين المعلومات وهذا سوف يساعدك على فهم اطار العمل Hugo بشكل مبسط وليس عليك الإسراع في المسار لإنهائه . 

كما يمكنك الممارسة والتطبيق مع المدرب وذلك سوف يشعرك ببعض من الفهم لملفات إطار العمل وما هي أهم الملفات والاكثرها إستخدماً خلال تطوير المواقع . 

كما يمكنك الإستفسار والسؤال في التعليقات عن كل الأمور الغير واضحة لك وسوف يجيبك المدربون على  توضيح كل ما هو صعب لديك . 

مسار اطار العمل Hugo ، هو مسار متقدم ويتطلب بعض الخبرة والممارسة في لغات البرمجة والتصميم. لا تقلق إذا واجهت صعوبة في فهمه ، فهذا أمر طبيعي ولا يعني أنك لا تستطيع التقدم.

إذا كان صعبًا عليك فهم مسار اطار العمل Hugo، فمن الممكن ترك هذا المسار مؤقتًا والانتقال إلى مسار آخر في الدورة، حتى تعود إلى المسار لاحقًا.

هذه بعض الأشياء للمساعدة في فهم مسار اطار العمل Hugo:

1.  تفاعل مع المدرب وقم بالإستفسار والسؤال في التعليقات أسفل كل درس إذا كنت لا تفهم شيئًا محددًا، وسوف يجيبك المدربون علي أي إستفسار.
2.  استخدم مصادر إضافية لتعلم اطار العمل Hugo، مثل الكتب أو المدونات التعليمية، التي يمكنك العثور عليها عبر الإنترنت.

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

سأحاول توضيح بعض الأمور لك.

 إطار العمل Hugo هو إطار عمل يستخدم لبناء مواقع الويب السريعة والآمنة والسهلة الصيانة.

يتميز Hugo بكونه إطار عمل سريع وخفيف الوزن حيث أنه يستخدم لغة البرمجة Go والتي تعتبر من أسرع لغات البرمجة، ويستخدم Hugo أيضاً نظام تحديد الموقع الذي يعمل بشكل مشابه لـ WordPress ولكنه يوفر أداء أفضل وأمان أعلى.

وإطار Hugo و React و Vue.js جميعها تقنيات تطوير الواجهات الأمامية Front-end، ولكن لكل منها فلسفة ومميزات مختلفة:

فإطار Hugo هو إطار عمل موجه لإنشاء مواقع الويب الثابتة (static websites) بسرعة وسهولة.

حيث يستخدم Hugo لغة الترميز Markdown والقوالب (templates) وتوفريه السرعة والأمان، حيث أن موقع الويب الثابت لا يتطلب قواعد بيانات ديناميكية، مما يتيح أداءً سريعًا وأمانًا أفضل، ويستخدم Hugo في العادة لإنشاء المدونات والمواقع الشخصية ومواقع الأخبار وما إلى ذلك.

بينما React هو إطار عمل تم تطويره بواسطة Facebook وهو يستخدم تقنية تسمى "تجريد الواجهة" (interface abstraction)، والتي تسمح للمطورين ببناء مكونات الواجهة معيارية قابلة لإعادة الاستخدام، و يعتبر React واحدًا من أشهر إطارات العمل الحديثة ويستخدم في العديد من التطبيقات على الويب والجوال.

أما Vue.js هو إطار عمل تم تطويره من قبل Evan You وهو يستخدم تقنية تسمى "تكوين المكونات" (component composition)، والتي تسمح للمطورين ببناء واجهات مستخدم مرنة وسهلة الصيانة، ويتميز Vue.js بالبساطة والسهولة في التعلم والاستخدام، كما أنه يعد أحد أسرع إطارات العمل في الأداء.

 الفرق الرئيسي بين هذه التقنيات هو الغرض الذي تستخدم له، فإطار Hugo يستخدم لإنشاء المواقع الثابتة، في حين يتم استخدام React و Vue.js لإنشاء تطبيقات الويب الديناميكية والمتطورة، ولكل منها فلسفتها الخاصة ومميزاتها في الأداء.

وإليك شرح بسيط لأساسيات Hugo:

1- يمكنك إنشاء مشروع جديد في Hugo بالأمر التالي في محرر الأوامر:

hugo new site mysite

حيث "mysite" هو اسم المشروع الجديد.

2-  إنشاء صفحة جديدة بالأمر التالي:

hugo new posts/my-first-post.md

حيث "posts" هو مجلد الصفحات و "my-first-post.md" هو اسم الصفحة.

3- يمكنك تنسيق الصفحات باستخدام لغة الترميز Markdown. على سبيل المثال، إذا كنت تريد إضافة عنوان للصفحة، يمكنك استخدام "#" مع النص الذي تريد إضافته، مثل هذا:

# هذا هو عنوان الصفحة

كما يمكنك إضافة النص بسهولة بدون تنسيق.

4- يمكنك إضافة قوالب إلى مشروعك بسهولة.

قالب Hugo يستخدم لإنشاء الصفحات بشكل أوتوماتيكي. يمكنك إضافة قالب بإنشاء ملف HTML جديد في مجلد "layouts". على سبيل المثال، إذا كنت تريد إضافة قالب لصفحة الأرشيف، يمكنك إنشاء ملف HTML جديد بالاسم "archive.html" في مجلد "layouts".

5- باستطاعتك إضافة محتوى ديناميكي باستخدام قوالب Hugo. واستخدام متغيرات Hugo لإضافة محتوى ديناميكي. على سبيل المثال، إذا كنت تريد عرض عنوان الصفحة على الصفحة، يمكنك استخدام المتغير التالي:

{{ .Title }}

في المثال، يتم استخدام المتغير .Title لعرض عنوان الصفحة. وباستخدام هذه الطريقة يمكن إضافة المزيد من المحتوى الديناميكي، مثل المقالات، الصور، القوائم، والمزيد.

6-  إضافة ملفات CSS و JavaScript الخاصة بك في Hugo عن طريق إنشاء مجلد static ووضع الملفات داخله. بعد ذلك، يمكنك استخدام الرمز التالي لربط ملف CSS بصفحات Hugo:

<link rel="stylesheet" href="/css/style.css">

في المثال، يتم ربط ملف style.css الموجود في مجلد static/css بالصفحة.

7- إضافة صفحات جديدة إلى Hugo عن طريق إنشاء ملف Markdown جديد في مجلد content. بعد ذلك، يمكن إنشاء قالب جديد لعرض هذه الصفحة وربطها بالقائمة الرئيسية في الموقع.

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

قد تحتاج الي اعادة مشاهدة بعض الحلقات أو كلها حتي تتأكد من فهمك بالكامل، واذا كان هناك أي جزء محدد يصعب عليك فهمه أو واجهتك أي مشكلة فيمكنك السؤال في التعليقات وسيقوم المدربون بمساعدتك.

بالإضافة إلى ذلك، يمكنك العمل على مشاريع تطبيقية صغيرة باستخدام Hugo لتطبيق المفاهيم التي تعلمتها وتعزيز فهمك. قد يكون هذا العمل الملموس هو الطريقة الأفضل لتحسين مهاراتك وفهمك لـ Hugo.

وأيضاً قم بالإطلاع علي المقالات والنقاشات التالية: