تذييل استجابة سهل

[Discourse]

||||\n-|-|-|\n:discourse2: | ملخص | Easy Responsive Footer سيمكنك من بناء تذييل متجاوب بالكامل باستخدام نص عادي فقط.\n| : eyeglasses: | معاينة | معاينة على منشئ سمات Discourse |\n:hammer_and_wrench: | رابط المستودع | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e\n:open_book: | جديد في سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse\n\n\nتثبيت مكون السمة هذا\n\n\n[quote]\n\n:discourse2: نظرًا لأن هذا مكون سمة #رسمي تتم صيانته بواسطة فريق Discourse، يمكن تقديم طلبات #الدعم، #الأخطاء، #تجربة_المستخدم، و #الميزات في الفئات المعنية هنا على Meta، ووضع علامة عليها بعلامة مكون السمة المناسبة. انقر على رابط أدناه لبدء أحدها. \n\n\u003ckbd\u003e \u0026nbsp;الدعم \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;خطأ \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;تجربة المستخدم \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;ميزة\u003c/kbd\u003e\n\n[/quote]\n\n\n\n### الميزات\n\nسطح المكتب\n\n \n\nالهاتف المحمول\n\n \n\n### الإعدادات\n\n| الاسم | الوصف\n|-|-|\n| heading | نص العنوان في التذييل - يمكنك استخدام اسم موقعك على سبيل المثال - الحد الأقصى للطول 25 حرفًا\n| blurb | أدخل وصفًا موجزًا لمجتمعك - الحد الأقصى للطول 180 حرفًا\n| sections | الأقسام التي سيتم عرضها في التذييل | روابط صغيرة\n| social links | روابط التواصل الاجتماعي التي ترغب في إضافتها إلى التذييل\n| show footer on login required page | حدد هذا الإعداد إذا كنت تريد عرض التذييل على صفحة تسجيل الدخول المطلوبة (ينطبق فقط إذا كان موقعك خاصًا)\n| svg icons | قائمة أيقونات FontAwesome 5 المستخدمة في إعداد روابط التواصل الاجتماعي أعلاه.\n\nهناك ستة إعدادات في هذا المكون ستساعد في تكوينه بسهولة\n\n1. العنوان\n\n نص العنوان في التذييل - يمكنك استخدام اسم موقعك على سبيل المثال - الحد الأقصى للطول 25 حرفًا\n \n\n2. الوصف المختصر \n\n وصف موجز لمجتمعك - الحد الأقصى للطول 180 حرفًا\n \n\n3. أقسام الروابط\n\n أضف أقسام روابط. العدد المثالي للأقسام هو ستة. عنصر واحد في كل سطر بهذا الترتيب: النص، العنوان\n النص: ما يظهر في التذييل\n العنوان: النص الذي يظهر عند تمرير مؤشر الفأرة فوق العنصر.\n \n\n4. الروابط\n\nأضف روابط إلى أقسام الروابط. عنصر واحد في كل سطر بهذا الترتيب:\nالأب، النص، الرابط، الهدف، العنوان\nمن الجيد إبقاء عدد الروابط تحت كل قسم متشابهًا\nالأب: اسم القسم الأب الذي يظهر تحته هذا الرابط. استخدم قيمة النص من القائمة أعلاه\nالنص: النص الذي يظهر لهذا الرابط\nالرابط: المسار الذي يشير إليه هذا العنصر. يمكنك استخدام مسارات نسبية أيضًا.\nالهدف: اختر ما إذا كان هذا العنصر سيفتح في علامة تبويب جديدة أو في نفس علامة التبويب. استخدم blank لفتح الرابط في علامة تبويب جديدة، أو استخدم self لفتحه في نفس علامة التبويب.\nالعنوان: النص الذي يظهر عند تمرير مؤشر الفأرة فوق الرابط.\n\n \n\n5. الروابط الصغيرة\n\nيمكنك إضافة روابط صغيرة في أسفل التذييل مثل شروط الخدمة والخصوصية. عنصر واحد في كل سطر بهذا الترتيب:\nالنص، الرابط، الهدف\nالنص: النص الذي يظهر للرابط الصغير\nالرابط: المسار للرابط\nالهدف: استخدم blank لفتح الرابط في علامة تبويب جديدة واستخدم self لفتحه في نفس علامة التبويب\n\n \n\n6. روابط التواصل الاجتماعي\n\nأدخل روابط التواصل الاجتماعي التي ترغب في إضافتها إلى التذييل بهذا التنسيق:\nالموفر، العنوان، الرابط، الهدف\nالموفر: اسم الموفر مثل فيسبوك أو تويتر\nالعنوان: النص الذي يظهر عند تمرير مؤشر الفأرة فوق الرابط\nالرابط: المسار الذي ترغب في أن يكون للرابط\nالهدف: استخدم blank لفتح الرابط في علامة تبويب جديدة واستخدم self لفتحه في نفس علامة التبويب\n\n \n\n### ملاحظات\n\n1. تركت العناصر النائبة كإعدادات افتراضية للمكون حتى تتمكن من رؤية شكل إعداداتك بسهولة.\n\n2. سيستخدم هذا المكون مخطط ألوان السمة الخاص بك لتوليد الألوان المستخدمة للعناصر فيه. ولكن تم إضافة فئات فريدة لجميع العناصر في حال كنت ترغب في تجاوز شيء ما.\n\n3. نظرًا لأن هذا المكون يستخدم إعدادات السمة، فهذا يعني أنه يمكنني تحديثه في المستقبل لإصلاحه أو تحسينه ولن تضيع البيانات التي تدخلها \n\n\u003cbr\u003e\n\n\u003e:discourse2: مستضاف من قبلنا؟ مكونات السمة متاحة للاستخدام على خططنا 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)]

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