Kategorien- und Tag-Buttons entfernen

[Andrew_Rowe]

Gibt es eine einfache Möglichkeit, diese beiden Schaltflächen zu entfernen? Der Grund, warum ich frage, ist, dass ich (auf dieser Seite) gelesen habe, dass einige Leute Discourse für neue Benutzer etwas überwältigend finden. Ich habe einfach das Gefühl, dass die Schaltfläche „Kategorien“ etwas überflüssig ist, da sich der Tab „Kategorien“ direkt daneben befindet, und wenn ein erfahrener Benutzer nach Tags suchen möchte, kann er das Seitenmenü verwenden. Ich mag die Funktion, aber sie macht die Sache meiner Meinung nach etwas „überladen“.

Mir ist klar, dass ich die CSS-Tags finden und sie ausblenden könnte, aber ich habe mich gefragt, ob es eine weniger „hacky“ Methode gibt, diese Aufgabe zu erledigen. Ich denke, es wäre eine nette Funktion, wenn Benutzer sie später selbst aktivieren könnten, wenn sie sich mit der Plattform vertraut gemacht haben.

[jahan_gagan]

In Discourse gibt es keine eingebaute, nicht-CSS-Einstellung, um die Schaltflächen „Kategorien“ oder „Tags“ global aus der Benutzeroberfläche zu entfernen oder umzuschalten.

[stephtara (Stephanie Booth)]

@Andrew_Rowe

Ich finde, die Schaltfläche „Kategorien“ ist etwas überflüssig, da sich der Reiter „Kategorien“ direkt daneben befindet und ein erfahrener Benutzer die Seitenleiste verwenden kann, um nach Tags zu suchen.

@Andrew_Rowe

Mir ist klar, dass ich die CSS-Tags finden und ausblenden könnte

Ich nehme den Vorschlag für meine Community zur Kenntnis, danke!

[ToddZ]

@Andrew_Rowe

Ich finde, die Schaltfläche „Kategorien“ ist etwas überflüssig, da sich der Reiter „Kategorien“ direkt daneben befindet und ein erfahrener Benutzer die Seitenleiste verwenden kann, um nach Tags zu suchen.

Es ist erwähnenswert, dass diese Schaltflächen eine Suchfunktion bieten – was schön sein kann, wenn Sie viele Kategorien oder Tags haben:

(Ich habe die Schaltflächen unverändert gelassen und den Tag-Bereich aus der Seitenleiste ausgeblendet. Er wird entweder lang und unhandlich, oder man muss angeben, welche Standard-Tags angezeigt werden sollen, und ich wollte keine Favoriten bevorzugen )

CSS

// unterdrückt die Tag-Liste aus der Seitenleiste, um die Darstellung zu vereinfachen
.sidebar-section[data-section-name="tags"] {
 display: none
}

[Andrew_Rowe]

@ToddZ

Es ist erwähnenswert, dass diese Schaltflächen eine Suchfunktion bieten

Das wusste ich nicht … danke

@ToddZ

den Tag-Bereich aus dem Seitenmenü ausgeblendet

Ich habe mich dafür entschieden, die Seitenleiste für anonyme Benutzer (nicht angemeldete Benutzer oder Besucher) standardmäßig komplett auszublenden, indem ich eine einfache Komponente von Don verwendet habe, um den Trick zu machen. Hier finden Sie sie (Danke Don)

Ich hatte das Gefühl, dass jeder mit einem Telefon weiß, dass er nach der Hamburger-Schaltfläche suchen muss, wenn er das Menü oder die Einstellungen sehen möchte, und meiner Meinung nach sieht die Benutzeroberfläche ohne die Seitenleiste viel weniger verwirrend und beängstigend aus (zumindest am Anfang). Schließlich werden die Leute, sobald sie mit der Benutzeroberfläche vertraut sind (oder Mitglieder werden), die Seitenleiste entdecken.

Jedenfalls ….

Hier ist die spezielle Soße, die ich herausgefunden habe, um die beiden Schaltflächen verschwinden zu lassen:

.category-breadcrumb {
display: none
}

Fühlen Sie sich frei, mich zu korrigieren, wenn dies nicht der richtige Weg ist

Meiner bescheidenen Meinung nach macht es die Benutzeroberfläche etwas sauberer, ohne dass Funktionalität verloren geht

Andy

Bearbeitung zum Hinzufügen:

Mir ist aufgefallen, dass die beiden Schaltflächen auf Mobilgeräten standardmäßig verschwinden, daher dachten die Entwickler offensichtlich nicht, dass die Welt untergehen würde, wenn diese Schaltflächen nicht angezeigt würden

[Lilly]

@Andrew_Rowe

Mir ist aufgefallen, dass die beiden Schaltflächen auf Mobilgeräten standardmäßig verschwinden, also haben die Entwickler offensichtlich nicht das Gefühl gehabt, dass die Welt untergeht, wenn diese Schaltflächen nicht angezeigt werden

Die Breadcrumb-Dropdown-Auswahlfelder werden auf Kategorieseiten auf Mobilgeräten oben angezeigt

und auf mobilen Entdeckungsseiten (/latest usw.) in einigen Themes, wie z. B. FKB Social.

Sie erwähnen, dass Sie sie entfernt haben, weil „der Kategorien-Tab direkt da ist“ – wenn Sie damit die Navigations-Pill-Schaltfläche meinen, müssen Sie darauf klicken, um zur Kategorieseite zu gelangen, und dann die gewünschte Kategorie finden – es ist viel intuitiver, aus dem Kategorie-Dropdown auszuwählen, um direkt dorthin zu gelangen, wo Sie hin möchten, besonders wenn man nach einer Unterkategorie sucht. Außerdem, wie navigiert ein Benutzer jetzt auf Ihrer Seite über Tags?

[eisammy (Sammy)]

GitHub - discourse/Discourse-nav-links-component

Und dieser Scheiß-Skript, den ich gemacht habe, um die ursprünglichen Pfade zu ersetzen

<script>
document.addEventListener('DOMContentLoaded', function() {
   
    const updateLinks = () => {
        document.querySelectorAll('a[href*="/l/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
        document.querySelectorAll('a[href*="/l/hot"]').forEach(link => {
            link.href = 'https://segredin.com/hot';
        });
        document.querySelectorAll('a[href*="/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
    };
    
    const ocultarElementos = () => {
        // Fügen Sie hier Code ein, um Elemente auszublenden, falls erforderlich
    };

    const applyStylesToPosts = () => {
        // Fügen Sie hier Ihre Logik zum Stylen von Beiträgen ein
        // Beispiel: document.querySelectorAll('.post').forEach(post => { ... });
    };
    
    const replaceTextNodes = (node) => {
        node.childNodes.forEach(child => {
            if (child.nodeType === Node.TEXT_NODE) {
                child.textContent = child.textContent
                    .replace(/-E-/gi, ' & ')
                    .replace(/-/g, ' ');
            } else {
                replaceTextNodes(child);
            }
        });
    };

    const processTags = () => {
        document.querySelectorAll('.discourse-tag.box').forEach(tag => {
            replaceTextNodes(tag);
        });
        document.querySelectorAll('#sidebar-section-content-tags .sidebar-section-link-content-text').forEach(tag => {
            replaceTextNodes(tag);
        });
    };
 
    const TITLES = {
    "home": "Segredin - Anonymes Dampf ablassen und Geschichten",
    "hot": "Segredin - Beliebte Themen"
};

const HOMEPAGE_URLS = [
    "https://segredin.com/", 
    "https://segredin.com"
];

const HOT_PAGE_URLS = [
    "https://segredin.com/hot",
    "https://segredin.com/hot/"
];

const getCurrentPageType = () => {
    const currentUrl = window.location.href;
    
    // Prüft, ob es sich um die /hot Seite handelt
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // Prüft, ob es sich um die Startseite handelt
    if (HOMEPAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "home";
    }
    
    return null;
};

const getDesiredTitle = () => {
    const pageType = getCurrentPageType();
    return pageType ? TITLES[pageType] : null;
};

const enforceTitle = () => {
    const desiredTitle = getDesiredTitle();
    if (!desiredTitle) return;
    
    if (document.title !== desiredTitle) {
        document.title = desiredTitle;
    }
};

const startTitleObserver = () => {
    const titleObserver = new MutationObserver(enforceTitle);
    const titleElement = document.querySelector('title');
    if (titleElement) {
        titleObserver.observe(titleElement, {
            childList: true,
            subtree: true,
            characterData: true
        });
    }
    return titleObserver;
};

const monitorUrlChanges = (titleObserver) => {
    let lastUrl = window.location.href;
    setInterval(() => {
        if (window.location.href !== lastUrl) {
            lastUrl = window.location.href;
            const pageType = getCurrentPageType();
            if (pageType) {
                enforceTitle();
                titleObserver.disconnect();
                startTitleObserver();
            } else {
                titleObserver.disconnect();
            }
        }
    }, 300);
};

const mainObserver = new MutationObserver(() => {
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    enforceTitle();
});

    // Erste Ausführung
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    
    const titleObserver = startTitleObserver();
    monitorUrlChanges(titleObserver);
    
    mainObserver.observe(document.body, { 
        childList: true, 
        subtree: true 
    });

    document.addEventListener('page:changed', () => {
        processTags();
        enforceTitle();
    });
});
</script>

Ich werde diesen Code erweitern, aber im Moment funktioniert er

[eisammy (Sammy)]

Übrigens, hier ist das Ergebnis:

[Andrew_Rowe]

@Lilly

Sie erwähnen, dass Sie sie entfernt haben, weil „der Kategorien-Tab direkt da ist“ – ich gehe davon aus, dass Sie die Navigations-Pill-Schaltfläche meinen,

Wenn dies eine Navigations-Pill-Schaltfläche ist, dann ja

Entschuldigung, ich wusste nicht, wie ich es nennen sollte

@Lilly

Es ist viel intuitiver, aus dem Kategorie-Dropdown auszuwählen, um direkt dorthin zu gelangen, wo man hin möchte, besonders wenn man nach einer Unterkategorie sucht

Ich stimme zu

aber… wüsste ein neuer Benutzer, wohin er gehen möchte? Würde er nach einer Unterkategorie suchen?

@Lilly

wie navigiert ein Benutzer jetzt auf Ihrer Website über Tags?

Seitenleistenmenü?

Wird ein Erstbenutzer wissen, dass er nach einem bestimmten Tag suchen muss?

Vielleicht ist mein Ansatz falsch. Ich versuche, meine Instanz aus der Sicht eines Erstbenutzers zu betrachten, was für mich schwierig ist, da ich mehrere Jahre lang ein Discourse-Forum genutzt habe, bevor ich mein eigenes gegründet habe.

Vielleicht ist eine andere Besonderheit meiner Situation nicht typisch für Discourse im Allgemeinen. Ich veranstalte Live-Events (Sportveranstaltungsberichterstattung). Leute kommen bei diesen Veranstaltungen oft vorbei und möchten mehr darüber erfahren, wie sie mich im Internet finden können. Während der Übertragungen ermutige ich die Leute auch, das Forum zu finden. Ich habe Beschilderungen und Aufkleber mit QR-Codes, die auf das Forum verlinken.

Einige dieser Leute sind jung und handyfit. Andere sind ältere Leute, die ein Telefon besitzen, es aber kaum benutzen können, um einen Anruf entgegenzunehmen, wenn es klingelt. Ich habe beide Gruppen beobachtet, wie sie auf das Forum starrten und nicht wussten, was sie als Nächstes tun sollten. Das ist kein spezifisches Discourse-Problem, ich habe gesehen, dass sie dasselbe auf meinem YouTube-Kanal tun.

[Andrew_Rowe]

Danke Sammy, ich studiere deinen Code.

Ich vermute, ich könnte so etwas in den Head-Bereich eines Themas einfügen, wenn ich wollte (sobald ich herausgefunden habe, wie es funktioniert )

[Andrew_Rowe]

Ich habe mich letztendlich dagegen entschieden, die Schaltflächen für Kategorien und Tags mithilfe von CSS zu entfernen wie oben beschrieben, da es nach dem Klicken auf eine Kategorie keine Möglichkeit gab, zur Listenansicht der Kategorien zurückzukehren. Ich habe kürzlich diese Theme-Komponente gefunden, die eine Lösung bieten könnte

Breadcrumb Links

Summary Breadcrumb Links Preview README Repository GitHub - denvergeeks/discourse-breadcrumb-links: Breadcrumb Navigation for Discourse Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Basic Breadcrumb Links On all Topic pages: displays links back to the Subcategory (if any) and Category …