التحول من WordPress إلى Hugo

عندما تم إصدار WordPress 5 ، كنت متحمسًا لاستخدام محرر Gutenberg لإنشاء كتل مخصصة ، حيث تحتوي المنشورات على مدونتي الشخصية على ميزتين يمكنني تحويلهما إلى كتلة ، مما يسهل إعداد المحتوى الخاص بي. لقد كان بالتأكيد شيئًا رائعًا ، ومع ذلك لا يزال يشعر بالانتفاخ.

في نفس الوقت تقريبًا ، بدأت في قراءة المزيد والمزيد عن مولدات المواقع الثابتة و JAMstack (أقنعني هذا المقال الذي كتبه كريس فرديناندي). من خلال المشاريع الجانبية الشخصية ، يمكنك نوعًا ما رفض مجموعة متنوعة من المشكلات ، ولكن كمحترف ، عليك التأكد من إخراجك بأفضل جودة ممكنة. أصبح الأداء والأمان وإمكانية الوصول أول الأشياء التي يجب التفكير فيها. يمكنك بالتأكيد تحسين WordPress ليكون سريعًا جدًا ، ولكن أسرع من موقع ثابت على شبكة CDN لا يحتاج إلى الاستعلام عن قاعدة البيانات ولا إنشاء صفحتك في كل مرة؟ ليس سهلا.

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

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

لاحظ أن كل هذا مجاني تمامًا ، وهو أمر مذهل جدًا إذا سألتني (على الرغم من أنه سيتعين عليك دفع مبلغ إضافي إذا كنت تستخدم كل مساحة تخزين LFS أو إذا كانت حركة المرور على موقعك مكثفة). أيضًا ، أكتب هذا من وجهة نظر مستخدم Bitbucket ، يعمل على جهاز Mac. قد تكون بعض الخطوات مختلفة قليلاً ولكن يجب أن تكون قادرًا على متابعتها ، بغض النظر عن الإعداد الذي تستخدمه.

ستحتاج إلى أن تكون مرتاحًا إلى حد ما مع HTML و CSS و JS و Git ومحطة الأوامر. قد يكون وجود بعض المفاهيم مع لغات القوالب مثل Liquid مفيدًا أيضًا ، لكننا سنراجع قوالب Hugo لتبدأ. ومع ذلك ، سأقدم أكبر قدر ممكن من التفاصيل!

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

1. تصدير المحتوى من WordPress
2. تحضير تصميم مدونتك
3. إنشاء مستودع جديد
4. تفعيل Git LFS (اختياري)
5. إنشاء الموقع على Netlify
6. التحضير لوسائط Netlify الكبيرة (اختياري)
7. إعداد Hugo على جهاز الكمبيوتر الخاص بك
8. إنشاء موضوعك المخصص
9. ملاحظات حول بناء جملة هوغو
10. المحتوى والبيانات
11. النشر على Netlify
12. إنشاء مجال مخصص
13. تحرير المحتوى على Netlify CMS

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

المتطلبات الأساسية

قبل أن نفعل أي شيء ، دعنا ننشئ مجلد مشروع حيث سيوجد كل شيء من أدواتنا إلى مستودعنا المحلي. سأسميها "WP2Hugo" (لا تتردد في تسميتها بأي شيء تريده).

سيستفيد هذا البرنامج التعليمي من بعض أدوات سطر الأوامر مثل npm و Git. إذا لم تكن لديك بالفعل ، فقم بتثبيتها على جهازك:

• قم بتثبيت Git
• قم بتثبيت Node.js و npm (يتضمن Node.js npm)
• تثبيت Homebrew (موصى به لمستخدمي macOS / Linux)

مع تثبيت هذه ، دعنا نبدأ!

1. تصدير المحتوى من WordPress

أولاً ، سنحتاج إلى تصدير المحتوى الخاص بك من WordPress: المنشورات والصفحات والتحميلات. هناك عدد قليل من الأدوات المتاحة التي ذكرها Hugo ولكن بشكل شخصي ، نجح واحد منهم فقط: blog2md. يعمل هذا عن طريق تشغيل ملف JavaScript مع Node.js في محطة الأوامر الخاصة بك. يأخذ ملفات XML التي تم تصديرها بواسطة WordPress ، ويخرج ملفات Markdown بالهيكل الصحيح ، ويحول HTML إلى Markdown ويضيف ما يسمى Front Matter ، وهي طريقة لتنسيق البيانات الوصفية في بداية كل ملف.

انتقل إلى مسؤول WordPress الخاص بك ، وافتح قائمة الأدوات ، القائمة الفرعية تصدير. يمكنك تصدير ما تريد من هناك. سأشير إلى الملف الذي تم تصديره باسم YOUR-WP-EXPORT.xml .

يمكنك تحديد البيانات التي تريد تصديرها بالضبط من مدونة WordPress الخاصة بك.

داخل مجلد WP2Hugo ، أوصي بإنشاء مجلد جديد باسم blog2md تضع فيه الملفات من أداة blog2md ، بالإضافة إلى تصدير XML من WordPress ( YOUR-WP-EXPORT.xml ). أيضًا ، قم بإنشاء مجلد جديد هناك يسمى أين ستذهب مشاركات out الخاصة بك. بعد ذلك ، افتح محطة الأوامر ، وانتقل باستخدام الأمر cd إلى مجلد "blog2md" الذي تم إنشاؤه حديثًا (أو اكتب cd بمسافة واسحب المجلد إلى الجهاز).

يمكنك الآن تشغيل الأوامر التالية للحصول على مشاركاتك:

 npm install node index.js w YOUR-WP-EXPORT.xml out

ابحث في دليل /WP2Hugo/blog2md/out للتحقق مما إذا كانت جميع منشوراتك (والصفحات المحتملة) موجودة. إذا كان الأمر كذلك ، فقد تلاحظ أن هناك شيئًا ما يتعلق بالتعليقات في الوثائق: كان لدي مدونة خالية من التعليقات ، لذا لم أكن بحاجة إلى أن يتم نقلها ، لكن Hugo يقدم العديد من الخيارات للتعليقات. إذا كان لديك أي تعليقات على WordPress ، فيمكنك تصديرها لإعادة تنفيذها لاحقًا من خلال خدمة متخصصة مثل Disqus.

إذا كنت معتادًا على استخدام JS ، فيمكنك تعديل ملف index.js لتغيير كيفية ظهور ملفات المنشور عن طريق تحرير وظيفة wordpressImport . قد ترغب في التقاط الصورة المميزة أو إزالة الرابط الثابت أو تغيير تنسيق التاريخ أو تعيين النوع (إذا كان لديك منشورات وصفحات). سيتعين عليك تكييفه وفقًا لاحتياجاتك ، ولكن عليك أن تعلم أن الحلقة ( posts.forEach(function(post){ ... }) ) تعمل من خلال جميع المنشورات من التصدير ، حتى تتمكن من التحقق من محتوى XML الخاص بـ كل مشاركة في تلك الحلقة وتخصيص المقدمة الخاصة بك.

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

بمجرد الانتهاء من تصدير ملفات Markdown ، يصبح المحتوى الخاص بك جاهزًا. الخطوة التالية هي تجهيز قالب WordPress الخاص بك للعمل في Hugo.

2. تحضير تصميم مدونتك

تحتوي مدونتي على تخطيط نموذجي مع رأس وشريط تنقل ومحتوى وشريط جانبي وتذييل - سهل الإعداد. بدلاً من نسخ أجزاء من قالب WordPress الخاص بي ، قمت بإعادة بنائه بالكامل من البداية للتأكد من عدم وجود أنماط غير ضرورية أو علامات غير مجدية. هذا هو الوقت المناسب لتطبيق تقنيات CSS الجديدة ( pssst… Grid رائع جدًا! ) وإعداد إستراتيجية تسمية أكثر اتساقًا (شيء مثل إرشادات CSS Wizardry). يمكنك أن تفعل ما تريد ، ولكن تذكر أننا نحاول تحسين مدونتنا ، لذلك من الجيد مراجعة ما لديك وتحديد ما إذا كان لا يزال يستحق الاحتفاظ به.

ابدأ بتقسيم مدونتك إلى أجزاء حتى تتمكن من رؤية ما يحدث بوضوح. سيساعدك هذا في هيكلة الترميز والأنماط الخاصة بك. بالمناسبة ، يمتلك Hugo القدرة المدمجة على ترجمة Sass إلى CSS ، لذلك لا تتردد في تقسيم هذه الأنماط إلى ملفات أصغر بقدر ما تريد!

عندما أقول بسيطًا ، أعني بسيطًا حقًا.

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

3. إنشاء مستودع جديد

الآن بعد أن انتهى الأمر ، نحتاج إلى إنشاء مستودع. سأفترض أنك سترغب في إنشاء مستودع جديد لهذا ، والذي سيكون فرصة رائعة لاستخدام Git LFS (نظام الملفات الكبيرة). السبب الذي أنصح به للقيام بذلك الآن هو أن تطبيق Git LFS عندما يكون لديك بالفعل مئات الصور ليس سلسًا. لقد فعلت ذلك ، لكنه كان صداعًا من المحتمل أن ترغب في تجنبه. سيوفر هذا أيضًا مزايا أخرى في المستقبل مع Netlify.

بينما سأفعل كل هذا عبر Bitbucket و Git GUI الخاص بهم ، Sourcetree ، يمكنك فعل ذلك تمامًا باستخدام GitHub و GitLab وأدوات سطح المكتب الخاصة بهم. يمكنك أيضًا القيام بذلك مباشرة في محطة الأوامر ، لكني أحب أتمتة العملية وتبسيطها قدر الإمكان ، مما يقلل من مخاطر ارتكاب أخطاء سخيفة.

عندما تنشئ مستودعك الجديد على منصة Git التي تختارها ، أنشئ مجلدًا فارغًا داخل مجلد مشروعك المحلي (WP2Hugo) ، على سبيل المثال hugorepo ، ثم افتح محطة الأوامر أو أداة Git GUI وقم بتهيئة مستودع Git المحلي ؛ بعد ذلك ، اربطه بالمستودع البعيد (يمكنك عادةً العثور على الأمر الدقيق لاستخدامه في المستودع البعيد الذي تم إنشاؤه حديثًا).

أوصي بإنشاء فرع dev (أو stage ) بحيث يتم استخدام الفرع الرئيسي بشكل صارم لعمليات نشر الإنتاج. سيؤدي أيضًا إلى تقييد الإنشاءات الجديدة التي يتم إنشاؤها فقط عند الانتهاء من سلسلة محتملة من التغييرات. يمكن إنشاء فرع محليًا أو على صفحة الويب البعيدة للمستودع الخاص بك.

يسهل GitHub إنشاء فرع بالنقر فوق مبدل الفرع وكتابة اسم جديد. في GitLab ، تحتاج إلى فتح قائمة "Plus" المنسدلة للوصول إلى الخيار. يتطلب منك Bitbucket فتح قائمة "Plus" الموجودة على اليسار لفتح القائمة المنسدلة والنقر فوق "إنشاء فرع" في قسم "Get to work".

4. تفعيل Git LFS (اختياري)

Git Large File System هي ميزة Git تتيح لك حفظ الملفات الكبيرة بطريقة أكثر فاعلية ، مثل مستندات Photoshop وأرشيفات ZIP والصور في حالتنا. نظرًا لأن الصور قد تحتاج إلى تعيين إصدارات ولكنها ليست رمزًا دقيقًا ، فمن المنطقي تخزينها بشكل مختلف عن الملفات النصية العادية. الطريقة التي تعمل بها هي تخزين الصورة على خادم بعيد ، وسيكون الملف الموجود في المستودع الخاص بك عبارة عن ملف نصي يحتوي على مؤشر إلى هذا المورد البعيد.

للأسف ، ليس خيارًا تنقر عليه فقط لتمكينه. يجب عليك إعداد المستودع الخاص بك لتنشيط LFS وهذا يتطلب بعض العمل محليًا. مع تثبيت Git ، تحتاج إلى تثبيت امتداد Git-LFS:

 git lfs install

إذا لم يعمل هذا الأمر من أجلك مثلي ، فجرب بديل Homebrew (لنظام التشغيل macOS أو Linux):

 brew install git-lfs

بمجرد الانتهاء من ذلك ، سيتعين عليك تحديد الملفات التي تريد تتبعها في المستودع الخاص بك. سأستضيف جميع الصور التي قمت بتحميلها في مجلد /upload WordPress في مجلد يحمل نفس الاسم في إعداد Hugo الخاص بي ، باستثناء أن هذا المجلد سيكون داخل مجلد /static (والذي سيحل إلى الجذر بمجرد تجميعه). حدد هيكل المجلد الخاص بك ، وتتبع ملفاتك بالداخل:

 git lfs track "static/uploads/*"

سيؤدي هذا إلى تتبع أي ملف داخل مجلد /static/uploads . يمكنك أيضًا استخدام ما يلي:

 git lfs track "*.jpg"

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

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

دعنا الآن نلقي نظرة على Netlify.

5. إنشاء الموقع على Netlify

في هذه المرحلة ، تم إعداد المستودع الخاص بك ، بحيث يمكنك المضي قدمًا وإنشاء حساب على Netlify. يمكنك حتى تسجيل الدخول باستخدام حساب GitHub أو GitLab أو Bitbucket إذا أردت. بمجرد دخولك إلى لوحة القيادة ، انقر فوق الزر "موقع جديد من Git" في الزاوية اليمنى العليا ، وقم بإنشاء موقع Netlify الجديد الخاص بك.

ملاحظة : يمكنك ترك جميع الخيارات بقيمها الافتراضية في الوقت الحالي.

حدد موفر Git الخاص بك: سيؤدي هذا إلى فتح نافذة منبثقة لمصادقتك. عند الانتهاء من ذلك ، ستغلق النافذة وستظهر لك قائمة بالمستودعات على موفر Git الذي يمكنك الوصول إليه. حدد الريبو الذي تم إنشاؤه حديثًا وتابع. سيُطلب منك بعض الأشياء ، والتي يمكنك ترك معظمها افتراضيًا لأن جميع الخيارات قابلة للتعديل لاحقًا.

في الوقت الحالي ، في إعدادات الموقع ، انقر فوق "تغيير اسم الموقع" وقم بتسمية موقعك بأي شيء تريده - chris-smashing-hugo-blog . سنتمكن الآن من الوصول إلى الموقع عبر chris-smashing-hugo-blog.netlify.com : صفحة 404 جميلة!

6. التحضير لوسائط Netlify الكبيرة (اختياري)

إذا قمت بإعداد Git LFS وخططت لاستخدام Netlify ، فستحتاج إلى اتباع هذه الخطوات. إنه معقد بعض الشيء ولكنه يستحق ذلك بالتأكيد: سيمكنك من تعيين سلاسل الاستعلام على عناوين URL للصور التي سيتم تحويلها تلقائيًا.

لنفترض أن لديك رابطًا إلى صورة .jpg وهي صورة تبلغ 900 × 1600 بكسل. باستخدام Netlify Large Media ، يمكنك استدعاء الملف portrait.jpg؟ nf_resize = fit & w = 420 ، والذي سيتناسب مع حجمه. إذا حددت كلاً من w و h ، وقمت بتعيين nf_resize=smartcrop ، فسيتم تغيير حجمها عن طريق الاقتصاص للتركيز على نقطة الاهتمام بالصورة (على النحو الذي تحدده خوارزمية خيالية ، ويعرف أيضًا باسم سحر دماغ الروبوت! ). أجد أن هذه طريقة رائعة للحصول على صور مصغرة مثل تلك التي ينشئها WordPress ، دون الحاجة إلى عدة ملفات لصورة على مستودعي.

إذا كان هذا يبدو جذابًا لك ، فلنقم بإعداده!

الخطوة الأولى هي تثبيت واجهة سطر أوامر Netlify (CLI) عبر npm:

 npm install netlify-cli -g

إذا نجح الأمر ، فيجب أن ينتج عن تشغيل الأمر netlify معلومات حول الأداة.

ستحتاج بعد ذلك إلى التأكد من وجودك في مجلد المستودع المحلي (الذي سميته "hugorepo" سابقًا) ، وتنفيذ:

 netlify login

تفويض الرمز المميز. بعد ذلك ، سيتعين علينا تثبيت المكون الإضافي Netlify Large Media. يركض:

 netlify plugins:install netlify-lm-plugin netlify lm:install

يجب أن يكون هناك سطر أوامر معروض في نهاية الرسالة الناتجة يجب عليك نسخه (والذي يجب أن يبدو مثل / المستخدمين / YOURNAME/.netlify/helper/ /Users/YOURNAME/.netlify/helper/path.bash.inc على نظام التشغيل Mac) - قم بتشغيله. لاحظ أن Keychain قد تطلب منك كلمة مرور مسؤول جهازك على macOS.

الخطوة التالية هي ربط Netlify:

 netlify link

يمكنك تقديم اسم موقعك هنا (لقد قدمت اسم chris-smashing-hugo-blog الذي قدمته سابقًا). مع وجود هذا في مكانه ، تحتاج فقط إلى إعداد ميزة الوسائط الكبيرة عن طريق تنفيذ ما يلي:

 netlify lm:setup

قم بتنفيذ هذه التغييرات الجديدة على المستودع المحلي الخاص بك ، وادفعها إلى فرع التطوير عن بُعد. لقد واجهت بعض الأخطاء مع Sourcetree و Keychain على غرار git "credential-netlify" is not a git command . إذا كانت هذه هي حالتك ، فحاول الدفع يدويًا باستخدام هذه الأوامر:

 git add -A git commit -m "Set up Netlify Large media" git push

إذا لم يفلح ذلك ، فقد تحتاج إلى تثبيت مساعد بيانات اعتماد Netlify. إليك كيفية القيام بذلك باستخدام Homebrew:

 brew tap netlify/git-credential-netlify brew install git-credential-netlify

حاول دفع الالتزام الآن (إما باستخدام واجهة المستخدم الرسومية أو محطة الأوامر): يجب أن تعمل!

ملاحظة : إذا قمت بتغيير كلمة مرور Netlify الخاصة بك ، فقم بتشغيل netlify logout netlify وتسجيل netlify login إلى netlify مرة أخرى.

قد تسأل: "كل هذا ، وما زلنا لم نقم بتهيئة Hugo Build الخاص بنا؟" نعم ، أعلم ، لقد استغرق الأمر بعض الوقت ولكن جميع الاستعدادات للانتقال قد اكتملت. يمكننا الآن إعداد مدونة Hugo الخاصة بنا!

7. إعداد Hugo على جهاز الكمبيوتر الخاص بك

ستحتاج أولاً إلى تثبيت Hugo على جهاز الكمبيوتر الخاص بك باستخدام أي من الخيارات المتوفرة. سأستخدم Homebrew ولكن يمكن لمستخدمي Windows استخدام Scoop أو Chocolatey أو تنزيل حزمة مباشرة.

 brew install hugo

ستحتاج بعد ذلك إلى إنشاء موقع Hugo جديد ولكنه لن يحب إعداده في مجلد غير فارغ. الخيار الأول: يمكنك إنشاؤه في مجلد جديد ونقل محتوياته إلى مجلد المستودع المحلي:

 hugo new site your_temporary_folder

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

 hugo new site . --force

لديك الآن موقع Hugo ، يمكنك تطويره باستخدام هذا الأمر:

 hugo server

ستحصل على معاينة محلية على localhost المحلي. للأسف ، ليس لديك محتوى ولا موضوع خاص بك. لا داعي للقلق ، سنقوم بإعداد ذلك قريبًا حقًا!

دعنا أولاً نلقي نظرة على ملف التكوين ( config.toml في حالتي): لنقم بإعداد اسم المدونة وعنوان URL الأساسي (يجب أن يتطابق هذا مع عنوان URL على لوحة معلومات Netlify الخاصة بك):

 title = "Chris' Smashing Hugo Blog" baseURL = "https://chris-smashing-hugo-blog.netlify.com"

ستتم الكتابة فوق هذا الارتباط أثناء التطوير محليًا ، لذلك يجب ألا تتعرض لأخطاء 404.

دعونا نعطي Hugo مقالاتنا المصدرة بتنسيق Markdown. يجب أن يكونوا جالسين في /WP2Hugo/blog2md/out من الخطوة الأولى. في مجلد Hugo (المعروف أيضًا باسم دليل المستودع المحلي) ، قم بالوصول إلى مجلد content وأنشئ مجلدًا فرعيًا باسم posts . ضع ملفات Markdown الخاصة بك هناك ، ثم دعنا نقوم بإعداد سمة.

8. إنشاء السمة المخصصة الخاصة بك

بالنسبة لهذه الخطوة ، أوصي بتنزيل Saito boilerplate ، وهو عبارة عن سمة بها جميع الأجزاء التي ستحتاجها للبدء (ولا توجد أنماط) - وهي نقطة انطلاق مفيدة للغاية. يمكنك بالطبع إلقاء نظرة على هذه المجموعة من السمات الجاهزة لـ Hugo إذا كنت تريد تخطي هذا الجزء من العملية. الامر يرجع لك!

من مجلد المستودع المحلي ، انسخ السمة إلى themes/saito :

 git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito

يمكنك إعادة تسمية هذا المجلد إلى أي شيء تريده ، مثل cool-theme . سيتعين عليك إخبار تهيئة Hugo الخاصة بك بالموضوع الذي تريد استخدامه عن طريق تحرير ملف config.toml / yaml / json . قم بتحرير قيمة السمة إلى saito أو cool-theme أو أيًا كان اسم مجلد النسق الخاص بك. يجب أن تعرض المعاينة الآن عنوان مدونتك مع سطر حقوق النشر. إنها بداية ، أليس كذلك؟

افتح ملف تخطيط السمة / parts / home.html وقم بتحريره لعرض المحتوى الخاص بك ، مع تحديد العناصر الخمسة الأولى من نوع posts (داخل content/posts/ المجلد) ، مع range ، first where :

 <div class="container"> {{ range first 5 (where .Paginator.Pages "Type" "posts") }} <article class="post post--{{ .Params.class }}"> <h2 class="post__title">{{ .Title }}</h2> <section class="post__content"> {{ .Content }} </section> </article> {{ end }} </div>

أصبح المحتوى الخاص بك مرئيًا الآن ، بأبسط الطرق. حان الوقت لجعله ملكك - دعنا نتعمق!

القوالب مع هوغو

يمكنك أولاً قراءة مقدمة قالب Hugo إذا كنت ترغب في ذلك ، لكنني سأحاول استعراض بعض الأساسيات التي ستساعدك على فهم الأساسيات.

يتم تعريف جميع العمليات في Hugo داخل المحددات: الأقواس المزدوجة المتعرجة (على سبيل المثال {{ .Title }} ) ، والتي من المفترض أن تكون مألوفة إذا كنت قد فعلت القليل من القوالب من قبل. إذا لم تكن قد فعلت ذلك ، فكر في الأمر كطريقة لتنفيذ العمليات أو إدخال القيم في نقطة معينة في ترميزك. بالنسبة للكتل ، فإنها تنتهي بعلامة {{ end }} ، لجميع العمليات باستثناء الرموز القصيرة.

تحتوي السمات على مجلد layout يحتوي على أجزاء التخطيط. سيكون المجلد _default هو نقطة بداية Hugo ، حيث أن baseof.html ( لقد خمنت ذلك! ) هو أساس التخطيط الخاص بك. سوف يستدعي كل مكون ، يسمى "الأجزاء" (المزيد عن هذا في توثيق Hugo حول النموذج الجزئي) ، على غرار الطريقة التي ستستخدمها في include PHP ، والتي ربما تكون قد شاهدتها بالفعل في قالب WordPress الخاص بك. يمكن للجزئيات أن تستدعي جزئيات أخرى - فقط لا تجعلها حلقة لا نهائية.

يمكنك استدعاء جزء بـ {{ partial "file.html" . }} {{ partial "file.html" . }} . القسم partial بسيط جدًا ، لكن القسمين الآخرين قد يحتاجان إلى الشرح. قد تتوقع أن تكتب parts / file.html ولكن نظرًا لأن جميع الأجزاء يجب أن تكون في مجلد parts "، يمكن لـ Hugo العثور على هذا المجلد على ما يرام. بالطبع ، يمكنك إنشاء مجلدات فرعية داخل مجلد "الجزئيات" إذا كنت بحاجة إلى مزيد من التنظيم.

ربما تكون قد لاحظت نقطة طائشة: هذا هو السياق الذي تقوم بنقله إلى الجزء الخاص بك. إذا كانت لديك قائمة جزئية ، وقائمة بالارتباطات والتسميات ، فيمكنك تمرير تلك القائمة إلى الجزئية حتى تتمكن فقط من الوصول إلى تلك القائمة ، ولا شيء آخر. سأتحدث أكثر عن هذه النقطة المراوغة في القسم التالي.

ملف baseof.html الخاص بك عبارة عن غلاف يستدعي جميع الأجزاء المختلفة اللازمة لعرض تخطيط مدونتك. يجب أن يحتوي على حد أدنى من HTML والكثير من الأجزاء الجزئية:

 <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> <head> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head.html" . }} </head> <body> {{ partial "header.html" . }} {{ partial "nav.html" . }} <main> {{ block "main" . }}{{ end }} </main> <aside> {{ partial "sidebar.html" . }} </aside> {{ partial "footer.html" . }} </body> </html>

{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }} سطر مختلف لأنه كتلة معرّفة بقالب يعتمد على محتوى الصفحة الحالية (الصفحة الرئيسية ، صفحة مشاركة واحدة ، إلخ) باستخدام {{ define "main" }} .

أوراق الأنماط

في المظهر الخاص بك ، قم بإنشاء مجلد باسم assets حيث سنضع مجلد css فيه. سيحتوي على ملفات SCSS الخاصة بنا ، أو ملف CSS موثوق. الآن ، يجب أن يكون هناك ملف css.html في مجلد partials (والذي يتم استدعاؤه بواسطة head.html ). لتحويل Sass / SCSS إلى CSS ، وتقليل ورقة الأنماط ، سنستخدم هذه السلسلة من الوظائف (باستخدام بنية Hugo Pipes بدلاً من التفاف الوظائف حول بعضها البعض):

 {{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

كمكافأة - منذ أن جاهدت للعثور على إجابة مباشرة - إذا كنت تريد استخدام Autoprefixer ، فإن Hugo ينفذ أيضًا PostCSS. يمكنك إضافة دالة أنبوب إضافية بين toCSS minify السطر الأول ، مثل:

 {{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

قم بإنشاء ملف "postcss.config.js" في جذر مدونة Hugo الخاصة بك ، وقم بتمرير الخيارات ، مثل:

 module.exports = { plugins: { autoprefixer: { browsers: [ "> 1%", "last 2 versions" ] } }, }

والمعزوفة! من Sass إلى CSS مسبوقة ومصغرة. وظيفة أنبوب "بصمة الإصبع" هي التأكد من أن اسم الملف فريد ، مثل style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css . إذا قمت بتغيير ورقة الأنماط ، تتغير بصمة الإصبع ، وبالتالي يكون اسم الملف مختلفًا ، وبالتالي تحصل على حل فعال لكسر ذاكرة التخزين المؤقت.

9. ملاحظات حول بناء جملة هوغو

أريد أن أتأكد من فهمك لـ "النقطة" ، وهي الطريقة التي يضبط بها Hugo متغيرات (أو بكلماتي الخاصة ، توفر مرجعًا سياقيًا) التي ستستخدمها في القوالب الخاصة بك.

النقطة والتحديد

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

لنفترض أن هذا موجود في نموذجنا الموجود في head.html جزئيًا:

 {{ with .Site.Title }} {{ نهاية }}

على الرغم من أننا نقوم بتشغيل هذا في النطاق الرئيسي ، فإن قيمة النقطة تتغير بناءً على السياق ، وهو .Site.Title في هذه الحالة. لذلك ، لطباعة القيمة ، ما عليك سوى الكتابة . بدلا من إعادة كتابة اسم المتغير مرة أخرى. لقد أربكني هذا في البداية ولكنك تعتاد على ذلك سريعًا حقًا ، ويساعد في تقليل التكرار نظرًا لأنك قمت بتسمية المتغير مرة واحدة فقط. إذا لم ينجح شيء ما ، فعادةً ما يكون ذلك بسبب محاولتك استدعاء متغير عالي المستوى داخل كتلة محددة النطاق.

إذن كيف تستخدم نطاق المستوى الأعلى داخل كتلة محددة النطاق؟ حسنًا ، لنفترض أنك تريد التحقق من قيمة ما ولكنك تريد استخدام قيمة أخرى. يمكنك استخدام $ والذي سيكون دائمًا نطاق المستوى الأعلى:

 {{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

داخل حالتنا ، النطاق هو .Site.Params.InfoEnglish ولكن لا يزال بإمكاننا الوصول إلى القيم خارجها باستخدام $ ، حيث لن يعمل استخدام .Site.Params.DescriptionEnglish بشكل حدسي لأنه سيحاول حل إلى .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish .

المتغيرات المخصصة

يمكنك تعيين المتغيرات باستخدام الصيغة التالية:

 {{ $customvar := "custom value" }}

يجب أن يبدأ اسم المتغير بـ $ ويجب أن يكون عامل الإسناد := إذا كانت هذه هي المرة الأولى التي يتم فيها تعيينه ، = بخلاف ذلك:

 {{ $customvar = "updated value" }}

المشكلة التي قد تواجهها هي أن هذا لن يحدث خارج النطاق ، وهو ما يقودني إلى نقطتي التالية.

خدش

تتيح لك وظيفة Scratch تعيين القيم المتوفرة في جميع السياقات. لنفترض أن لديك قائمة أفلام في ملف movies.json :

 [ { "name": "The Room", "rating": 4 }, { "name": "Back to the Future", "rating": 10 }, { "name": "The Artist", "rating": 7 } ]

الآن ، تريد تكرار محتويات الملف وتخزين المحتوى المفضل لديك لاستخدامه لاحقًا. هنا يأتي دور سكراتش:

 {{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }} {{ range .Site.Data.movies }} {{ if ge .rating 10 }} {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }} {{ $.Scratch.Set "favouriteMovie" .name }} {{ end }} {{ end }} [...] My favourite movie is {{ .Scratch.Get "favouriteMovie" }} <!-- Expected output => My favourite movie is Back to the Future -->

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

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

الشرطية

يختلف بناء الجملة للشروط قليلاً عما تتوقعه - من منظور JavaScript أو PHP. هناك ، في جوهرها ، وظائف تأخذ وسيطتين (الأقواس اختيارية إذا اتصلت بالقيم مباشرة):

 {{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

هناك العديد من هذه الوظائف:

• eq الشيكات من أجل المساواة
• ne لعدم المساواة
• gt تحقق من أكبر من
• تحقق ge من قيمة أكبر من أو تساوي
• lt الشيكات لأقل من
• le الشيكات أقل من أو يساوي

ملاحظة : يمكنك معرفة كل شيء عن الوظائف التي يوفرها Hugo في المرجع السريع لوظائف Hugo.

مسافة بيضاء

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

لنفترض أن لدينا هذا الجزئي الافتراضي:

 {{ if eq .Site.LanguageCode "en-us" }} <p>Welcome to my blog!</p> {{ end }} <img src="/uploads/portrait.jpg" alt="Blog Author">

إذا لم يكن رمز لغة الموقع هو en-us ، فسيكون هذا هو ناتج HTML (لاحظ الأسطر الثلاثة الفارغة قبل علامة الصورة):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

يوفر Hugo بناء جملة لمعالجة هذا الأمر بواصلة بجانب الأقواس المتعرجة داخل المحدِّد. {{- سيقطع المسافة البيضاء قبل الأقواس ، و -}} سيقطع المسافة البيضاء بعد الأقواس. يمكنك استخدام أحدهما أو كليهما في نفس الوقت ، ولكن تأكد فقط من وجود مسافة بين الواصلة والعملية داخل المحدد.

على هذا النحو ، إذا كان قالبك يحتوي على ما يلي:

 {{- if eq .Site.LanguageCode "en-us" -}} <p>Welcome to my blog!</p> {{- end -}} <img src="/uploads/portrait.jpg" alt="Blog Author">

... ثم سينتج عن الترميز هذا (بدون أسطر فارغة):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

يمكن أن يكون هذا مفيدًا في المواقف الأخرى مثل العناصر ذات display: inline-block يجب ألا تحتوي على مسافة بيضاء بينهما. بالمقابل ، إذا كنت تريد التأكد من أن كل عنصر في السطر الخاص به في الترميز (على سبيل المثال في حلقة {{ range }} ) ، فسيتعين عليك وضع الواصلات بعناية لتجنب الاقتطاع "الجشع" للمسافات البيضاء.

سيخرج المثال أعلاه ما يلي إذا تطابق رمز لغة الموقع مع " en-us " (لا مزيد من فواصل الأسطر بين علامتي p و img ):

 <p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. المحتوى والبيانات

يتم تخزين المحتوى الخاص بك كملفات Markdown ، ولكن يمكنك استخدام HTML أيضًا. سيعرضه Hugo بشكل صحيح عند بناء موقعك.

ستستدعي صفحتك الرئيسية تخطيط _default/list.html ، والذي قد يبدو كالتالي:

 {{ define "main" }} {{ partial "list.html" . }} {{ end }}

تستدعي الكتلة الرئيسية list.html جزئية مع سياق . ، المعروف أيضًا باسم المستوى الأعلى. قد تبدو list.html الجزئية كما يلي:

 {{ define "main" }} <ol class="articles"> {{ range .Paginator.Pages }} <li> <article> <a href="{{ .URL }}"> <h2>{{ .Title }}</h2> <img src="{{ .Params.featuredimage }}" alt=""> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2 2006" }} </time> </a> </article> </li> {{ end }} </ol> {{ partial "pagination.html" . }} {{ end }}

الآن لدينا قائمة أساسية بمقالاتنا ، والتي يمكنك تصميمها كما يحلو لك! يتم تحديد عدد المقالات لكل صفحة في ملف التكوين ، مع ترقيم الصفحات paginate = 5 (في TOML).

قد تكون مرتبكًا تمامًا كما كنت في تنسيق التاريخ في Hugo. في كل مرة يتم فيها تعيين الوحدة لرقم (الشهر الأول ، اليوم الثاني ، الساعة الثالثة ، إلخ) كان الأمر أكثر منطقية بالنسبة لي بمجرد أن رأيت التفسير المرئي أدناه الذي توفره وثائق لغة Go - وهو نوع غريب ، ولكن نوع من الذكاء أيضًا!

 Jan 2 15:04:05 2006 MST => 1 2 3 4 5 6 -7

كل ما تبقى الآن هو عرض منشورك على صفحة واحدة. يمكنك تعديل post.html جزئيًا لتخصيص تنسيق مقالتك:

 <article> <header> <h1>{{ .Title }}</h1> <p> Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time> </p> </header> <section> {{ .Content }} </section> </article>

وهذه هي الطريقة التي تعرض بها المحتوى الخاص بك!

إذا كنت ترغب في تخصيص عنوان URL ، فقم بتحديث ملف التكوين الخاص بك عن طريق إضافة خيار [permalinks] (TOML) ، والذي في هذه الحالة سيجعل عناوين URL تبدو مثل my-blog.com/post-slug/ :

 [permalinks] posts = ":filename/"

إذا كنت ترغب في إنشاء موجز RSS للمحتوى الخاص بك (لأن RSS رائعة) ، أضف ما يلي في ملف تكوين موقعك (سيعرض قالب Saito الافتراضي العلامات المناسبة في head.html إذا تم اكتشاف هذه الخيارات):

 rssLimit = 10 [outputFormats] [outputFormats.RSS] mediatype = "application/rss" baseName = "feed"

ولكن ماذا لو كان لديك نوع من المحتوى خارج المنشور؟ وهنا يأتي دور قوالب البيانات: يمكنك إنشاء ملفات JSON واستخراج بياناتها لإنشاء قائمتك أو عنصر في الشريط الجانبي. YAML و TOML هما أيضًا خياران ولكنهما أقل قابلية للقراءة باستخدام البيانات المعقدة (مثل الكائنات المتداخلة). يمكنك بالطبع تعيين هذا في ملف تكوين موقعك ، لكنه - بالنسبة لي - أقل سهولة في التنقل وأقل تسامحًا.

لنقم بإنشاء قائمة "بالمواقع الرائعة" التي قد ترغب في عرضها في الشريط الجانبي - مع ارتباط وتسمية لكل موقع كمصفوفة في JSON:

 { "coolsites": [ { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" }, { "link": "https://gohugo.io/", "label": "Hugo" }, { "link": "https://netlify.com", "label": "Netlify" } ] }

يمكنك حفظ هذا الملف في جذر المستودع الخاص بك ، أو جذر النسق الخاص بك ، داخل مجلد data ، مثل /data/coolsites.json . بعد ذلك ، في sidebar.html الجزئي الخاص بك ، يمكنك التكرار عليه باستخدام range .Site.Data.coolsites :

 <h3>Cool Sites:</h3> <ul> {{ range .Site.Data.coolsites.coolsites }} <li><a href="{{ .link }}">{{ .label }}</a></li> {{ end }} </ul>

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

فكرة أخيرة حول البيانات وما شابه: أي شيء تضعه في مجلد Hugo /static سيكون متاحًا على الجذر ( / ) في الإصدار المباشر. الشيء نفسه ينطبق على مجلد الموضوع.

11. النشر على Netlify

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

قم بتنفيذ تغييراتك وادفعها إلى فرع التطوير عن بُعد ( dev ). توجه إلى Netlify بعد ذلك ، وقم بالوصول إلى إعدادات موقعك. سترى خيار "إنشاء ونشر". سنحتاج إلى تغيير بعض الأشياء هنا.

1. أولاً ، في قسم "إنشاء الإعدادات" ، تأكد من تعيين "أمر الإنشاء" على hugo وأن "نشر الدليل" قد تم تعيينه على الوضع public (الإعداد الافتراضي الذي يوصى بالاحتفاظ به في ملف تهيئة Hugo) ؛
2. بعد ذلك ، في قسم "نشر السياقات" ، قم بتعيين "فرع الإنتاج" إلى الفرع الرئيسي في المستودع الخاص بك. أقترح أيضًا تعيين "نشر الفرع" على "نشر فرع الإنتاج فقط" ؛
3. أخيرًا ، في قسم "متغيرات البيئة" ، قم بتحرير المتغيرات وانقر فوق "متغير جديد". سنقوم بتعيين بيئة Hugo على 0.53 مع الزوج التالي: اضبط المفتاح على HUGO_VERSION والقيمة على 0.53 .

انتقل الآن إلى المستودع البعيد الخاص بك وادمج فرع التطوير الخاص بك في فرعك الرئيسي: سيكون هذا هو الخطاف الذي سينشر مدونتك المحدثة (يمكن تخصيص هذا ولكن الافتراضي معقول بالنسبة لي).

بالعودة إلى لوحة معلومات Netlify الخاصة بك ، يجب أن تتضمن "عمليات نشر الإنتاج" الخاصة بموقعك نشاطًا جديدًا. إذا سارت الأمور على ما يرام ، فيجب معالجة هذه العملية وحلها إلى تصنيف "منشور". سيؤدي النقر فوق عنصر النشر إلى فتح نظرة عامة مع سجل العمليات. في الأعلى ، سترى "معاينة النشر". استمر ، انقر فوقه - أنت تستحقه. انه حي!

12. إنشاء مجال مخصص

امتلاك عنوان URL كـ my-super-site.netlify.com ليس من ذوقك ، وأنت تمتلك my-super-site.com بالفعل؟ فهمت. دعونا نغير ذلك!

توجه إلى مسجل المجال الخاص بك وانتقل إلى إعدادات DNS الخاصة بنطاقك. هنا ، سيتعين عليك إنشاء إدخال جديد: يمكنك إما تعيين سجل ALIAS / CNAME الذي يشير إلى my-super-site.netlify.com ، أو تعيين سجل A يوجه مجالك إلى موازن تحميل Netlify ، وهو 104.198.14.52 وقت كتابة هذا التقرير.

يمكنك العثور على أحدث المعلومات حول وثائق Netlify الخاصة بالمجالات المخصصة. سيكون عنوان IP لموازن التحميل في قسم إعدادات DNS ، ضمن "التكوين اليدوي لنظام أسماء النطاقات لنطاقات الجذر و www المخصصة".

عند الانتهاء من ذلك ، توجه إلى لوحة تحكم موقعك على Netlify وانقر على "إعدادات المجال" ، حيث سترى "إضافة مجال مخصص". أدخل اسم المجال الخاص بك للتحقق منه.

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

ملاحظة : يمكن لـ Netlify أيضًا التعامل مع كل شيء نيابة عنك إذا كنت ترغب في شراء مجال من خلالها. إنه أسهل ولكنه تكلفة إضافية.

بعد إعداد المجال المخصص الخاص بك ، في "إعدادات النطاق" ، قم بالتمرير لأسفل إلى قسم "HTTPS" وتمكين شهادة SSL / TLS. قد يستغرق الأمر بضع دقائق ولكنه سيمنحك شهادة مجانية: يعمل مجالك الآن على HTTPS.

13. تحرير المحتوى على Netlify CMS

إذا كنت ترغب في تحرير مقالاتك وتحميل الصور وتغيير إعدادات مدونتك كما تفعل على واجهة WordPress الخلفية ، فيمكنك استخدام Netlify CMS الذي يحتوي على برنامج تعليمي جيد جدًا متاح. إنه ملف واحد سيتعامل مع كل شيء نيابةً عنك (وهو غير مألوف للمولد: سيعمل مع Jekyll و Eleventy وما إلى ذلك).

تحتاج فقط إلى تحميل ملفين في مجلد:

• نظام إدارة المحتوى (ملف HTML واحد) ؛
• ملف التكوين (ملف YAML).

سيحتفظ الأخير بجميع إعدادات موقعك المحدد.

انتقل إلى مجلد Hugo root's /static وأنشئ مجلدًا جديدًا يمكنك الوصول إليه عبر my-super-site.com/FOLDER_NAME (سأتصل بمسؤول admin ). داخل مجلد admin هذا ، أنشئ ملف index.html عن طريق نسخ الترميز الذي يوفره Netlify CMS:

 <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>

الملف الآخر الذي ستحتاج إلى إنشائه هو ملف التكوين: config.yml . سيسمح لك بتحديد إعدادات موقعك (الاسم وعنوان URL وما إلى ذلك) حتى تتمكن من إعداد ما يجب أن تحتويه الصفحة الأمامية لمشاركاتك ، وكذلك كيف يجب أن تكون ملفات البيانات (إن وجدت) قابلة للتحرير. يعد إعداده أكثر تعقيدًا ، لكن هذا لا يعني أنه ليس بالأمر السهل.

إذا كنت تستخدم GitHub أو GitLab ، فابدأ ملف config.yml الخاص بك بـ:

 backend: name: git-gateway branch: dev # Branch to update (optional; defaults to master)

إذا كنت تستخدم Bitbucket ، فالأمر مختلف قليلاً:

 backend: name: bitbucket repo: your-username/your-hugorepo branch: dev # Branch to update (optional; defaults to master)

بعد ذلك ، بالنسبة لعمليات التحميل الخاصة بنا ، سيتعين علينا إخبار نظام إدارة المحتوى بمكان تخزينها:

 media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

عند إنشاء منشور جديد ، سينشئ نظام إدارة المحتوى الرابط الثابت لاسم الملف والذي يمكنك تخصيصه بثلاثة خيارات:

slug: encoding: "ascii" # You can also use "unicode" for non-Latin clean_accents: true # Removes diacritics from characters like e or a sanitize_replacement: "-" # Replace unsafe characters with this string

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

 collections: - name: "articles" # Used in routes, eg, /admin/collections/blog label: "Articles" # Used in the Netlify CMS user interface folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo create: true # Allow users to create new documents in this collection slug: "{{slug}}" # Filename template, eg, post-title.md fields: # The fields for each document, usually in front matter - {label: "Title", name: "title", widget: "string", required: true} - {label: "Draft", name: "draft", widget: "boolean", default: true } - {label: "Type", name: "type", widget: "hidden", default: "post" } - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"} - {label: "Featured Image", name: "featuredimage", widget: "image"} - {label: "Author", name: "author", widget: "string"} - {label: "Body", name: "body", widget: "markdown"} - name: 'coolsites' label: 'Cool Sites' file: 'data/coolsites.json' description: 'Website to check out' fields: - name: coolsites label: Sites label_singular: 'Site' widget: list fields: - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' } - { label: 'Site Name', name: 'label', widget: 'string' }

ملاحظة : يمكنك قراءة المزيد حول كيفية تكوين الحقول الفردية في وثائق Netlify CMS Widgets التي تتناول كل نوع من عناصر واجهة المستخدم وكيفية استخدامها - وهي مفيدة بشكل خاص لتنسيقات التاريخ.

المصادقة

آخر شيء يتعين علينا القيام به هو التأكد من أن المستخدمين المصرح لهم فقط يمكنهم الوصول إلى الواجهة الخلفية! يعد استخدام مصادقة موفر Git طريقة سهلة للقيام بذلك.

توجه إلى موقع Netlify الخاص بك وانقر فوق علامة التبويب "الإعدادات". ثم انتقل إلى "التحكم في الوصول" وهو الرابط الأخير في القائمة الموجودة على الجانب الأيسر. هنا ، يمكنك تكوين OAuth للتشغيل عبر GitHub أو GitLab أو Bitbucket من خلال توفير مفتاح وقيمة سرية محددة لحساب المستخدم الخاص بك (وليس في المستودع). سترغب في استخدام نفس موفر Git الذي تم حفظ الريبو الخاص بك عليه.

جيثب

انتقل إلى صفحة "الإعدادات" الخاصة بك على GitHub (انقر فوق الصورة الرمزية الخاصة بك للكشف عن القائمة) ، وقم بالوصول إلى "إعدادات المطور". انقر فوق "تسجيل تطبيق جديد" وقم بتوفير القيم المطلوبة:

• اسم مثل "Netlify CMS لمدونتي الفائقة" ؛
• عنوان URL للصفحة الرئيسية ، الرابط إلى موقع Netlify الخاص بك ؛
• وصف ، إذا كنت ترغب في ذلك ؛
• عنوان URL لمعاودة الاتصال بالتطبيق ، والذي يجب أن يكون " https://api.netlify.com/auth/done ".

حفظ ، وسترى معرّف العميل وسر العميل. قم بتوفيرها للتحكم في الوصول الخاص بـ Netlify.

جيت لاب

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

• اسم مثل "Netlify CMS لمدونتي الفائقة" ؛
• عنوان URI لإعادة التوجيه ، والذي يجب أن يكون " https://api.netlify.com/auth/done " ؛
• النطاقات التي يجب التحقق منها هي:
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

سيمنحك حفظ التطبيق الخاص بك معرّف التطبيق الخاص بك وسرّه ، والذي يمكنك الآن إدخاله في التحكم في الوصول إلى Netlify.

Bitbucket

توجه إلى إعدادات حساب المستخدم الخاص بك (انقر فوق الصورة الرمزية الخاصة بك ، ثم "إعدادات Bitbucket"). ضمن "إدارة الوصول" ، انقر على "OAth". في قسم "مستهلكو OAuth" ، انقر على "إضافة مستهلك". يمكنك ترك معظم الأشياء في قيمها الافتراضية باستثناء ما يلي:

• اسم مثل "Netlify CMS لمدونتي الفائقة" ؛
• عنوان URL لمعاودة الاتصال ، والذي يجب أن يكون " https://api.netlify.com/auth/done " ؛
• الأذونات التي يجب التحقق منها هي:
  • الحساب: بريد إلكتروني ، قراءة ، كتابة
  • المستودعات: قراءة ، كتابة ، إدارة
  • طلبات السحب: اقرأ ، اكتب
  • Webhooks: القراءة والكتابة

بعد الحفظ ، يمكنك الوصول إلى مفتاحك وسرك ، والذي يمكنك بعد ذلك توفيره مرة أخرى على Netlify's Access Control.

بعد تقديم الرموز ، انتقل إلى Netlify ، وابحث عن إعدادات الموقع. توجه إلى "الهوية" وقم بتمكين الميزة. يمكنك الآن إضافة موفر خارجي: حدد مزود Git وانقر على "تمكين".

إذا كنت بحاجة إلى تفاصيل إضافية ، فإن Netlify CMS لديه دليل مصادقة يمكنك قراءته.

يمكنك الآن الوصول إلى الواجهة الخلفية لموقع Netlify الخاص بك وتحرير المحتوى. كل تعديل هو التزام في الريبو الخاص بك ، في الفرع المحدد في ملف التكوين الخاص بك. إذا احتفظت بفرعك main كهدف لـ Netlify CMS ، فسيتم تشغيل بنية جديدة في كل مرة تقوم فيها بالحفظ. أكثر ملاءمة ، ولكن ليس نظيفًا مع "بين الدول".

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

يرجى أيضًا ملاحظة أن Git LFS هو شيء قمت بتثبيته محليًا ، لذا فإن الصور التي يتم تحميلها عبر Netlify CMS ستكون "طبيعية". إذا قمت بسحب الفرع البعيد محليًا ، فيجب تحويل الصور إلى LFS ، والتي يمكنك بعد ذلك الالتزام بها والدفع إلى فرعك البعيد. أيضًا ، لا يدعم Netlify CMS حاليًا LFS ، لذا لن يتم عرض الصورة في CMS ، لكنها ستظهر في الإصدار النهائي.

يوصى بقراءة : مولدات الموقع الثابتة مراجعة: Jekyll، Middleman، Roots، Hugo

خاتمة

ما مطية! في هذا البرنامج التعليمي ، تعلمت كيفية تصدير منشور WordPress الخاص بك إلى ملفات Markdown ، وإنشاء مستودع جديد ، وإعداد Git LFS ، واستضافة موقع على Netlify ، وإنشاء موقع Hugo ، وإنشاء المظهر الخاص بك وتحرير المحتوى باستخدام Netlify CMS . ليس سيئا جدا!

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

يستكشف! استمتع! مقالات!

مزيد من الموارد

• وثائق هوغو
  • تثبيت
  • بداية سريعة
  • إعدادات
  • القوالب
  • التصنيفات
  • الرموز القصيرة
  • Hugo على Netlify
• وثائق Netlify
  • المجالات المخصصة
  • DNS المُدار
  • netlify.toml نشر البرامج النصية
• وثائق Netlify CMS
  • الحاجيات
• بوابة LFS