تذييل مستجيب سهل

[Discourse]

	ملخص	سيمكنك Easy Responsive Footer من إنشاء تذييل كامل الاستجابة باستخدام النص العادي فقط.
	معاينة	معاينة في منشئ ثيمات Discourse
	رابط المستودع	https://github.com/discourse/Discourse-easy-footer
	جديد في ثيمات Discourse؟	دليل المبتدئين لاستخدام ثيمات Discourse

تثبيت مكون الثيم هذا

بما أن هذا مكون ثيم #رسمي تُعتنى به من فريق Discourse، فيمكن تقديم طلبات #الدعم، و#الإبلاغ عن الأخطاء:bug، و#المساهمة في تحسين تجربة المستخدم:ux، و#المساهمة في الميزات:feature في الفئات المناسبة هنا على Meta، مع وضع علامة التصنيف المناسبة لمكون الثيم. انقر على أحد الروابط أدناه لبدء واحد منها.

 الدعم  خطأ  تجربة المستخدم  ميزة

الميزات

سطح المكتب

الجوال

الإعدادات

الاسم	الوصف
heading	نص العنوان في التذييل - يمكنك استخدام اسم موقعك مثلًا - الحد الأقصى 25 حرفًا
blurb	أدخل نبذة قصيرة عن مجتمعك - الحد الأقصى 180 حرفًا
sections	الأقسام المراد عرضها في التذييل
small links	روابط صغيرة في أسفل التذييل مثل شروط الخدمة والخصوصية
social links	الروابط الاجتماعية التي ترغب في إضافتها إلى التذييل
show footer on login required page	قم بتفعيل هذا الإعداد إذا كنت تريد عرض التذييل في صفحة تتطلب تسجيل الدخول (ينطبق فقط إذا كان موقعك خاصًا)
svg icons	قائمة بأيقونات FontAwesome 7 المستخدمة في إعداد الروابط الاجتماعية أعلاه.

يوجد ستة إعدادات في هذا المكون تساعدك على إعداده بسهولة

1. العنوان

نص العنوان في التذييل - يمكنك استخدام اسم موقعك مثلًا - الحد الأقصى 25 حرفًا

2. النبذة

نبذة قصيرة عن مجتمعك - الحد الأقصى 180 حرفًا

3. أقسام الروابط

أضف أقسام الروابط. العدد المثالي للأقسام هو ستة. عنصر واحد في كل سطر بهذا الترتيب: النص، العنوان
النص: ما يظهر في التذييل
العنوان: النص الذي يظهر عند تمرير المؤشر فوق العنصر.

4. الروابط

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

5. الروابط الصغيرة

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

6. الروابط الاجتماعية

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

ملاحظات

1. تركت العناصر النائبة كإعدادات افتراضية للمكون حتى تتمكن من رؤية كيفية أن تكون إعداداتك بسهولة.

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

3. بما أن هذا المكون يستخدم إعدادات الثيم، فهذا يعني أنه يمكنني تحديثه في المستقبل إما لإصلاحه أو تحسينه ولن تفقد البيانات التي أدخلتها

مُستضاف لدينا؟ تتوفر مكونات الثيم للاستخدام في خطط Pro وBusiness وEnterprise لدينا.

[Johani (Joe)]

تم دفع بعض الإصلاحات.

التغييرات الرئيسية:

• يستخدم المكون الآن متغيرات CSS، مما يجعله متوافقًا مع الوضع الداكن.

• بعض الإصلاحات لاستعلامات الوسائط لإصلاح الخطأ الذي أبلغ عنه @mbauman.

• تمت إضافة إعداد يسمح لك بالتحكم في ما إذا كان سيتم عرض التذييل في الصفحات التي تتطلب تسجيل الدخول.

  

Easy Footer v2.3 (#7)

@rolando

لقد جعلت .wrap أوسع (1200 بكسل) باستخدام استعلامات الوسائط بحيث يصبح المنتدى أوسع بعد دقة معينة. إذا قمت بتفعيل التذييل المتجاوب، يصبح .wrap أضيق (1100 بكسل) ولكن فقط الجزء الخاص بـ “لوحة المناقشة” وليس .d-header .wrap ولا .footer اللذين يبقان عند (1200 بكسل). بمجرد إيقاف التذييل المتجاوب، يبدو كل شيء أوسع (1200 بكسل) كما هو مقصود.

السبب هنا هو خصوصية CSS. يستهدف CSS الخاص بك .wrap، ويعمل بشكل صحيح، لكن هذا المكون يحتوي أيضًا على بعض CSS يستهدف #main-outlet ويضيف بعض الخصائص إليه للحفاظ على التذييل في الأسفل حتى في الصفحات القصيرة.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

المحدد #main-outlet أكثر خصوصية من محدد .wrap الخاص بك - لأنه يعتمد على المعرف (ID)، لذا فهو يتجاوز أنماطك.

يمكنك إصلاح ذلك بإضافة هذا CSS

#main {
  #main-outlet {
    width: 1200px; // أو أي عرض تريده
  }
}

@Edward_Legaspi

مرحبًا. هل هناك طريقة لتحديد عدد أعمدة التذييل إلى 3؟

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

@PoojaPatel

بعد التحديث، تظهر خطأ في وحدة تحكم Chrome كما هو موضح أدناه.

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

---

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

[dadberg (Interstellar)]

أتساءل عما إذا كان يمكن استبدال نص الرأس (هذا عنوان) بشعار داخل [Easy Footer Theme Component by Joe].

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

أي إرشادات ستكون موضع تقدير كبير

[dax (Daniela)]

اعتمادًا على ما تريد القيام به، يمكنك ببساطة تجربة شيء مثل هذا:

• في إعدادات سمة التذييل المتجاوب السهل (Easy responsive footer)، احذف النص الموجود داخل إعداد Blurb. إذا أردت، يمكنك حتى حذف النص الموجود داخل إعداد Heading.

• أنشئ مكون سمة جديدًا وأضف في علامة التبويب Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /* قم بتغيير الإعدادات أدناه بناءً على حجم شعارك */
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

وستكون النتيجة شيئًا كهذا:

[dadberg (Interstellar)]

تم الحل!

تأسست إيماني في نظام الإيكو مفتوح المصدر في البداية من خلال أشخاص عظماء مثلك.

[Jcava5 (John)]

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

بخلاف ذلك، يعمل بشكل رائع! شكرًا لك!

[thaidb]

مرحبًا جو، هل يمكننا إضافة المزيد من الودجات هنا؟

[b481]

أدى ذلك إلى ظهور الشعار في عنصر blurb:before لنتائج البحث، حتى بعد تحديده في المكون

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

هل توجد طريقة لضمان عدم ظهوره في نتائج البحث مع بقائه ظاهرًا في التذييل؟

[littleviolette]

شكرًا لك على التذييل الرائع! لقد واجهت مشكلة في عرض شعار تيك توك من Font Awesome. لقد جربت إضافة fab-tiktok، fa-tiktok، fas-tiktok، و tiktok إلى إعدادات أيقونات SVG، لكن لم يظهر شعار تيك توك بأي منها.

شكرًا لك على مساعدتك!

[bekircem]

أرغب في تغيير حد الـ 25 حرفًا للعنوان. سأقوم بعرض العنوان باستخدام CSS. ما هي أسهل طريقة للقيام بذلك؟

[keegan (Keegan George)]

@bekircem
تجاوز حد الأحرف قد يكسر بعض الأمور، لكن يمكنك تجربة ما يلي:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

ومع ذلك، فإن استخدام visibility: hidden سيحتفظ بالمسافات البيضاء. لكن، اعتمادًا على حجم العنوان لديك، يمكنك تجربة هذا بدلاً من ذلك:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

هل من الممكن إضافة نصوص إلى أقسام الروابط دون وجود سمة href؟

[IAmGav (Gavin Perch)]

فقط أضف # حيث تذهب الرابط

[bekircem]

في هذه الحالة، لا يزال يظهر كرابط قابل للنقر. هل توجد طريقة للإضافة دون الحصول على وسم a؟

[Johani (Joe)]

@bekircem

هل هناك طريقة للإضافة دون الحصول على وسم a؟

يمكنك إضافة هذا الـ CSS إلى السمة الخاصة بك في مكان ما

.custom-footer a[href="#"] {
  pointer-events: none;
}

[pfaffman (Jay Pfaffman)]

لقد قدمت هذا:

Fix: add pluginId to modifyClass

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

تحرير: ولكنه ليس صحيحًا على الإطلاق.

[umbergerba (B.A. Umberger)]

ملاحظة: خطأ <<< إذا أضفت ما يلي… “Community, Tags List, /tags, self, List of all Tags” … يتم عرض خط أفقي في الواجهة الأمامية. إذا قمت بإزالة المسافة بين “Tags List” وتغييرها إلى “TagsList”، يختفي الخط الأفقي.

[mkschulze (M. Schulze)]

مرحباً، لدي مشكلتان مع الروابط الاجتماعية وأيقونات Fontawesome.

1. أحاول إعداد أيقونات Fontawesome 5 أخرى في منطقة التواصل الاجتماعي، لكنها لا تظهر.
   أريد <i>fad fa-home</i>

2. قمت بإعداد رابط GitHub وهو يظهر الأيقونة بالفعل على الصفحة، على الرغم من أنني لم أضف الأيقونة فعليًا في قائمة أيقونات svg.

تحديث: تم حل المشكلة بمجرد استخدام اسم الأيقونة “home”

[AquaL1te]

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

يمكن إجراء الاختبار هنا: https://forum.tzm.community/

تأكد من فتحه على هاتف (أو استخدم خيار التصحيح في متصفحك، في فايرفوكس يمكنك تشغيل الخطأ باستخدام ملف تعريف Linux لجهاز Galaxy Note 20).

[dax (Daniela)]

تم إصلاح المكون. تحتاج إلى تحديثه.