다음과 같은 방식으로 처리할 수 있습니다:
<script type="text/discourse-plugin" version="0.10.0">
// Add the link to the heading
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;
}
});
// Add the link to the rest of the content
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>This is a customer banner!</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;
}
이렇게 하면 완전히 클릭 가능한 간단한 배너를 만들 수 있습니다:
