Moetwemoji: Leichte animierte Emojis (AVIF) - Beleben Sie Ihr Forum

PixPin_2026-01-04_22-04-17

Hallo zusammen! :waving_hand:

Ich habe ein neues Plugin entwickelt, um Discourse-Communities mehr Energie und dynamische Ausdrücke zu verleihen. Moetwemoji führt eine Reihe animierter Emojis ein, die Interaktionen lebendiger und unterhaltsamer machen.

:rocket: Hauptmerkmale

  • Superleicht: Alle Emojis sind im AVIF-Format kodiert.

  • Hohe Leistung: Die durchschnittliche Dateigröße beträgt nur etwa 10KB, wodurch Ihr Forum schnell lädt und dabei großartig aussieht.

  • Flexible Bereitstellung: Ich biete zwei verschiedene Versionen an, je nach Ihren Anforderungen (Überschreiben oder Ergänzen).


:package: Wählen Sie Ihre Version

Ich habe zwei separate Repositories vorbereitet, je nachdem, wie Sie diese Emojis in Ihr Forum integrieren möchten.

Option 1: Die Überschreibungsversion (Totaler Ersatz)

Wenn Sie den standardmäßigen statischen Twemoji-Satz vollständig durch diese animierten ersetzen möchten, verwenden Sie diese Version. Sie überschreibt die Systemstandards und macht die Animation zur Standarderfahrung.

Option 2: Die Paketversion (Ergänzung)

Wenn Sie die Standard-Emojis beibehalten und diese einfach als zusätzliches „Paket“ im Emoji-Auswahlmenü hinzufügen möchten, verwenden Sie diese Version. Sie fügt Ihrem Emoji-Auswahlmenü einen neuen Tab hinzu, ohne die Standardeinstellungen zu ändern.


17 „Gefällt mir“

Danke fürs Teilen :+1:

Ich wollte es testen, aber es funktioniert nicht, obwohl ich das Repository in der Datei app.yaml hinzugefügt habe.

Gibt es eine Einstellung, die ich vornehmen muss?

Danke

OK, versuchen Sie bitte die manuelle Installation

Manuelle Installationsanleitung (Override-Version)

Diese Anleitung erklärt, wie Sie das Plugin discourse-moetwemoji-twemoji-fakepng-override manuell installieren und anwenden, während sich ein Discourse-Container im Betrieb befindet, und klärt, warum ein vollständiger Neuaufbau (rebuild) für die Override-Version nicht zwingend erforderlich ist.


1. In den Discourse-Container wechseln

Gehen Sie auf Ihrem Server in das Discourse Docker-Verzeichnis (normalerweise /var/discourse) und betreten Sie den laufenden Container:

cd /var/discourse
./launcher enter app

Sie sollten sich nun in der Container-Shell befinden.


2. Das Override-Plugin manuell klonen

Navigieren Sie in das Plugins-Verzeichnis und klonen Sie das Repository:

cd /var/www/discourse/plugins
git clone https://github.com/constansino/discourse-moetwemoji-twemoji-fakepng-override.git

Überprüfen Sie, ob das Verzeichnis existiert:

ls discourse-moetwemoji-twemoji-fakepng-override


3. Das Emoji-Override anwenden

Wechseln Sie zurück in das Discourse-Stammverzeichnis:

su - discourse
cd /var/www/discourse

Überprüfen Sie den aktuellen Status (optional, aber empfohlen):

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

Wenden Sie das Override an:

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

Wenn der Befehl ohne Fehler abgeschlossen wird, wurden die Twemoji PNG-Dateien durch Moetwemoji ersetzt.


4. Wichtige Hinweise zu Neuaufbauten (Persistenz)

:red_exclamation_mark: Kein Neuaufbau erforderlich, damit das Override funktioniert

Diese Override-Version funktioniert, indem sie Dateien direkt im laufenden Container ersetzt.
Daher gilt:

  • :white_check_mark: Sie müssen NICHT ./launcher rebuild app ausführen

  • :white_check_mark: Änderungen werden unmittelbar nach Ausführung des Rake-Tasks wirksam

:warning: Aber die Änderung ist NICHT persistent

Da dies innerhalb des Container-Dateisystems geschieht:

  • Jeder zukünftige ./launcher rebuild app

  • Oder Container-Neuerstellung/-Upgrade

löscht die Änderungen, und das Emoji-Override geht verloren.

:backhand_index_pointing_right: Wenn Sie Persistenz über Neuaufbauten hinweg benötigen, müssen Sie das Plugin über app.yml-Hooks installieren und ordnungsgemäß neu aufbauen.


5. CDN- und Browser-Cache leeren (Sehr wichtig)

Nachdem das Override angewendet wurde, erscheinen Emojis möglicherweise aufgrund des Caching immer noch unverändert.

5.1 CDN-Cache leeren (z. B. Cloudflare)

Wenn Sie ein CDN wie Cloudflare verwenden:

  • Cache leeren für:

    • /images/emoji/*

    • Oder führen Sie bei Bedarf eine vollständige Cache-Löschung durch

Andernfalls werden möglicherweise weiterhin die alten Twemoji PNG-Dateien ausgeliefert.

5.2 Browser-Cache leeren

Auf der Client-Seite:

  • Seite hart neu laden (Strg + F5 / Cmd + Shift + R)

  • Oder Browser-Cache leeren

  • Oder in einem Inkognito-/Privatfenster testen

Solange sowohl der CDN- als auch der Browser-Cache nicht geleert wurden, sind die Emoji-Änderungen möglicherweise nicht sichtbar.


6. Zusammenfassung

  • Dieses Override-Plugin kann ohne Neuaufbau installiert und angewendet werden

  • Die manuelle Installation ist nützlich für:

    • Tests

    • Vorübergehende Nutzung

    • Debugging

  • Der Nachteil ist die fehlende Persistenz

  • Leeren Sie nach dem Anwenden von Emoji-Overrides immer den CDN-Cache + Browser-Cache


Haben Sie die Aufgabe wie in der README beschrieben ausgeführt?

Diese README bietet zwei Installationsmethoden:

  1. Die erste Methode erfordert einen Neuaufbau.
  2. Die zweite Methode besteht darin, manuell in den Container einzusteigen und es von GitHub herunterzuladen.

Es gibt keinen Unterschied zwischen den beiden Methoden; die erstere ist lediglich dauerhafter. Wenn der Download beim Neuaufbau mit der ersten Methode fehlschlägt, sollten Sie versuchen, die zweite Methode zu verwenden, bei der direkt im Container installiert wird. Dies liegt daran, dass dabei im Wesentlichen vorhandene Emoji-Bilder heruntergeladen und ersetzt werden.

Mir ist aufgefallen, dass die Readme 2 Installationsmethoden erklärt, aber auch erwähnt:

cd /var/discourse
./launcher enter app

su - discourse
cd /var/www/discourse

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status
RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

was im ersten Beitrag hier im Meta nicht erwähnt wird. Genauso wie die Informationen zum Caching. Deshalb dachte ich, das könnte jemand übersehen.


Übrigens führen beide Ihrer Links im ersten Beitrag zu einer Google-Suche. Gibt es einen Grund, warum Sie nicht direkt auf GitHub verlinkt haben?

1 „Gefällt mir“

Warum heißt es „moetwemoji“ und der Emoji-Ordner „twemoji“, wenn die animierten Emojis offizielle animierte Google Noto Emojis sind?

Dies wird jedoch in dieser Datei erwähnt, wo die Namensnennung unvollständig ist. Die Datei soll sich in Arbeit befinden, aber ich würde erwarten, dass eine Namensnennung vollständig ist, bevor Sie Ihre Theme-Komponente verteilen :face_with_tongue:

5 „Gefällt mir“

Entschuldigung, mein Beitrag war möglicherweise nicht umfassend genug. Ich werde ihn später überarbeiten. Vielen Dank für Ihre Korrektur.

2 „Gefällt mir“

Vielen Dank für den Hinweis – Sie haben absolut Recht.

Die Benennung ist historisch bedingt und stammt aus der Standard-Emoji-Struktur von Discourse, aber die eigentlichen animierten Assets stammen von Google Noto Emoji, nicht von Twemoji. Ich stimme zu, dass dies verwirrend ist und klargestellt werden muss.

Ich bin gerade dabei:

  • Die Quellenangabe zu aktualisieren, um die Noto Emoji-Lizenz vollständig einzuhalten
  • Die Asset-Quelle in der README zu klären
  • Die Benennung/Ordnerstruktur zu überprüfen, um Verwirrung zu reduzieren

Vielen Dank für die Überprüfung und dafür, dass Sie dies bemerkt haben.

2 „Gefällt mir“

Ich werde warten, da es trotz der Manipulationen nicht funktioniert. Mein Discourse befindet sich jedoch auf einem eigenständigen Server, den ich auf einem Ubuntu-Server betreibe. Ich weiß nicht, ob ich zusätzlich etwas bezüglich des Caches machen muss?

versuchen Sie einfach
https://"yourdomain"/images/emoji/twemoji/hugs.png?v=15

und

https://"yourdomain"/images/emoji/twemoji/hugs.png?v=15&cache=0

Beide URLs liefern sehr stabile und unbewegliche Emojis. Basierend darauf sehe ich keinen Grund, dies zu installieren. Eine Gerätefrage?

Ich denke, diese Links dienen dazu, das Plugin nach der Installation zu testen. Solange Sie das Plugin nicht verwenden, sehen Sie das Emoji, das das Plugin ersetzen würde.

Ich habe es tatsächlich installiert und sehe nichts. Vielleicht sollte ich andere Emojis in den Discourse-Einstellungen verwenden oder etwas anderes, ich weiß es nicht [1]


  1. Außerdem denke ich persönlich, dass sich bewegende Elemente Echos aus den 90ern sind :squinting_face_with_tongue:, daher bin ich nicht sehr motiviert, tiefer zu graben. ↩︎

Entschuldigung, da Sie sagten, Sie sähen keinen Grund, es zu installieren, ging ich davon aus, dass Sie es nicht getan haben.

Haben Sie den Rake-Task ausgeführt, der in der Readme des Plugin-Repos erklärt wird? Ich denke, das ist es, was das animierte Emoji dort platziert, wo Sie versucht haben, darauf mit den Links zuzugreifen.

1 „Gefällt mir“

Mein Fehler. Ich bin gerade am Telefon und war/bin zu faul, um dann zu schreiben.

Nein, das habe ich nicht getan.

Edit.

Ich habe die Readme nie gelesen, weil OP nur einen (nutzlosen) Link zu einer Google-Suche anbietet. Jetzt habe ich zusätzliche Schritte zum ursprünglichen Repository unternommen, um Informationen zu finden, die in OP hätten sein sollen oder könnten.

1 „Gefällt mir“

Ich sehe die animierten Emojis mit „https://“ihre_domain“/images/emoji/twemoji/hugs.png?v=15“, aber wenn ich zum Beispiel im Chat ein Emoji auswählen möchte, funktioniert es nicht :thinking:

Um die Komplexität zu reduzieren, empfehle ich, alles zu entfernen, was mit dem Nicht-Neuerstellen und dem Betreten des Containers zum Klonen zu tun hat. Dies ist unnötig und nicht die Standardmethode zur Verwaltung von Plugins.

Fast alle Administratoren werden periodisch neu erstellen, und Persistenz ist der wichtigste Aspekt, daher ist die app.yml-Methode die beste.

Sie können auch auf Standardanweisungen verlinken und nur die Schritte detailliert beschreiben, die einzigartig sind.

3 „Gefällt mir“