多功能横幅

[tshenry (Taylor)]

您可能可以这样做：

<script type="text/discourse-plugin" version="0.10.0">
  // 为标题添加链接
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // 为其余内容添加链接
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

并添加一条 CSS 规则来调整链接颜色：

.banner-box a {
    color: var(--primary);
}

除非您需要“通用横幅”提供的特定功能，否则我想知道您是否不如直接在新组件中创建一个简单的自定义 HTML 横幅。大致示例如下：

将以下内容添加到“通用”部分的“页眉之后”区域：

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>这是一个自定义横幅！</h2>
  </div>
</a>

并将以下内容添加到“通用”部分的"CSS"区域：

.custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

这将为您提供一个完全可点击的简单横幅：