موضوع هوغو الخماسي

كوينت: جوهر بساطتها

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

تحقق من مستودع الموقع التجريبي، والذي يمكنك استخدامه أيضًا كقالب بداية لموقع جديد. (بسست... هناك زر نشر بنقرة واحدة على Netlify هناك.)

العرض المباشر هنا.

سمات

• تصميم بسيط : يركز على سهولة قراءة المحتوى مع الحد الأدنى من عوامل التشتيت.

• الوضعان الداكن والفاتح : التبديل التلقائي للموضوع الذي يحترم إعدادات المتصفح/الجهاز الخاص بالمشاهد.

• تخطيط سريع الاستجابة : يبدو رائعًا على كل من الأجهزة المحمولة وأجهزة سطح المكتب.

• لافتات الصور المضمنة : يتم شحنها مع لافتات صور جميلة وبسيطة تحدد أسلوب موقعك. استبدلها أو أضفها بنفسك في أي وقت.

• بحث الموقع : بحث مدمج في موقعك الثابت باستخدام Lunr.js.

• الرموز الاجتماعية : روابط قابلة للتكوين إلى الوسائط الاجتماعية الخاصة بك في التذييل.

بداية سريعة

لبدء استخدام Quint، تحتاج إلى تثبيت Hugo على جهازك. لمزيد من المعلومات حول تثبيت Hugo، راجع وثائق Hugo الرسمية.

للحصول على دليل خطوة بخطوة لإنشاء موقع جديد باستخدام Hugo، اقرأ البداية السريعة.

الخطوة 1: تثبيت الموضوع

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

 إضافة الوحدة الفرعية git https://github.com/victoriadrake/hugo-theme-quint.git theme/quint

الخطوة 2: أضف السمة إلى التكوين الخاص بك

افتح ملف تكوين موقع Hugo الخاص بك (إما hugo.toml أو hugo.yaml أو hugo.json ) وقم بتحديث معلمة theme لاستخدام quint :

بالنسبة إلى hugo.toml :

 الموضوع = "الخماسية"

بالنسبة إلى hugo.yaml :

 الموضوع: "الخماسية"

الخطوة 3: التكوين

يبدو Quint رائعًا خارج الصندوق. اختياريًا، انسخ قيم التكوين من yoursite/themes/quint/hugo.toml إلى تكوين موقعك ( yoursite/hugo.toml ) لتخصيص Quint بشكل أكبر.

الخطوة 4: تشغيل الخادم

قم بتشغيل Hugo لإنشاء موقعك وبدء تشغيل الخادم. من جذر موقعك، قم بتشغيل:

 خادم هوغو

انتقل إلى http://localhost:1313 في متصفح الويب الخاص بك لرؤية موقعك أثناء العمل باستخدام سمة Quint.

احصل على التحديثات

لتنزيل أحدث إصدار من Quint، قم بتشغيل:

 تحديث الوحدة الفرعية لـ git --remote theme/quint

تخصيص

تم تصميم Quint ليكون سهل التخصيص.

CSS

أضف ملفات CSS المخصصة الخاصة بك بسهولة عن طريق تسميتها في تكوين Hugo الخاص بك:

 [params]css = ["css/custom.css"] # تجاوزات CSS المخصصة الخاصة بك، المخزنة في yoursite/static/

التخطيطات

يمكنك تجاوز أي تخطيط باستخدام ملف يحمل نفس الاسم في دليل المشروع الخاص بك. على سبيل المثال، الملف yoursite/layouts/partials/contact.html سوف يتجاوز yoursite/themes/quint/layouts/partials/contact.html .

قم بإضافة أو إزالة أقسام من الصفحة الرئيسية عن طريق تجاوز ملف yoursite/themes/quint/layouts/index.html . ما عليك سوى إنشاء نسخة من هذا الملف في دليل المشروع الخاص بك ( yoursite/layouts/index.html ) وإزالة أو إضافة أي أجزاء partial ترغب فيها.

لافتات الصور

إذا لم تحدد الصفحة أو المنشور image في المادة الأمامية، فسوف يعرض Quint شعار صورة جميل عن طريق اختيار صورة عشوائية من الدليل themes/quint/static/images .

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

 [params]numImages = 12 # عدد الصور العشوائية للاختيار من بينها لللافتات (في السمات/الخماسية/الثابتة/الصور)

المساهمة

المساهمات في كوينت هي موضع ترحيب! لا تتردد في إرسال المشكلات أو سحب الطلبات على GitHub لتحسين وظائف السمة أو وثائقها.

هل تريد بعض الأفكار للبدء؟ فيما يلي قائمة سريعة بالميزات التي أرغب في إضافتها:

• أزرار نسخ كتلة التعليمات البرمجية

• تسليط الضوء على بناء جملة Hugo's Chroma

• منشئ أصول Hugo المزود بخطوط الأنابيب وبصمات الأصابع والتجميع والتصغير

• دعم متعدد اللغات

• التنقل التفصيلي

رخصة

تم إصدار هذا الموضوع بموجب ترخيص MIT. لمزيد من التفاصيل، راجع ملف الترخيص.

الإسناد

• يستخدم Quint خط Open Sauce Font الممتاز.

• تم إنشاء نموذج الجهاز بالحجم الطبيعي من Deviceframes.com.