多目的バナー

[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);
}

Versatile Banner が提供する特定の機能が必要でないのであれば、新しいコンポーネントでシンプルな HTML バナーを作成する方がよいかもしれません。簡単な例を以下に示します：

Common の「After Header」セクションに以下を追加：

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>これはカスタムバナーです！</h2>
  </div>
</a>

Common の「CSS」セクションに以下を追加：

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

これにより、完全にクリック可能なシンプルなバナーが作成されます：