كيفية إضافة HTML مخصص بعد "post_1" (الجزء 2)

[valsha (KingPin)]

وفقًا لهذا المنشور How to add customer HTML after "post_1"
وهذا المثال:

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>

يمكننا تعيين الصورة المطلوبة، ولكن كيف يمكننا جعل هذه الصورة في المنتصف بشكل صحيح بحيث يتم تصغيرها أيضًا لتصميم الهاتف المحمول؟

لأنها تظهر الآن بهذا الشكل

[Don]

مرحبًا،

يتعين عليك استخدام بعض CSS للقيام بذلك.

في العرض المشترك (CSS) للجوال وسطح المكتب، أضف عرضًا بنسبة 100% للصورة.

#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

---

في عرض سطح المكتب (CSS)، أضف عرضًا أقصى لـ #custom-ad لضبط عرض اللافتة ليكون مساويًا لعرض صورة الملف الشخصي للموضوع + جسم الموضوع. وهذا سيكون عرض الصورة بنسبة 100%، وهو ما أضفناه أعلاه إلى العرض المشترك.

#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

45px = عرض صورة الملف الشخصي للموضوع
690px + (11px * 2) = عرض جسم الموضوع والحشوة اليسرى 11px واليمنى 11px المستخدمة في فئة .cooked.

سيبدو الأمر كما يلي

عرض سطح المكتب (كامل)

---

عرض سطح المكتب (متجاوب)

---

عرض الجوال

[valsha (KingPin)]

هل سيكون الأمر مجتمعةً بهذا الشكل؟

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>
#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}
#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

[Don]

لا، يجب عليك إضافة هذه الأكواد إلى أقسام CSS.

إذن سيكون كل شيء مجمّعًا معًا.

عام / الرأس

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>

---

عام / CSS

#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

---

سطح المكتب / CSS

#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

[valsha (KingPin)]

شكرًا جزيلاً لك!