تذييل ثابت في الأسفل، حل CSS خالص

[cosdesign (Cos)]

مرحبًا يا عشاق Discourse،

أود أن أشارككم حلّي لتثبيت التذييل (footer) في أسفل الصفحة دون الحاجة إلى JavaScript (بديل لـ هذا الطلب)، مع افتراض معرفتك بارتفاع التذييل الخاص بك. لقد أضفتُ 100 بكسل إضافية لتذييلي فقط للحصول على مساحة بين المحتوى والتذييل.

في حال كان لديك تذييل أكبر يحتوي على أعمدة متعددة، يُفضّل تعيين ارتفاع ثابت مختلف في تبويب الجوال.

الخطوة 1: الصق الكود التالي داخل تبويب CSS المشترك:

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* يساوي ارتفاع التذييل - غيّر القيمة حسب حاجتك، في كل من تبويب CSS المشترك وتبويب الجوال */
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* اختياري */
  color: var(--primary-medium); /* اختياري */
  text-align: center; /* اختياري */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

الخطوة 2: انتقل إلى تبويب </body> والصق كود HTML الخاص بالتذييل بداخله

مثال:

<div id="sticky-footer">
  <div class="wrap">
      <!-- ضع محتوى التذييل هنا -->
  </div>
</div>

هذا كل شيء . الآن سيثبت التذييل في أسفل صفحتك حتى في الصفحات ذات المحتوى القصير.

إليك كيف يبدو تذييلنا في صفحة ذات محتوى قصير:

وإلا، فسيُوضع في منتصف الشاشة كما يلي:

[codinghorror (Jeff Atwood)]

لماذا نستخدم هذا بدلاً من مكون سمة تذييل Discourse القياسي؟

[cosdesign (Cos)]

أنت تخبرني جيف ..هل نحتاج إلى تثبيت مكونات لكل كود HTML و CSS إضافي؟
هذه ليست دورة “كيفية إنشاء تذييل” بل هي أكثر من مجرد حل بديل سريع لجعل التذييل يلتصق بأسفل الصفحة لأولئك الذين قد يرغبون في إنشاء تذييل خاص بهم.

[codinghorror (Jeff Atwood)]

حسناً، أفكاري هي أننا نريد من الناس استخدام مكونات السمة كلما أمكن ذلك، لأنها “رسمية” من جانبنا وبالتالي تحصل على دعم كامل، وتحديثات تلقائية، وما إلى ذلك. ما رأيكم @awesomerobot @Johani و @jordan.vidrine؟

[awesomerobot (Kris)]

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

لقد قمتُ بشيء مشابه من قبل… وهي عملية مماثلة لما ورد في المنشور الأصلي. تقوم بضبط ارتفاع #main-outlet ليكون 100% من ارتفاع نافذة العرض (100vh) مطروحًا منه ارتفاع التذييل والرأس. وبذلك، في الصفحات القصيرة، سيظهر التذييل مباشرة في الأسفل.

#main-outlet {
  box-sizing: border-box; // يتضمن الحشو في حساب الارتفاع
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  محتوى التذييل الخاص بي
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

يُطرح هذا السؤال بشكل متكرر بما يكفي، لذا ربما يكون من الجيد تنفيذ شيء مشابه تلقائيًا في النواة الأساسية إذا كان هناك محتوى في footer.html أو في أي من مخرجي التذييل الإضافيين.

[spectre (Spectre Zone)]

@cosdesign

الخطوة 1: الصق هذا داخل علامة تبويب CSS المشتركة الخاصة بك

@cosdesign ، أين توجد علامة تبويب CSS هذه إذا كنت لا تمانع يا صديقي

[JammyDodger]

ستجد السمة الافتراضية الخاصة بك عن طريق الضغط على زر “تعديل CSS/HTML”:

على الرغم من أنه سيكون من الأفضل إنشاء مكون سمة بدلاً من ذلك. (اضغط على زر التثبيت و “إنشاء جديد” من هناك)

هناك المزيد من المعلومات في Developing Discourse Themes & Theme Components

[spectre (Spectre Zone)]

@JammyDodger

بالنسبة لموضوعك الافتراضي، ستجده عن طريق المرور عبر زر “تعديل CSS/HTML”

رائع