hugo dream plus
Yume
هذا الموضوع عبارة عن نسخة ترقية من موضوع Dream by Yue Yang ويحتوي على الكثير من الميزات الجديدة مثل:
يمكن استخدام هذا الموضوع لغرضين:
يلتزم هذا المشروع بقواعد سلوك العهد المساهم. من خلال المشاركة ، من المتوقع أن تدعم هذا الرمز. يرجى الإبلاغ عن سلوك غير مقبول إلى [email protected].
تثبيت
ابدء
الوثائق
انتهى تقريبا
المساهمة
رخصة
يمكن تثبيت السمة عن طريق تشغيل الأوامر التالية داخل مجلد موقع Hugo الخاص بك.
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveبمجرد أن يتم تثبيت السمة بنجاح ، يتعين عليك القيام ببعض ضبط الموضوع لتلبية ذوقك.
ضمن المجلد exampleSite ، ستجد ملفات config و cards.toml و posts.toml التي يمكن استخدامها لتعديل السمة.
يجب عليك استخدام ملفات التكوين هذه كأساس لموقعك ، لأنها تعتني بالإعلانات المتغيرة اللازمة ، والتي يمكنك تعديلها وفقًا لاحتياجاتك.
حدد نفسك من خلال متغيرات التكوين التالية في params ضمن جدول author كما هو موضح:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "بعد ذلك ، املأ المتغيرات الاجتماعية في نهاية ملف التكوين. هذا الموضوع يملأ المواقع الاجتماعية التالية: (يتم إعطاء الأمثلة)
| الرابط الاجتماعي | عامل | مثال التهيئة |
|---|---|---|
| جيثب | جيثب | github = "username" |
| بريد إلكتروني | بريد إلكتروني | email = "[email protected]" |
| تغريد | تغريد | twitter = "username" |
| فيسبوك | فيسبوك | facebook = "username" |
| يوتيوب | يوتيوب | youtube = "username" |
| واسطة | واسطة | medium = "username" |
linkedin = "username" | ||
| stackoverflow | stackoverflow | stackoverflow = "number/username" |
| Codepen | Codepen | codepen = "username" |
| رديت | رديت | reddit = "username" |
يجب أن تكون هذه المتغيرات في جدول [social] من config.toml أو ما يعادلها ل YAML أو JSON .
[ social ]
github = " UtkarshVerma "بمجرد الانتهاء من ذلك ، اكتب قسم " About Me " لموقع الويب الخاص بك في Markdown وفقًا لتوجيهات هنا: خطأ وحول الصفحات.
كما ذكرنا سابقًا ، يحتوي هذا الموضوع على عرضين ، عرض البطاقات وعرض المشاركات . يعتمد نوع عرض العرض على نوع المحتوى الذي تغذيه إلى Dream Plus . لذلك:
cards في /content ينشط عرض البطاقة .posts في /content ينشط عرض النشر .تم الآن إهمال متغير
contentType.
أحد التمييز الواضح بين كلا العرضين هو أن عرض البطاقة لا يدعم المنشورات ، وبدلاً من ذلك ، يعيد التوجيه إلى الرابط المحدد ، في حين أن عرض المنشور لا. يمكنك اختبارهم أنفسكم من خلال زيارة مواقعاتي (المذكورة أعلاه) التي تستخدمها. أيضا ، يتم إنشاء ما بعد/بطاقة بشكل مختلف لكلا العرضين. كما يلي:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationبعد ذلك ، فقط افتح بطاقة/منشور Markdown وقم بتوفير المعلمات للبطاقة/المنشور.
هناك طريقتان مختلفتان لتكوين خلفية هذا الموضوع. هذه الإعدادات حصرية بشكل متبادل لبعضها البعض.
لتعيين لون خلفية محدد ، قم بذلك من خلال متغير color . إذا كنت ترغب في تعيين مجموعة عشوائية من الألوان كخلفيتك بدلاً من ذلك ، فما عليك سوى اترك متغير اللون غير المحدد .
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent حدد الصورة التي تريد تعيينها كخلفية من خلال صفيف images . إذا كنت تفضل خلفية صورة واحدة ، فما عليك سوى إعطاء قيمة واحدة إلى الصفيف. على سبيل المثال:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background يتيح توفير صور متعددة إلى صفيف images ميزة خلفية الصورة العشوائية لـ Dream Plus ، والتي تتدرب على الخلفية داخل الصفيف المعطى في كل مرة يتم فيها إعادة تحميل الموقع. يمكنك أيضًا طمس الخلفية إلى حد ما من خلال متغير blur .
يجب وضع جميع متغيرات تكوين الخلفية داخل الجدول
backroundتحتparams
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "تتم معالجة الأغطية لكل بطاقة بعد أو بطاقة بواسطة Dream Plus باستخدام معالجة صور Hugo لأوقات تحميل موقع الويب بشكل أسرع. مسارات البحث لملف الغلاف كما هو موضح أدناه:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
تم الآن إهمال تحديد صورة الغلاف من خلال Frontmatter. يمكن الآن تعريف أغطية البطاقات من خلال Frontmatter من خلال مفتاحcover. ومع ذلك ، لن تكون معالجة الصور قابلة للتطبيق على هذه الأغطية. وأيضًا ، يتم إعطاء الأولوية لأغطية Frontmatter على موارد الصور ، لذلك ، لجعل أغلفة موارد الصورة تجسيد ، سيتعين عليك إزالة مفتاح الغلاف من Frontmatter أولاً.
يمكنك أيضًا تعديل عملية معالجة الصور من خلال متغير coverArgs في [params.features] . يجب أن تكون الحجج التي تم تمريرها للوظيفة .Resize لأن هذا ما يستخدمه Dream Plus. على سبيل المثال،
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image يمكنك تكوين موقع الويب الخاص بك بناءً على جهاز العميل باستخدام متغير isMobile JS. هذا true عندما يكون جهاز العميل هو الهاتف المحمول والعكس بالعكس.
يدعم هذا الموضوع التخصيص الكلي لصفحات الأخطاء والخطأ . قد يتم تخصيص هذه الصفحات من خلال ملفات about.md و 404.md يقرأ Dream Plus الملفات المذكورة أعلاه كنص تخفيض عادي ثم يقدمها. بمجرد الانتهاء من كتابة الملفات وتعديلها وفقًا لاحتياجاتك ، قم بلصقها في مجلد content في موقع Hugo الخاص بك. إذا كنت لا ترغب في بناء هذه الصفحات بواسطة Hugo وتقديمها مع روابطها الخاصة مثل <website>.<domain>/about <website>.<domain>/404 ثم يمكنك إخبار Hugo بتجاهلها من خلال متغير ignoreFiles في ملف config.toml على النحو التالي:
ignoreFiles = [ " content/404.md " , " content/about.md " ] يمكنك أيضًا تعيين Favicon مخصص لموقع الويب الخاص بك من خلال متغير Config favicon ضمن params . على سبيل المثال،
[params]
favicon = "/images/defaultFav.ico"
تم تنفيذ البرنامج النصي على موقع Shoree.st في هذا الموضوع. لاستخدامه ، سيتعين عليك تكوينه من خلال shortest جدول ضمن params .
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define إذا كنت ترغب في التحكم في مقدار المنشورات/البطاقات التي تحتوي عليها الصفحة ، فيمكنك القيام بذلك باستخدام متغير تكوين paginate .
paginate = 4 # Defaults to 10 أيضًا ، لن يتم عرض العلامات ، عند تمكينها ، على الرأس والشريط الجانبي افتراضيًا. يتم عرض العلامات الـ 8 العليا فقط (المقالة الحكيمة) هناك لتجنب الازدحام. ومع ذلك ، يمكن تجاوزه باستخدام متغير tagLimit لجدول [params.tag] .
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsهناك بعض التكوينات البسيطة الأخرى كذلك. يمكنك إعدادها عن طريق الإشارة إلى التعليقات الموجودة داخل ملف التكوين.
توثيق هذا المستودع قيد العمل حاليًا ويتم إضافته إلى ويكي هذا المستودع. مساهمات الويكي موضع ترحيب كبير. لا تتردد في سؤالني عن ميزات هذا الموضوع لذلك.
بعد الانتهاء من التكوينات ، أنت على ما يرام. لذا ، اختبر موقع الويب الخاص بك باستخدام:
hugo serverيجب أن يكون موقعك الآن متاحًا محليًا على http: // localhost: 1313 لأغراض الاختبار.
لاختبار موقع المثال ، سيتعين عليك تحديد ملف التكوين بشكل صريح إلى Hugo. يتم ذلك على النحو التالي:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlوجدت شيئًا مثيرًا للاهتمام لإضافته إلى هذا الموضوع أو بالأحرى علة؟ اسمحوا لي أن أعرف عن ذلك من خلال تعقب القضية. طلبات السحب موضع ترحيب أيضًا. لمزيد من الإرشادات التفصيلية حول كيفية المساهمة ، ارجع إلى المساهمة. md
يتم إصدار هذا الموضوع تحت رخصة معهد ماساتشوستس للتكنولوجيا .
