HTML personalizzato nella pagina dei gruppi

Ciao a tutti,
sto progettando una community in cui ogni utente deve chiedere il permesso per entrare in un gruppo e ogni gruppo controlla l’accesso a una categoria.
Vorrei aggiungere un messaggio di benvenuto/spiegazione in HTML alla pagina dei gruppi ( https://community.horbitercafe.com/g ).

Qual è il modo più semplice per farlo?

Grazie,
F.

Non sono sicuro che questo sia il posto giusto per i plugin, ma puoi provare così:

In Personalizza > <head>

Aggiungi questo:

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

inserisci qui il tuo HTML

</script>
1 Mi Piace

Come posso limitarlo solo alla pagina /g?

Sì, effettivamente consente di “iniettare” HTML sopra il nome del gruppo e altre informazioni nelle pagine, ad esempio https://discourse.example.org/g/foo. Grazie per aver condiviso.

@Fausto_Dassenno, stai cercando qualcosa per la pagina principale dell’elenco dei gruppi, ma non per la pagina dei dettagli del singolo gruppo?

Corretto, voglio aggiungere HTML solo nella pagina principale dell’elenco dei gruppi.

Aggiungi una classe al tuo codice HTML, ad esempio gr-horbiter

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

<div class="gr-horbiter">
il tuo codice HTML
</div>

</script>

E aggiungi questo CSS in comune

.gr-horbiter {
    display: none;
}

body.groups-page .gr-horbiter {
    display: block;
}

Non ho testato il codice, ma dovrebbe funzionare

1 Mi Piace

Grazie @Steven, la parte dello script va nella sezione HTML di un componente? Oppure devo modificare direttamente l’HTML?

Scusa, non sono sicuro di aver capito la domanda, l’inglese non è la mia prima lingua e potrei aver frainteso alcune cose.

Copia lo script e l’HTML nella sezione <head> e aggiungi il tuo messaggio di benvenuto, eventualmente utilizzando dei div o span se desideri personalizzarlo, e dovrebbe funzionare.

1 Mi Piace

Grazie @Steven, ci sono riuscito.
L’unico problema è che devo aggiungere questa funzionalità nella pagina dell’indice dei gruppi e non nella pagina dei dettagli del gruppo.
Almeno ora ho capito la logica alla base. Farò ulteriori ricerche.
Non riesco a trovare alcun connettore nella pagina dell’indice dei gruppi.

Avrei dovuto fare dei test, ora vedo qual è il problema :man_facepalming:
Il plugin outlet non funziona per la pagina principale del gruppo.

Esiste comunque un modo per aggiungere un banner, ma probabilmente non è il più pulito possibile; lo staff di Discourse potrebbe avere un metodo migliore.

Questo codice CSS ti permetterà di aggiungere del testo e uno stile, ma avrai a disposizione solo questa classe e non credo ci sia un modo per inserire un link nel banner testuale.

body.groups-page .groups-header::before {
    content: "Il tuo testo";
    width: 100%;
    margin: 0 0 15px 0;
}

Puoi aggiungere sfondo, bordo, ecc. a questa classe per personalizzare il banner e crearlo.

2 Mi Piace

Grazie,
non riesco a raggiungere il mio obiettivo con questo. Ciò che stavo cercando di fare era creare una landing page per i gruppi in modo che i nuovi utenti potessero richiedere l’accesso ai gruppi che desideravano. Per farlo, volevo fornire alcune spiegazioni utilizzando HTML.

Quanto è difficile richiedere un nuovo nome per un outlet nella pagina degli indici dei gruppi?

Se tutto ciò che desideri è qualcosa del genere, è semplice

.welcome-message {
    display:none;
}
.groups-page .welcome-message {
    display:block;
    margin: 20px;
}

Quindi aggiungi questo alla sezione Dopo l’Intestazione

<div class="welcome-message">Inserisci qui le tue informazioni di benvenuto e le istruzioni</div>

3 Mi Piace

Sì, è senz’altro la soluzione migliore

A volte complico le cose :man_facepalming:

3 Mi Piace

Ottimo, funziona!
E se volessi fare lo stesso ma mostrandolo solo nella homepage? Cosa dovrei sostituire a .groups-page?

Guarda la classe utilizzata in body nella tua homepage HTML.

Ad esempio, qui su meta.discourse.org:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">

La classe utilizzata è navigation-topics.

1 Mi Piace

Oppure, se desideri qualcosa di più elaborato, prova

Interessante, nella mia homepage ho questo

image

Qual è la pagina della tua home page?

image
È questo che stai chiedendo?

Capisco qual è il problema con la tua classe body vuota.
Invece di guardare il codice sorgente della pagina, premi F12 per aprire gli strumenti di sviluppo di Chrome/Firefox/Edge e vai alla scheda “Element”.
Osserva il codice HTML da lì e il tuo <body> mostrerà le classi corrette.