Componenti personalizzati -- aggiungi pulsante o testo in qualsiasi outlet del plugin

:information_source: Riepilogo Aggiungi un pulsante o del testo in qualsiasi punto
:hammer_and_wrench: Repository https://github.com/literatecomputing/discourse-custom-components
:question: Guida all’installazione Come installare un tema o un componente tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’utilizzo dei temi di Discourse

Installa questo componente tema

Aggiunge un pulsante di collegamento o testo arbitrario in qualsiasi punto di inserimento del plugin. (Ignora le filigrane nelle immagini: ho fatto queste schermate su un sito di staging/test.)

Per vedere dove si trovano i punti di inserimento del plugin, usa Introducing Discourse developer toolbar per trovarli. Se non sai cos’è un punto di inserimento del plugin, puoi dare un’occhiata a Using Plugin Outlet Connectors from a Theme or Plugin, ma questo componente ti permette, con alcune restrizioni, di inserire testo in qualsiasi punto di inserimento del plugin senza programmare o capire veramente cos’è un punto di inserimento del plugin.

Ho iniziato a sviluppare questo plugin per qualcuno che voleva visualizzare un pulsante “clicca questo pulsante per iscriverti in modo da poter inviare messaggi privati” sui profili utente e sulle schede utente. Volevano che il pulsante venisse visualizzato se l’utente non poteva inviare messaggi privati. Poiché non sono sempre così intelligente come penso di essere, ho scritto il componente utilizzando i gruppi per determinare se il pulsante veniva visualizzato. Un problema con questo approccio era che i membri dello staff non erano nel gruppo degli iscritti, quindi vedevano il pulsante “devi iscriverti” anche se potevano inviare messaggi privati. Inoltre, il gruppo era nascosto, quindi era impossibile usarlo comunque in un componente tema. Ho riscritto quel componente tema per utilizzare currentUser.can_send_private_messages per determinare se visualizzare il pulsante.

Per chi è questo?

Se vuoi inserire un pulsante con un link o del testo arbitrario visualizzato o nascosto per determinati gruppi, questo ti permetterà di inserirli in qualsiasi punto di inserimento del plugin. Vuoi aggiungere un pulsante di collegamento “Devi iscriverti” tra ogni messaggio tranne quelli che non sono membri? Questo lo farà. Vuoi inserire dell’HTML arbitrario in un punto di inserimento del plugin, solo per vedere come apparirà? Questo lo farà.

Come aiuta gli sviluppatori

Questo tema contiene alcuni semplici esempi su come:

ma se stai cercando di farlo all’interno di un <template> all’interno di un file .gjs, funziona in modo leggermente diverso (come {{htmlSafe component.text}})

17 Mi Piace

Lo spazio rende il testo non in grassetto.


Ottimo componente!

5 Mi Piace

Sarebbe possibile aggiungere segnaposto agli URL dei pulsanti, ad esempio per far sì che l’URL contenga l’ID dell’argomento in cui si trova l’utente?

Non sono del tutto sicuro. Se hai un budget, ci darò un’occhiata.

Cosa farebbe il tuo pulsante se avesse l’ID dell’argomento?

Se lo scopri e vuoi fare una PR, probabilmente la accetterò.

Sono abbastanza sicuro che la risposta sia no, ma che potresti usare la soluzione alternativa descritta qui

2 Mi Piace

Ciao @pfaffman

Vogliamo aggiungere un set di pulsanti a ogni argomento per i membri del nostro gruppo di utenti dell’account aziendale.
Il pulsante attiverebbe la creazione di un nuovo PM che includerebbe l’URL corrente su cui si trova l’utente.

In questo modo i nostri clienti aziendali possono inviarci richieste per fissare, evidenziare o “sponsorizzare” argomenti specifici.

1 Mi Piace

Come sai, puoi creare un URL che aprirĂ  un nuovo compositore di argomenti. Potresti fare in modo che sia quello il link aggiunto dal componente del tema.

Non credo sia possibile farlo senza aggiungere codice al componente del tema (ma forse lo è?). Forse qualcuno ha un’idea al riguardo e offrirà quella soluzione qui (o sull’altro argomento). In caso contrario, puoi contattarmi o pubblicare in Marketplace con la descrizione di ciò di cui hai bisogno e un budget.

3 Mi Piace

Il blocco di testo della demo non è allineato con il pulsante della demo e il resto. Uso extra-nav-item nel block outlet.

Penso che tu debba aggiungere la classe di quegli altri pulsanti a quello che hai aggiunto.

Cosa intendi? Ho provato a usare la stessa classe del pulsante demo.

Screenshot 2025-12-14 at 7.19.54 PM

Screenshot 2025-12-14 at 7.19.18 PM

sì. Poiché si tratta di testo e non di un pulsante, dovrai aggiungere del CSS per farlo assomigliare alle altre cose che sono pulsanti lì.

Il componente tema ha inserito il testo dove lo desideri, ma non è progettato per stilizzarlo come desideri.

Aggiungere questo al tuo CSS in qualche tema dovrebbe funzionare.

.custom-component.btn-custom {
  display: inline-flex;
  align-self: center;
}

Ciao, non funziona. Inoltre, anche se il Gruppo Blocco Testo è impostato su Tutti, il blocco di testo non viene visualizzato per gli ospiti.

Devi far corrispondere la classe del blocco di testo nelle impostazioni del tema alla classe nel CSS che ho mostrato.

Inoltre, dovresti cambiare l’impostazione in modo che NASCONDA i gruppi corrispondenti anziché mostrare i gruppi corrispondenti

image

Se hai bisogno di ulteriore aiuto e hai un budget, il mio indirizzo email è nella mia scheda utente.

Grazie! Sono riuscito a far funzionare il CSS!

Fantastico! Sono contento che funzioni! Quella roba del CSS è ancora complicata per me.