Zum Header für angemeldete Nutzer eine Schaltfläche hinzufügen

Entwickler
1

Wie kann ich einen Button im Header nur für eingeloggte Benutzer hinzufügen? Ich müsste benutzerdefinierten Text und einen Link für diesen Button hinzufügen.

2

Haben Sie die Kategorie Theme component durchsucht, um zu sehen, ob bereits etwas existiert, das Ihren Anforderungen entspricht?

1 „Gefällt mir“
3

Nur für eingeloggte Benutzer anzeigen

Sie können anonyme Benutzer ansprechen, um Elemente vor ihnen zu verbergen. Zum Beispiel, um die Tags im Navigations-Seitenleistenmenü vor Benutzern zu verbergen, die nicht eingeloggt sind. Sie können einen ähnlichen Code verwenden, um jedes Element in der Kopfzeile vor anonymen Benutzern zu verbergen.

.anon .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] {
    display: none;
}
2 „Gefällt mir“
4

Das ist eine großartige Lösung,
Ich wollte eigentlich nur einen Button oben haben.
Was ich am Ende gemacht habe, war, ChatGPT zu fragen, wie ich ihn manuell mit Code hinzufügen kann, und es hat mir eine funktionierende Lösung gegeben…

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;
}
1 „Gefällt mir“
5

Gute Arbeit @Sami_Syed.

Ich verwende den Header-Icon-Link TC oben in meinem Forum für ein Symbol nur für mobile Benutzer.

1 „Gefällt mir“
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.