كيفية استخدام القوالب المضمنة في Hugo: دليل خطوة بخطوة
نشرت: 2024-11-27يعد Hugo منشئ مواقع ثابتة قويًا يسمح للمطورين ومنشئي المحتوى بإنشاء مواقع ويب سريعة وقابلة للتطوير بسرعة. إحدى الميزات الأساسية لـ Hugo هي نظام القوالب الخاص بها، والذي يساعد في هيكلة المحتوى وتخصيص شكل ومظهر الموقع. إذا كنت مستخدمًا جديدًا لـ Hugo أو تريد الاستفادة من إمكاناته في إنشاء النماذج بشكل أكثر فعالية، فسيوضح لك هذا الدليل خطوة بخطوة كيفية استخدام القوالب المضمنة في Hugo.
ما هي القوالب في هوغو؟
القوالب في Hugo هي ملفات تحدد كيفية عرض المحتوى الموجود على موقعك. وهي مكونة من تعليمات برمجية خاصة بـ HTML وCSS وHugo، مما يسمح لك بتخصيص تخطيط موقع الويب الخاص بك. يمكن استخدام القوالب لأغراض متعددة، مثل إنشاء الرؤوس والتذييلات والصفحات الفردية والقوائم والمزيد.
يحتوي Hugo على قوالب مضمنة تشكل جزءًا من بنية السمات الخاصة به، كما يسمح لك بإنشاء قوالب مخصصة لمزيد من المرونة. يتم تطبيق هذه القوالب تلقائيًا استنادًا إلى نوع المحتوى وبنية عنوان URL والمتغيرات الأخرى، مما يسهل إدارة المواقع المعقدة.
الخطوة 1: تثبيت Hugo وإنشاء موقع جديد
قبل الغوص في القوالب، تحتاج أولاً إلى تثبيت Hugo وإعداد موقعك. إليك كيفية القيام بذلك:
- تثبيت هوغو :
- إذا لم تقم بتثبيت Hugo، فاتبع دليل التثبيت الرسمي لنظام التشغيل الخاص بك: تثبيت Hugo.
- إنشاء موقع Hugo جديد :
- قم بتشغيل الأمر التالي في جهازك الطرفي لإنشاء موقع جديد:
hugo new site mysite - سيؤدي هذا إلى إنشاء دليل جديد يسمى
mysiteمع بنية الملف الأساسية لمشروع Hugo الخاص بك.
- قم بتشغيل الأمر التالي في جهازك الطرفي لإنشاء موقع جديد:
الخطوة 2: إضافة موضوع
يعمل Hugo مع السمات لإدارة كيفية عرض المحتوى. يمكنك إما استخدام سمة موجودة من Hugo Themes أو إنشاء سمة مخصصة. للتبسيط، دعنا نستخدم سمة من مكتبة سمات Hugo.
- إضافة موضوع :
- يمكنك إضافة سمة عن طريق استنساخها في دليل
themes/. على سبيل المثال، دعونا نستخدم موضوع "Ananke":git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
- يمكنك إضافة سمة عن طريق استنساخها في دليل
- تكوين الموضوع :
- افتح ملف
config.tomlالخاص بك وقم بتعيين السمة:theme = "ananke"
- افتح ملف
الخطوة 3: فهم هيكل قالب Hugo
يعتمد نظام قوالب Hugo على لغة قوالب Go. تنقسم القوالب إلى عدة فئات حسب الغرض منها:
- القوالب الأساسية : هذه هي القوالب الشاملة التي تغلف المحتوى. غالبًا ما تتضمن أقسامًا شائعة مثل الرؤوس والتذييلات والتنقل.
- قوالب المحتوى : تحدد كيفية عرض أنواع المحتوى الفردية (على سبيل المثال، منشورات المدونة والصفحات والأقسام).
- قوالب القائمة : تتحكم هذه القوالب في كيفية عرض مجموعات المحتوى (على سبيل المثال، قائمة منشورات المدونة).
- القوالب الجزئية : هذه عبارة عن مقتطفات أصغر حجمًا قابلة لإعادة الاستخدام (على سبيل المثال، شريط التنقل أو التذييل) المضمنة في القوالب الرئيسية.
أدلة النماذج المشتركة
-
layouts/: يحتوي على كافة ملفات التخطيط مثلindex.htmlوsingle.htmlوما إلى ذلك. -
themes/: يحتوي على قوالب تأتي مع السمة التي اخترتها. -
content/: يخزن ملفات المحتوى الخاصة بك (عادةً ما تكون مكتوبة بلغة Markdown).
الخطوة 4: إنشاء قالب
دعنا نستكشف كيفية إنشاء قالب لصفحة وتعديله.
- إنشاء ملف محتوى جديد :
- لإنشاء صفحة جديدة (على سبيل المثال، مشاركة مدونة)، استخدم الأمر التالي:
hugo new posts/my-first-post.md - يؤدي هذا إلى إنشاء ملف Markdown جديد داخل
content/posts/مع المادة الأمامية (YAML أو TOML) وعنصر نائب للمحتوى الخاص بك.
- لإنشاء صفحة جديدة (على سبيل المثال، مشاركة مدونة)، استخدم الأمر التالي:
- إنشاء قالب للصفحات الفردية :
- في دليل
layouts، قم بإنشاء ملف باسمsingle.htmlداخلlayouts/_default/. سيتحكم هذا في كيفية عرض صفحات المحتوى الفردية.<!-- layouts/_default/single.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <article> {{ .Content }} </article> </main> </body> </html> - سيعرض هذا القالب عنوان ومحتوى أي صفحة تقوم بإنشائها.
- في دليل
- إنشاء قالب القائمة :
- وبالمثل، يمكنك إنشاء قالب قائمة لعرض عناصر محتوى متعددة (على سبيل المثال، قائمة المنشورات). قم بإنشاء
list.htmlفي دليلlayouts/_default/.<!-- layouts/_default/list.html --> <html> <head> <title>{{ .Title }}</title> </head> <body> <header> <h1>{{ .Title }}</h1> </header> <main> <ul> {{ range .Pages }} <li><a href="{{ .Permalink }}">{{ .Title }}</a></li> {{ end }} </ul> </main> </body> </html>
- وبالمثل، يمكنك إنشاء قالب قائمة لعرض عناصر محتوى متعددة (على سبيل المثال، قائمة المنشورات). قم بإنشاء
الخطوة 5: تخصيص القوالب
يمكنك تحسين القوالب الخاصة بك باستخدام مجموعة Hugo الغنية من وظائف القوالب. على سبيل المثال، يمكنك تضمين CSS مخصص، أو تكرار المتغيرات، أو تنسيق التواريخ:
- إضافة CSS : يمكنك ربط ملف CSS بالقالب الخاص بك:
<link rel="stylesheet" href="{{ "styles.css" | relURL }}"> - تنسيق التواريخ : استخدم وظيفة
dateلعرض التواريخ بتنسيق معين:<p>Published on: {{ .Date.Format "January 2, 2006" }}</p>
الخطوة 6: خدمة ومعاينة موقعك
بمجرد وضع النماذج الخاصة بك وإضافة المحتوى، يمكنك معاينة موقعك محليًا:
hugo server انتقل إلى http://localhost:1313 لعرض موقعك.
الأسئلة الشائعة حول قوالب هوغو
1. ما هو الغرض من دليل "التخطيطات" في Hugo؟
دليل layouts هو المكان الذي تقوم فيه بتخزين جميع ملفات القالب الخاصة بك في Hugo. يتم استخدامه لتحديد كيفية عرض أنواع المحتوى المختلفة (مثل المنشورات والصفحات والقوائم) على الواجهة الأمامية لموقعك. يتم تنظيم القوالب حسب النوع والموقع، مثل single.html لصفحات المحتوى الفردية و list.html لقوائم المحتوى.
2. هل يمكنني إنشاء القوالب المخصصة الخاصة بي في Hugo؟
نعم، يمكنك إنشاء قوالب مخصصة في Hugo. من خلال وضع القوالب الخاصة بك في دليل layouts ، يمكنك إنشاء قوالب متخصصة لأنواع محتوى أو أقسام معينة أو حتى عروض محتوى فريدة. يتيح لك Hugo أيضًا تجاوز القوالب الافتراضية من السمة التي اخترتها.
3. كيف يتعامل Hugo مع ملفات المحتوى والقوالب؟
يستخدم Hugo نظامًا يتم فيه إقران ملفات المحتوى (المكتوبة بتنسيق Markdown أو التنسيقات الأخرى) بالقوالب لتحديد كيفية عرضها. عندما تقوم بإنشاء محتوى (على سبيل المثال، منشور مدونة)، يبحث Hugo تلقائيًا عن القالب المناسب (على سبيل المثال، single.html ) ويعرض المحتوى باستخدام هذا القالب. يدعم Hugo أيضًا تنظيم المحتوى إلى أقسام، والتي يمكنها استخدام قوالب مختلفة.
4. ما هي القوالب الجزئية في هوغو؟
القوالب الجزئية هي مكونات قابلة لإعادة الاستخدام أو مقتطفات من HTML يمكن تضمينها في قوالب أخرى. على سبيل المثال، يمكن إنشاء رأس أو تذييل أو قائمة تنقل كأجزاء جزئية وتضمينها في قوالب متنوعة باستخدام {{ partial "header.html" . }} بناء الجملة. يساعد هذا في الحفاظ على مبادئ DRY (لا تكرر نفسك) ويجعل إدارة الموقع أسهل.
5. هل يمكنني استخدام قوالب Hugo ذات المظهر المخصص؟
نعم، يمكنك استخدام السمات المخصصة في Hugo. يمكنك إما إنشاء السمة الخاصة بك أو استخدام سمة موجودة من مستودع سمات Hugo. إذا كنت تستخدم سمة حالية، فيمكنك تجاوز قوالبها عن طريق إضافة قوالبك المخصصة في دليل layouts ، مما يسمح لك بتعديل أجزاء معينة من السمة دون تغيير البنية بأكملها.
باتباع هذه الخطوات وفهم نظام القوالب الخاص بـ Hugo، يمكنك إنشاء مواقع ويب قوية وقابلة للتخصيص. سواء كنت تستخدم قوالب مضمنة أو تنشئ قالبًا خاصًا بك، توفر Hugo المرونة والسرعة اللازمتين لتطوير المواقع الثابتة بسهولة.