قد تتمكن من فعل شيء مثل:
<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;
}
هذا سيعطيك لافتة بسيطة قابلة للنقر بالكامل:
