الصفحة الرئيسية>كود مصدر ASP>فئات أخرى
تنزيل

موضوع هوغو للحد الأدنى. تستخدم Fiber الحد الأدنى من JavaScript وCSS حتى تتمكن من تحميل موقعك بشكل أسرع! يمتلك أيضًا واجهة مستخدم نظيفة وهي رائعة للعيون !!

جدول المحتويات

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

تثبيت

هناك طريقتان يمكن من خلالهما استخدام هذا الموضوع مع أي مواقع تعتمد على Hugo.

  1. استخدام وحدات Git الفرعية (مستحسن)
  2. تنزيل السمة مباشرةً إلى <hugo-site-root>/themes/

باستخدام الوحدة الفرعية

  1. قم بإنشاء موقعك باستخدام hugo new site SITE_NAME
  2. cd إلى SITE_NAME
  3. تهيئة git repo: git init . وهذا مطلوب لأنه يتعين علينا إضافة وحدة فرعية git.
  4. أضف وحدة فرعية عن طريق تشغيل git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
  5. الآن، قم بتشغيل خادم Hugo محليًا باستخدام hugo serve

إذا كان هناك تحديث في مستودع السمات، فيمكنك سحبه باستخدام git submodule update --remote

تحميل الموضوع مباشرة

استخدم هذه الطريقة إذا لم تتمكن من استخدام Git لسبب ما.

  1. قم بتنزيل هذا واستخرج محتواه إلى SITE_ROOT/themes/hugo-theme-fiber/ .
  2. ابدأ تشغيل Hugo محليًا عن طريق تنفيذ hugo serve من المحطة.

سمات

تحسين محركات البحث جاهز

يتم تحميل هذا المظهر بأدوات تحسين محركات البحث الأساسية بالإضافة إلى الحد الأدنى من بيانات JSON-LD من Schema.org

الرموز المختصرة

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

ASCIINEma

تضمين طاقم AsciiNema. الرمز القصير المطلوب استخدامه: {{< asciinema id="id of a public cast" >}}

هل يمكنني استخدام

يعرض هذا الرمز القصير أحدث البيانات من موقع caniuse.com. مفيدة لمطوري الويب. مثال: 

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

انقر لنسخ الرمز

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

ملاحظات جميلة

أي شيء تضعه داخل content/notes ، سيحصل على تعليقات توضيحية تقريبية. وهذا يجعل من السهل التعرف على الأشياء المهمة من الملاحظات.

يتم التحكم في التعليقات التوضيحية التقريبية باستخدام علامات مثل strong ، em ، strikethrough . لإنشاء إدخال notes جديد، يجب عليك أولاً إنشاء content/notes الدليل. ثم استخدم hugo new notes/file-name.md لإنشاء ملاحظة. سيحتوي هذا الملف على معلومات حول كيفية إضافة تعليقات توضيحية إلى الأشياء باستخدام العلامات المذكورة أعلاه.

لقطات الشاشة

إعداد الموضوع

محتوى القائمة في الصفحة الرئيسية

يمكن تكوين الصفحة الرئيسية بطريقتين مختلفتين. يمكنك إما إدراج القسم المفضل/الأهم لديك من دليل content .

أو ضع محتوى مخصصًا بداخله.

أو يمكنك القيام بالأمرين معًا! تأكد من إنشاء ملف content/_index.md له title خاصية داخل fromtmatter. خاصية title هذه مفيدة لتحسين محركات البحث. مثال: 

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here -->

قائمة المدونات والملاحظات وما إلى ذلك

لإنشاء قائمة بالمحتوى في الصفحة الرئيسية، تحتاج إلى تعيين متغير يسمى mainSections في ملف config.toml . مثال: 

[ params ]
mainSections = [ " posts " ]

قائمة المحتوى المخصص

لسرد محتوى مخصص، ما عليك سوى وضعه داخل content/_index.md مع المادة الأمامية المناسبة.

تسليط الضوء على الكود

بشكل افتراضي، لن يستخدم Hugo أي فئات. لكن هذا لن ينجح مع هذا الموضوع لأن بعض الميزات تعتمد على ذلك.

تحتاج إلى تشغيل فئات كتل التعليمات البرمجية. إليك كيفية القيام بذلك: 

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

عناصر القائمة

بشكل افتراضي، يوجد عنصر قائمة واحد فقط في القائمة العلوية. لإضافة المزيد من العناصر هناك، يحتاج المرء إلى تحديد عناصر القائمة داخل config.toml . فيما يلي مثال من config.toml الخاص بموقعي: 

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

عنوان الموقع

يتم التحكم في عنوان الموقع باتباع المعلمات في config.toml : 

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

كتابة المحتوى

كتابة الملاحظات

Notes هي نوع خاص مشفر في هذا الموضوع. ستحصل المحتويات من هذا النوع على تعليقات توضيحية تقريبية (مما يسهل إدارة الملاحظات).

قم بإنشاء صفحة ملاحظات باستخدام الأمر hugo new notes/your-filename.md لمعرفة كيفية استخدام التعليقات التوضيحية التقريبية داخل صفحة الملاحظات.

يتم تضمين النموذج الأصلي للملاحظات الرقيقة.

فرونتماتر

يستخدم هذا المظهر المادة الأمامية للتعامل مع وصف المنشور المخصص والصورة التعريفية لتحسين محركات البحث. إذا لم يتمكن من العثور على meta.image و meta.description ، فسيرجع إلى /images/default-meta-image.png و .Summary على التوالي.

استخدم هذين الحقلين في المادة الأمامية مثل هذا: 

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل