Wie verwende ich Bilder aus Assets in HTML einer Glimmer-basierten Theme-Komponente?

Entwickler
1

Include assets (e.g. images, fonts) in themes and components scheint sich, wenn ich es richtig verstehe, immer noch auf den Handlebars-Weg zu beziehen. Ist der neue Glimmer-Weg bereits verfügbar, um Bilder aus dem assets-Verzeichnis der Themenkomponente in einer HTML(-Vorlage) derselben Themenkomponente nutzbar zu machen?

Mein Anwendungsfall ist der Ersatz der jetzt defekten Legacy-Themenkomponente, die unter Templating of my "component" broke. How do I fix it? beschrieben wird.

Was ich versucht habe

Ich habe ein neues Themenkomponentenprojekt mit discourse_theme new discourse-tc-geowebforum-sponsors generiert und dann versucht, das vorherige Plugin ohne die bedingte Logik und mit einer Inline-Vorlage zu replizieren, was jedoch zu Folgendem führte:

[THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url:

in der Browserkonsole.

Ich habe auch verschiedene Kombinationen ausprobiert:

  • Die Vorlage in eine Konstante auslagern
  • Einfache (anstelle von doppelten) geschweifte Klammern
  • Einen Funktionsaufruf (themeRelativeUrl("asseco_berit.jpg")) innerhalb der geschweiften Klammern verwenden
  • Die Vorlage nach javascripts/discourse/components/geowebforum-sponsors.gjs verschieben (und sie aus dem Initialisierer importieren)
  • Die Vorlage nach javascripts/components/geowebforum-sponsors.gjs verschieben (und sie aus dem Initialisierer importieren)
  • Eine class GEOWebforumSponsorsComponent extends Component {} in dieser Datei einführen und diese im Initialisierer importieren (während die Vorlage unter dem Namen template aus derselben Datei wie die Klasse exportiert wird, wie eine LLM mir vorgeschlagen hat – ich bin mir immer noch nicht sicher, ob das irgendeinen Sinn ergeben würde.)

Ich erhielt entweder:

  • denselben Fehler (wenn auch aus dieser anderen Datei)
    oder
  • klass is not an Ember component
    oder
  • wörtliche Vorlagenplatzhalter im resultierenden DOM, was natürlich zu 404-Fehlern für die Bildquellen führte.
2 „Gefällt mir“
Templating of my "component" broke. How do I fix it?
2

Hmm, hast du diesen Teil gesehen?

1 „Gefällt mir“
3

Ist es ein „Upload“, wenn ich sie in das assets-Verzeichnis des Quellcode-Projekts der Theme-Komponente einfüge?

4

Ja. Sie können diese direkt in das Verzeichnis assets/ legen.

1 „Gefällt mir“
5

Mit den Hinweisen hier und etwas Hilfe vom ask.discourse.com-Bot habe ich es zum Laufen gebracht:

  • Hier ist der relevante Commit zusätzlich zu dem, was die discourse_theme-CLI generiert hat.
  • Hier ist der Unterschied zu meinem vorherigen erfolglosen Versuch, der im ersten Beitrag erwähnt wurde.

Vielen Dank, @NateDhaliwal!

Wichtige Dinge, mit denen ich auf dem Weg hierher zu kämpfen hatte:

  • In den Vorlagen funktionieren weder beliebige JavaScript-Ausdrücke (wie Funktionsaufrufe) noch Filterausdrücke (in der Form some-transormation-function someVariableOrLiteral) in den doppelten geschweiften Klammern. Dort können nur einzelne Variablen interpoliert werden.
  • Bei einer der beiden Ressourcen hatte ich vergessen, den Verzeichnisnamen assets/ im entsprechenden Dateipfadwert in about.json anzugeben. Dies führte zu einem stillen Fehler, sodass die entsprechende Einstellung undefined war, was wahrscheinlich dazu führte, dass die gesamte Vorlage stillschweigend weggelassen wurde oder etwas Ähnliches.
  • Während der Entwicklung hatte die per discourse_theme watch ... synchronisierte Theme-Komponente weder in der Vorschau noch bei expliziter Aktivierung eine Auswirkung. Das Problem wurde behoben, indem discourse_theme watch ... eine neue Kopie der Komponente auf der Instanz erstellen ließ (und die vorherige Kopie löschte). Ich bin mir nicht sicher, was genau dort passiert ist.
6

Haben Sie die Browserkonsole überprüft? Fehler in Ihrer Komponente werden dort gemeldet, und wenn Fehler vorliegen, wird Ihre Komponente nicht angezeigt (oder nur teilweise angezeigt).