إضافة رأس وتذييل ثابتين

مطور
1

مرحباً يا رفاق،

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

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

المشكلة بالطبع هي أن الإعلان الثابت على طول التذييل سيغطي الأزرار المهمة ويؤثر على تجربة المستخدم، وهو أمر غير مقبول.

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

أيضًا، مع الرأس الثابت في Discourse، هل سيتأثر ذلك بإعلان ثابت أم يمكن أن يجلس الإعلان فوق شريط التنقل في Discourse؟

أم أن هذا شيء يجب أن تكون وكالة الإعلانات قادرة على حله باستخدام تقنيتها الإعلانية؟

شكرا،

شين

2

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

3

مرحباً :wave:

هذا ممكن ولكنه يعتمد على الكثير من الأشياء. هل يمكنك مشاركة رابط موقعك؟

سأستخدم منفذ الإضافة (plugin outlet) وأضع اللافتة بداخله. اضبط ارتفاع منفذ الإضافة (plugin-outlet) ليكون مساوياً لارتفاع اللافتة، وسيضيف ذلك المساحات اللازمة.

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

الهاتف المحمول / الرأس

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

الهاتف المحمول / CSS

body {
  --banner-height: 40px;
  
  .d-header-wrap {
    top: var(--banner-height);
  }

  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }

  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
  }  
}

3 إعجابات
4

مرحباً @Don - شكراً على ردك، كنت أفكر أن شيئاً كهذا قد يكون مطلوباً بالفعل.

إعجاب واحد (1)
5

مرحباً @Don كيف ستعمل هذه التنفيذ عند محاولة الرد على الهاتف المحمول؟

6

يعمل ولكنه يجعل الشريط العلوي المصنف أصغر.

من الأفضل إخفاء الشريط عند فتح المصنف.

هناك فئة .composer-open يمكنك استهدافها هنا لإخفاء الشريط عند فتح المصنف.

Mobile / CSS 
body {
--banner-height: 40px;
  // Header
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Top banner
  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    transition: height 0.25s ease-in;
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
      transition: height 0.25s ease-in;
      .composer-open & {
        height: 0;
      }
    }
    .composer-open & {
      height: 0;
    }
  }
  // Bottom banner
  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  // Move topic progress wrapper the top of the bottom banner
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Add banner height to composer max height calculation
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }
}

Edit: لقد أجريت بعض التصحيحات على الكود.

3 إعجابات
7

شكرا جزيلا على هذه المساعدة - شيء رائع!

إعجابَين (2)
8

مرحباً @Don - لدي اختبار يعمل بشكل رائع على الهاتف المحمول، وأقوم بإضافته إلى سطح المكتب ويبدو أنه يجب أن يعمل ولكن هناك مشكلة طفيفة عندما تضغط على الرد، على عكس الهاتف المحمول حيث تختفي المنطقة اللاصقة، فإنها تبقى في مكانها على سطح المكتب، هل هناك خطاف CSS لفتح المنشئ على سطح المكتب؟

9

مرحباً @Don - هل لديك فكرة عن كيفية إغلاق التذييل عند استخدام سطح المكتب، فالنسخة المحمولة تعمل بشكل رائع ولكن لا يمكنني معرفة كيفية إزالة العنصر الثابت عند فتح مربع الرد على سطح المكتب بالضغط على رد، إنها CSS تتجاوز مهاراتي.\n\nشكراً

10

مرحباً @Shaneod :wave:

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

إليك التحديث الذي يعمل على سطح المكتب والجوال أيضاً.

مشترك / رأس 

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>
مشترك / CSS 
body {
  --banner-height: 40px;
}

.d-header-wrap {
  top: var(--banner-height);
  transition: top 0.25s ease-in;
  .composer-open & {
    top: 0;
  }
}
  
.sidebar-wrapper {
  html:not(.composer-open) & {
    height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
  }
}

.above-site-header-outlet.top-banner {
  @include sticky;
  top: 0;
  width: 100%;
  height: var(--banner-height);
  transition: height 0.25s ease-in;
  z-index: z("header");
  .test-top-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
  .composer-open & {
    height: 0;
  }
}

.below-footer-outlet.bottom-banner {
  @include sticky;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  html:not(.composer-open) & {
    height: var(--banner-height);
  }
  z-index: z("composer", "content") - 1;
  .test-bottom-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
}
  
#topic-progress-wrapper:not(.docked) {
  margin-bottom: var(--banner-height);
  .composer-open & {
    margin-bottom: 0;
  }
}
  
body:not(.ios-safari-composer-hacks) #reply-control.open {
  max-height: calc(100vh - var(--header-offset) + var(--banner-height));  
}

5 إعجابات
11

هل يمكن عرض إعلانات جوجل في هذه المناطق؟ @Don

12

شكرا @Don ، أقدر لك كثيرا يا صديقي! :+1:

إعجاب واحد (1)
13

نعم، لقد وضعت إعلانًا ثابتًا في منطقة التذييل. إخفاء Don للمنطقة الثابتة عندما ترد يعني أن الإعلان لا يتداخل مع قابلية استخدام الموقع!

إعجابَين (2)
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.