如何在“post_1”后添加自定义HTML（第二部分）

[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 ID 添加最大宽度，使横幅宽度与主题头像 + 主题正文的宽度一致。这将等于我们上面在通用设置中为图片添加的 100% 宽度。

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

45px = 主题头像宽度
690px + (11px * 2) = 主题正文宽度，以及 .cooked 类使用的左侧 11px 和右侧 11px 内边距。

效果将如下所示

桌面端视图（完整）

---

桌面端视图（响应式）

---

移动端视图

[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)]

非常感谢！