Dividere il tema Javascript in più file

I temi complessi di JavaScript possono essere suddivisi in più file, per mantenere le cose ben organizzate.

Per utilizzare questa funzionalità, è sufficiente aggiungere file alla cartella /javascripts nella directory del tema. Questi file non possono essere modificati dall’interfaccia utente di Discourse, quindi è necessario utilizzare la Theme CLI o caricare il tema da git.

I file Javascript sono trattati esattamente come quelli in core/plugins, quindi è necessario seguire la stessa struttura di file/cartelle. I file del tema vengono caricati dopo core/plugins, quindi se i nomi dei file corrispondono, prevarrà la versione del tema.


Come esempio, ora è possibile realizzare Using Plugin Outlet Connectors from a Theme or Plugin aggiungendo un singolo file al tema:

/javascripts/my-theme/connectors/discovery-list-container-top/add-header-message.gjs

import Component from "@glimmer/component"; import { service } from
"@ember/service"; export default class HeaderMessage extends Component {
@service currentUser;

	<template>
  Welcome
  {{this.currentUser.username}}
	</template>
}

Per utilizzare l’API JS, creare un inizializzatore:

/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Il tuo codice qui
});

Se hai bisogno di un asset .js totalmente diverso (ad esempio per un web worker), consulta questo argomento.


Questo documento è controllato tramite versione - suggerisci modifiche su github.

27 Mi Piace

Supponiamo che io non sappia nulla delle gerarchie di file core/plugins, perché sono venuto qui solo per creare un nuovo componente tematico. Dove dovrei cercare per scoprirlo? Quali sono le convenzioni di denominazione per le directory e i file al loro interno?

Guardando solo diversi componenti tematici in circolazione, ci sono tutti i tipi di schemi di annidamento e sottodirectory diversi in giro. Non sono riuscito a capire uno schema, o a trovare alcuna documentazione. (Ad esempio, qual è la differenza tra /initializers e /api-initializers e /pre-initializers? :crying_cat_face:)

1 Mi Piace

I file qui usano l’API. Onestamente, anche io mi sono chiesto per un po’ perché non posso mettere i file api-initializers in initializers.

Sì. È difficile da capire. Preferisco non pensare al numero di volte in cui ho passato 3 ore su qualcosa solo per scoprire che ho sbagliato il nome di qualcosa o l’ho messo nel posto sbagliato, o a volte, ho dimenticato di includerlo in uno dei tanti modi apparentemente esistenti per farlo (in plugin.rb, in un include in un file js - quale percorso? Ho bisogno di un’estensione?)

La cosa migliore è usare Installa l’app console Discourse Theme CLI per aiutarti a creare temi e far creare uno scheletro di tema per te. E rende il debug molto facile poiché lo carica automaticamente sul tuo server (un normale server di produzione) e (di solito) ricarica automaticamente il tuo browser.

Non ho idea di quale sia o se ci sia una differenza (non credo? Ma ho poca idea). Userei quello che si trova nello scheletro del tema.

C’è un repository chiamato all-the-themes. Puoi scaricarlo e cercarlo per trovare esempi. E usa sempre quello che è stato modificato più di recente.

3 Mi Piace

Gran parte di EmberJS (e Rails) si basa sulla Convenzione. Questo è ottimo la maggior parte delle volte, ma può essere incredibilmente frustrante quando si sbaglia anche solo leggermente, ad esempio con la denominazione.

3 Mi Piace

Per completezza, ho trovato una spiegazione di api-initializers/ qui:

(E questo lo collega alla documentazione di Ember, e poi inizia ad avere senso.)

Sarebbe comunque utile avere un’enumerazione/spiegazione di base delle possibili strutture di directory in un unico documento. (Ad esempio, so che connectors/ è una cosa… ce ne sono altre?)

Inoltre, per completezza: l’app Theme CLI preleva lo scheletro da:

Menziona solo api-initializers/.

(Sto effettivamente usando l’app Theme CLI, ma ho iniziato a usarla dopo aver già iniziato un componente tema, quindi avevo saltato il passaggio dello scheletro.)

2 Mi Piace