Die Erfahrung von Tecnoblog mit Discourse-Kommentaren

Ah, jetzt verstehe ich. Ich hatte angenommen, der Zweck von embedMaxHeight sei es, die Kommentare in einem nativeren Stil darzustellen und das Scrollen so weit wie möglich zu minimieren (außer bei umfangreichen Threads, die weiterhin ein Scrollen erfordern würden). Deshalb habe ich es auf 15000px gesetzt. Ich werde den Wert etwas reduzieren.

In diesem Fall glaube ich, dass embedMinHeight möglicherweise nicht wie beabsichtigt funktioniert. Selbst wenn es auf 400px gesetzt ist, hat das Embed immer noch eine Mindesthöhe von 600px, wobei am Ende eine kleine Lücke bleibt.

5 „Gefällt mir“

Hey!

Das neu gestaltete Kommentarformular ist deutlich überlegen, besonders im mobilen Erlebnis! Allerdings habe ich zwei kleinere Probleme festgestellt:

  1. Die Breite des Formulars überschreitet die des Bildschirms, was ein unbeabsichtigtes horizontales Scrollen erfordert;
  2. Die Navigationskomponente, die die Anzahl der Beiträge anzeigt, bleibt beim Scrollen über dem Formular liegen.

3 „Gefällt mir“

Ja! @keegan hat es mit genau diesem Anwendungsszenario als Kern entwickelt. Schön, dass es dir gefällt. Wir haben es jedoch erst vor wenigen Stunden zusammengeführt, arbeiten also noch an Nacharbeiten, wie z. B. der brechenden Breite der Symbolleiste und dem Verhalten beim Senden mit Enter.

4 „Gefällt mir“

Ich frage mich, ob es nicht eine gute Idee wäre, dieses Formular auch direkt im Thread (auf Discourse) anzuzeigen. Ein geöffnetes Formular ist für ein nicht-technisches Publikum in der Regel viel einladender und benutzerfreundlicher. Vielleicht lohnt sich ein Test, um zu sehen, ob dies die Interaktion steigert?

3 „Gefällt mir“

Das war tatsächlich ein Fehler, den ich gerade behoben habe unter

2 „Gefällt mir“

Dies wurde nun behoben, bitte aktualisieren Sie!

1 „Gefällt mir“

Ich habe ein weiteres Problem auf deiner Website bemerkt. Ich sehe, dass du das Darkmode-/Lightmode-System deines Blogs mit dem neuen Discourse-Embed integriert hast, sodass sich der Modus des Embeds automatisch ändert, wenn der Modus des Blogs geändert wird. Allerdings funktioniert die Integration zwar in Firefox und Chrome einwandfrei, nicht aber in Safari. Ich vermute, dass dies ein Problem von Discourse ist, denn nicht nur ist der Popup-Hinweis „Zugriff zulassen

Wenn sowohl dein Blog als auch Discourse den automatischen Dunkelmodus nutzen, der dem System folgt, bleiben sie synchronisiert.

Wir haben den automatischen Dunkelmodus in Discourse hinzugefügt unter Automatic Dark Mode color scheme switching

2 „Gefällt mir“

Ja, aber wenn ich richtig verstanden und mich richtig erinnere, ermöglicht dies Discourse, zu erkennen, ob das Betriebssystem den Dunkelmodus verwendet, und sich entsprechend anzupassen. Der Beitrag, den ich gestartet habe, war eine Antwort auf den von dir verlinkten Beitrag (der seinerseits auch darauf verwies) und betraf den Schalter/die Schaltfläche in einem Blog, der manuell zwischen dem hellen und dem dunklen Modus des Blogs umschaltet (unabhängig vom Modus des Betriebssystems). Klingt das richtig (und macht meine vorherige Frage damit relevant)?

Um es klarzustellen, dies ist das Skript, das jemand für die Verwendung auf meinem Blog geschrieben hat, das jetzt wohl angepasst werden muss (vielleicht müssen nur ein paar Klassen geändert werden, ich bin mir nicht sicher).

<style>:root.dark{background: #1D2224}</style>
<script>
    const discourseUrl = 'https://ff2f.discourse.group';
    const clearDarkModeThrottle = () => window.darkThrottled = false;
    window.isDark = false;
    window.discourseLoaded = false;
    window.setDarkMode = state => {
        window.isDark = state;
        window.darkThrottled = true;
        localStorage.setItem('darkmode-enabled', state);
        Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
        document.documentElement.classList[state ? 'add' : 'remove']('dark');
        setTimeout(clearDarkModeThrottle, 250);
        window.discourseLoaded && setIframeStyle();
    };
    let sub = () => {};
    if (localStorage.getItem('darkmode-enabled') === "true") {
        document.documentElement.classList.add('dark');
        // Elemente nach domContentLoaded aktualisieren
        sub = () => window.setDarkMode(true);
    }
    document.addEventListener('DOMContentLoaded', () => {
        Array.from(document.getElementsByClassName('darkmode-toggle'))
            .forEach(element => element.onchange = darkmodeToggled);
        function darkmodeToggled() {
            const input = this.querySelector('input');
            window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
        }
        sub();
        sub = null;
    });

    const handleMessageListener = (event) => {
        var origin = event.origin;
        if (origin === discourseUrl) {
            setIframeStyle();
            window.discourseLoaded = true;
        }
    };

    const setIframeStyle = () => {
        const iframe = document.getElementById("discourse-embed-frame");
        if (iframe && iframe.contentWindow) {
            iframe.contentWindow.postMessage(
                window.isDark ? "dark" : "light",
                discourseUrl
            );
        }
    };

  window.addEventListener("message", handleMessageListener);
</script>

Ich habe Discourse gerade auf die neueste Version aktualisiert, aber ich sehe zwei Probleme:

  1. Das Textfeld ist defekt – beim Tippen erscheint nichts
    1. Es funktioniert, wenn ich den Modus auf Markdown umstelle.
  2. Die Einbettung zeigt weiterhin eine horizontale Bildlaufleiste auf Safari/iOS;

Klar,

Das ist das CSS, das ich in Discourse verwende

header a.button {
    color: #fff;
    padding: 6px 8px;
    background-color: var(--tertiary);
    display: inline-block;
}

.username a.staff {
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--tertiary-hover);
    // text-shadow: 0px 0px 14px var(--tertiary-400);
    background-color: var(--tertiary-400);
}

@media (prefers-color-scheme: light) {
     /* Haupt-Hintergrund des Iframes */
    html, body {
        font-family: 'Inter', sans-serif;
    }
}
    
@media (prefers-color-scheme: dark) {
    /* Haupt-Hintergrund des Iframes */
    html, body {
        background-color: #1e2021 !important; /* Dein --bg */
        color: #f7f7f7 !important; /* Dein --body-color */
        font-family: 'Inter', sans-serif;
    }
    
    header.discourse {
        border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
    }
    
    article.post {
        border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
    }
    
    /* Haupttextfarbe */
    .embedded-posts, 
    .embedded-posts p,
    .embedded-posts h1, 
    .embedded-posts h2, 
    .embedded-posts h3 {
        color: #f7f7f7 !important;
    }

    /* Hintergrund von Blöcken, z. B. Footer des Embeds (Antwortoptionen) */
    .embedded-footer {
        background: #27292b !important; /* Dein --bg-2 */
        border-top: 1px solid #27292b !important;
    }

    /* Randfarbe (damit helle Ränder nicht sichtbar sind) */
    .embedded-posts, .embedded-footer {
        border-color: #27292b !important;
    }
    
    /* Stellt sicher, dass Links/Buttons die richtige Farbe haben */
    // a:link, a:visited, .topic-post .post-action-list button {
    //     color: #35bcf1 !important; /* Dein --link-color */
    // }
}

In diesem Fall wäre meiner Meinung nach der richtige Ansatz, das Monitoring-Ereignis auszulösen, ohne das gesamte Tag zu feuern. Die aktuelle Konfiguration verfälscht unsere Analytics, da sie ein page_view-Ereignis auslöst, was alle Website-Statistiken künstlich in die Höhe treibt.

Overnight sind unsere Seitenaufrufe in die Höhe geschossen, doch diese Zahlen sind künstlich – sie ergeben geschäftlich keinen Sinn.

Nicht zu vergessen: Wir duplizieren derzeit das Laden und Verarbeiten von Skripten.

Im Fall von GTM (Google Tag Manager) ist es noch schlimmer: Jedes andere Skript im Konto wird doppelt injiziert, einschließlich Google- und Meta-Ads-Pixel, Skripte von Drittanbieter-Werbenetzwerken und mehr.

Hinsichtlich der nativen Discourse-Analytics schlage ich eine weitere Anpassung vor: Teilen Sie den Embed-Verkehr in eine eigene Kategorie auf. Dies würde uns ermöglichen, Community-Verkehr und Embed-Verkehr separat zu betrachten.

2 „Gefällt mir“

Vielen Dank dafür, ich schätze es sehr. Es hinterlässt mich jedoch etwas verwirrt. Als ich versuchte, den Dark-Mode-Umschalter auf meinem Ghost-basierten Blog mit dem Discourse-Einbettung zu nutzen (da dies standardmäßig nicht funktionierte), wurde mir schließlich gesagt, dass ich Code mit postMessage implementieren müsste (was jemand für mich gebaut hat und was funktioniert hat). Der von Ihnen bereitgestellte Code enthält jedoch überhaupt kein JavaScript, was für mich keinen Sinn ergibt, und ich kann nicht verstehen, warum es aufgrund der WordPress-Nutzung von Haus aus funktionieren sollte. Wie auch immer, trotzdem vielen Dank.

Hallo zusammen, ich wollte nur kurz nachhaken, ob sich jemand bereits damit befasst hat.

Meine Benutzer berichten, dass sie das Formular aufgrund des Problems mit dem Textfeld überhaupt nicht nutzen können. Das stellt für unsere Community mittlerweile ein echtes Hindernis dar.

LucasMiller: Die Kommentarschnittstelle unter den Artikeln weist einen Fehler auf; ich kann nichts zum Posten eingeben (getestet sowohl auf iPhone als auch auf Android/Xiaomi). Man klickt auf das Textfeld, um zu tippen, aber es wird keine Eingabe registriert. Bitte schaut euch das, wenn ihr Zeit habt!

Dies tritt nur bei Artikeln auf, bei denen es sich um den ersten Kommentar handeln würde.

LucasMiller: Ich konnte nur posten, indem ich ein Zitat erstellte, ohne Text hinzuzufügen. Erst nachdem ich zur Community-Oberfläche weitergeleitet wurde (anstatt unter dem Artikel zu bleiben), konnte ich tatsächlich meinen Kommentar hinzufügen.

Der Markdown-Workaround hilft zwar, ist aber für den durchschnittlichen Benutzer nicht ideal. Jegliche Hinweise oder vorübergehende Lösungen wären sehr willkommen! Nochmals vielen Dank für die Hilfe.

cc @Falco

1 „Gefällt mir“
4 „Gefällt mir“

Das sollte es beheben; es wird heute später veröffentlicht.

Danke, @renato

4 „Gefällt mir“

Danke @renato, es ist behoben!

Nur als Hinweis: Das horizontale Scrollen wird auf mobilen Geräten weiterhin angezeigt, falls du Zeit hast, das anzusehen.

1 „Gefällt mir“

Ich kann das auf meinem Handy nicht nachvollziehen.

1 „Gefällt mir“

Bei mir tritt es bei allen Artikeln auf. Vielleicht ist es ein nur iOS-spezifisches Problem? Hier sind einige Screenshots aus Safari und Chrome.

1 „Gefällt mir“

Bei mir kein Reproduzierbarkeitsproblem, auch nicht auf iOS.