إضافة زر في الرأس للمستخدمين المسجلين

مطور
1

كيف يمكنني إضافة زر إلى الرأس للمستخدمين المسجلين فقط. سأحتاج إلى إضافة نص مخصص ورابط لهذا الزر.

2

هل قمت بالبحث في فئة Theme component لمعرفة ما إذا كان هناك شيء موجود بالفعل يناسب احتياجاتك؟

3

العرض للمستخدمين المسجلين فقط

يمكنك استهداف المستخدمين المجهولين لإخفاء العناصر منهم. مثل هذا على سبيل المثال، والذي يخفي العلامات في قائمة الشريط الجانبي للتنقل من المستخدمين غير المسجلين. يمكنك استخدام رمز مشابه لإخفاء أي عنصر في الرأس من المستخدمين المجهولين.

.anon .sidebar-section-wrapper.sidebar-section[data-section-name=\"tags\"] {
    display: none;
}
4

هذا حل رائع،
أردت حقًا زرًا واحدًا في الأعلى.
ما انتهى بي الأمر بفعله هو أنني سألت ChatGPT عن كيفية إضافته يدويًا باستخدام التعليمات البرمجية وأعطاني حلاً فعالاً…

Header:

<script type="text/discourse-plugin" version="0.8.22">
api.decorateWidget('header-buttons:after', helper => {
    let currentUser = api.getCurrentUser();
    if (!currentUser) return; 
    
    return helper.h('li.custom-login-button-li', [
        helper.h('a.custom-login-button', { href: 'ENTER URL HERE', target: '_blank'}, 'Button')
    ]);
});
</script>

CSS

.custom-login-button {
    display: inline-block;
    margin: 0;
    padding: 0.5em 1em;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 3px;
    color: #fff !important;
    background-color: #0084ff;
    border-color: #0076e6;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.custom-login-button:hover {
    background-color: #0076e6;
    border-color: #0065d0;
}

.custom-login-button-li {
    list-style-type: none;
}
5

عمل رائع يا @Sami_Syed.

أستخدم رابط أيقونة الرأس TC أعلاه في منتدياتي لأيقونة واحدة لمستخدمي الهاتف المحمول فقط.