Potresti fare qualcosa del genere:
<script type="text/discourse-plugin" version="0.10.0">
// Aggiungi il link all'intestazione
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;
}
});
// Aggiungi il link al resto del contenuto
api.reopenWidget("banner-content-widget", {
html(attrs) {
let bannerContent = this._super();
bannerContent.tagName = "A";
bannerContent.properties.href = "https://meta.discourse.org";
return bannerContent;
}
});
</script>
E aggiungi una regola CSS per regolare il colore del link:
.banner-box a {
color: var(--primary);
}
A meno che tu non abbia una funzionalità specifica che richiede il “Versatile Banner”, mi chiedo se non ti convenga creare direttamente un semplice banner HTML in un nuovo componente. Esempio approssimativo:
Aggiungi quanto segue alla sezione comune “Dopo l’intestazione”:
<a href="https://meta.discourse.org">
<div class="custom-banner">
<h2>Questo è un banner personalizzato!</h2>
</div>
</a>
e quanto segue alla sezione comune “CSS”:
.custom-banner {
display: flex;
justify-content: center;
align-items: center;
width: $large-width; // 1110px
height: 200px;
margin-bottom: 15px;
background: grey;
color: white;
}
Questo ti fornirà un banner semplice completamente cliccabile:
