Come personalizzare il testo di un post incorporato?

Supporto
1

Ho un sito dove pubblico vari tutorial e blog e uso Discourse sia come forum che come commenti utilizzando la funzionalità di incorporamento.

Questo funziona benissimo per la maggior parte, tranne che quando creo una nuova pagina sul sito principale, tutto il contenuto viene incluso nel post di Discourse. Alcuni dei miei utenti non conoscono nemmeno il sito principale, perché leggono sempre il post completo sul forum! Il che è un problema perché funzionalità come gli editor di codice incorporati non funzionano su Discourse, quindi l’esperienza risulta difettosa.

In un mondo perfetto, il post di Discourse sarebbe solo un link breve e molto evidente al post originale sulla pagina principale. Magari qualcosa del genere:

Visualizza il post originale qui:

https://example.com

Le risposte a questo thread verranno visualizzate come commenti al post originale!

Ho provato a disabilitare l’impostazione embed truncate come descritto in questo thread, ma questo sembra nascondere il pulsante “mostra post completo” ma mostra comunque tutto il contenuto nel post.

Ho anche provato a modificare il messaggio embed.imported_from, ma questo cambia solo il piccolo testo in fondo che la gente sembra già non notare.

Ho anche provato a modificare manualmente il post dopo che Discourse lo crea, ma il markdown non viene renderizzato in HTML e viene visualizzato come testo normale. Questo sembra simile a questo problema: Customizing the "Embedding" Behavior by Disabling Show Full Post?

C’è un’impostazione che mi sfugge, o qualche altro trucco che posso usare per personalizzare il testo in un post di Discourse generato automaticamente? Magari qualcosa che posso includere nell’HTML del sito principale per ingannare Discourse a mostrare la cosa giusta? O non mi dispiace modificarlo manualmente, se c’è un modo per correggere il problema del rendering del markdown.

Grazie per qualsiasi aiuto possiate offrire!

1 Mi Piace
2

Mi scuso per il rialzo, ma sarei molto grato se qualcuno avesse qualche idea da provare!

3

Ehi Kevin, posso solo confermare se stai usando il plugin WP Discourse o un embed javascript?

1 Mi Piace
4

Grazie per la risposta! Sto usando l’incorporamento JavaScript. Ad esempio, ho questa pagina:

Che contiene questo codice di incorporamento:

<script type="text/javascript">
DiscourseEmbed = { discourseUrl: location.protocol 
	+ '//forum.happycoding.io/',
	discourseEmbedUrl: location.protocol + '//happycoding.io/tutorials/javascript/react-css' };
	
(function() {
	var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
	d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
	(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>

Ciò crea questo post sul mio Discourse:

https://forum.happycoding.io/t/css-in-react/1092

E se ci clicchi sopra, vedrai che il post contiene il testo completo della pagina originale.

5

Grazie per il chiarimento.

Perché hai abilitato l’impostazione del sito embed truncate in Discourse? Sono solo un po’ confuso perché menzioni di averla disabilitata, ma dici anche che il tuo problema è

L’impostazione di troncamento dell’incorporamento è lì in parte proprio per questo motivo. Significa che l’utente vedrà solo un estratto parziale del post su Discourse stesso.

Potresti spiegare un po’ di più quale comportamento specifico dell’utente stai cercando di evitare e quale comportamento specifico dell’utente stai cercando di incoraggiare.

1 Mi Piace
6

Sono tornato indietro e ho esaminato l’impostazione embed truncate. Guardandola di nuovo ora, suppongo che abilitarla sia marginalmente meglio, ma spero ancora in un modo per evitare di mostrare l’intero testo dell’articolo originale in Discourse. In altre parole, non voglio nascondere l’intero testo dietro il clic di un pulsante, ma voglio solo mostrare un link all’articolo originale.

Il comportamento che sto cercando di evitare è che gli utenti vengano sul mio Discourse e leggano l’intero articolo sul Discourse, piuttosto che sulla pagina originale. Questo è un problema perché l’intero testo sul Discourse contiene spesso bug (con JS interattivo, codice incorporato, ecc.), e poi ricevo segnalazioni di bug in cui la soluzione è smettere di leggere sul Discourse e andare invece sul sito “reale”.

In altre parole, il comportamento dell’utente che sto cercando di incoraggiare è leggere l’intero articolo sulla pagina originale, piuttosto che sul post di Discourse.

Questo potrebbe sembrare minore (e in linea di massima lo è), ma la mia paura è che gli utenti vengano sul mio Discourse, pensando che il comportamento della pagina sia difettoso, e se ne vadano prima di rendersi conto che c’è una pagina sul mio sito “reale” che dovrebbero leggere invece del Discourse.

Alcune possibili opzioni che ho considerato:

  • Esiste un’impostazione che dice a Discourse di includere solo un link e di non includere affatto parte del post originale?
  • Esiste una classe CSS o un altro attributo che posso aggiungere al mio HTML originale per indicare quale parte dell’articolo deve essere inclusa (o esclusa) nel post di Discourse?
  • Forse potrei aggiungere CSS personalizzato al Discourse per nascondere il pulsante Mostra post completo...?
7

Grazie per la spiegazione Kevin. Non ci sono impostazioni specifiche per questo problema, ma ci sono due modi in cui potresti affrontarlo.

Personalizza quale HTML viene estratto dal tuo sito

Il modo in cui funzionano gli embed è che raschiano il contenuto da un sito utilizzando la gemma Readability. La gemma e il suo output utilizzano le seguenti opzioni per filtrare quale HTML viene raschiato

opts[:whitelist] = SiteSetting.allowed_embed_selectors if SiteSetting.allowed_embed_selectors.present?
opts[:blacklist] = SiteSetting.blocked_embed_selectors if SiteSetting.blocked_embed_selectors.present?
allowed_embed_classnames = SiteSetting.allowed_embed_classnames if SiteSetting.allowed_embed_classnames.present?

Quindi potresti impostare le impostazioni del sito allowed_embed_selectors, blocked_embed_selectors o allowed_embed_classnames per limitare quale contenuto viene estratto dal tuo HTML e mostrato nel post di Discourse, ad esempio potresti limitarlo a classi inesistenti in modo che non venga estratto alcun contenuto.
Il contenuto raschiato dal sito ha quindi questo HTML aggiunto:

"\n<hr>\n<small>#{I18n.t('embed.imported_from', link: \"<a href='#{url}'>#{url}</a>\")}</small>\n"

Quindi dovresti solo personalizzare il testo embed.imported_from nel pannello di amministrazione per dire all’utente di leggere il contenuto sul blog. Nota che puoi interpolare il link al contenuto in quel testo, ad esempio la versione inglese del testo della localizzazione è

This is a companion discussion topic for the original entry at %{link}

Nascondi il pulsante Mostra post completo

Come hai suggerito, nascondere il pulsante Mostra post completo con CSS dovrebbe funzionare anche.

2 Mi Piace
8

Faccio fatica a capire perché non ci sia un’opzione per personalizzare il testo completo incorporato. Non voglio estrarre alcun contenuto effettivo dall’URL incorporato, ma solo un link ad esso con una breve descrizione (ad esempio, solo il riepilogo meta).

Al momento lo faccio con una chiamata API automatizzata, ma voglio passare alla funzionalità di incorporamento nativa.

Ho provato a creare un elemento nascosto sul sito sottoposto a scraping specificamente per Discourse per estrarre solo quell’unico elemento, ma lo svantaggio è che il onebox non verrà visualizzato per il link.

Anche la personalizzazione di embed.imported_from presenta delle limitazioni, poiché è sempre forzato in un tag <small> che non consente alcuna personalizzazione effettiva.

9

Sembra che tu non voglia un embed, che è, per sua natura, l’“incorporamento” di contenuti da un altro luogo.

Perché vuoi cambiare?

10

Vero, voglio solo la creazione automatica di un thread ogni volta che viene pubblicato un nuovo articolo del blog.

Tuttavia, voglio anche utilizzare la funzionalità nativa di embed JS per mostrare i commenti sotto il post del blog sul sito esterno, che viene fornita anche con il comportamento di embed nel forum.

La mia attuale automazione presenta un po’ di ritardo (non in tempo reale) e implementare la creazione automatica di un thread nel nostro CMS ogni volta che viene pubblicato un nuovo articolo è un po’ più difficile, poiché non si tratta solo di un CMS per blog e non esiste nemmeno un evento distinto di “pubblicazione”.

In ogni caso, ci saranno conflitti tra l’embed JS che tenta di creare il thread e la mia automazione, con il primo che probabilmente sarà più veloce nella maggior parte dei casi. Ecco perché voglio “passare” all’utilizzo della sola funzionalità di embed JS, con lo svantaggio che i thread dovranno essere modificati manualmente ogni volta.

Sono felice di sentire suggerimenti! :smile:

11

Grazie per la spiegazione.

Ok, se ho capito bene:

  1. vuoi la funzionalità di creazione di argomenti e collegamento di commenti di JS embeds; e
  2. vuoi solo un link con una breve descrizione nel primo post dell’argomento collegato in discourse.

È corretto? Per il punto 2 hai provato l’impostazione del sito embed truncate? Se sì, cosa non ti è piaciuto? Capisco che ne hai parlato un po’ nella tua prima risposta, tuttavia potresti spiegare specificamente con cosa stai lottando? Magari fornisci un esempio di cosa ti impedisce di raggiungere il tuo risultato desiderato (e qual è esattamente quel risultato desiderato).

1 Mi Piace
12

Sì, hai capito.

Il problema deriva dal onebox del link, che non viene mostrato perché il contenuto incorporato viene sempre racchiuso in tag HTML. :smiley:

So che questo sembra un problema minore (e lo è), ma lo svantaggio in termini di qualità della vita derivante dalla necessità di modificare manualmente ogni articolo è significativo e qualcosa che volevo risolvere da tempo.

Ecco come vorrei che apparisse (usando un esempio di post del blog di Discourse):

Screenshot 2024-05-20 at 12.29.45
Screenshot 2024-05-20 at 12.29.451338×840 81.9 KB

Attualmente, dovrei armeggiare con elementi nascosti sul sito web per poter estrarre specificamente l’URL e il riassunto, e anche in quel caso, il problema è che il onebox non viene visualizzato. L’unica cosa che posso personalizzare più o meno completamente è la parte “Leggi il post completo…” in fondo.

Suppongo che quello che chiedo sia la possibilità di aggiungere qualcosa allo snippet JS come questo:

DiscourseEmbed = {
    discourseUrl: 'https://forum.example.com/',
    discourseEmbedUrl: 'https://blog.discourse.org/2024/03/a-warm-welcome-to-spiceworks',
    discourseRaw: 'https://blog.discourse.org/2024/03/a-warm-welcome-to-spiceworks\n\nSiamo entusiasti di condividere il trasferimento della community di Spiceworks a Discourse! Il team di Spiceworks ha lavorato a stretto contatto con il nostro team di migrazione\n\n<small>Leggi il post completo su <a href="https://blog.discourse.org/2024/03/a-warm-welcome-to-spiceworks/">discourse.org</a>. Questo post è stato creato automaticamente e le risposte verranno mostrate sul sito web.</small>'
};

discourseEmbedRaw che equivale al valore raw in una normale richiesta API a /posts.json.

Ma capisco che questo potrebbe essere un requisito di un caso limite e non essere rilevante per la maggior parte degli utenti. Suppongo che cercherò di risolvere questo problema creando gli argomenti tramite API prima che lo snippet JS tenti di farlo.

13

Non te lo consiglierei.

Ciò causerebbe vari problemi. Lasciamo perdere per ora.

Apprezzo che idealmente vorresti il controllo completo su tutto, tuttavia abbi pazienza mentre tento di tradurre le tue esigenze in quelli che potrebbero essere miglioramenti fattibili al sistema attuale. Tieni presente che questi sono solo suggerimenti e non ho il controllo su ciò che viene accettato dal team di Discourse.

Un post incorporato in Discourse è essenzialmente composto da due cose:

  1. HTML “importato da” (cioè il link)
  2. Contenuto HTML dalla pagina collegata, completo o troncato.

1. Controllo sull’HTML “importato da”

Attualmente, questo HTML è codificato come

 "
\n<hr>\n<small>#{I18n.t("embed.imported_from", link: "<a href='#{url}'>#{url}</a>")}</small>\n"

Vorresti personalizzarlo per essere, ad esempio, solo l’URL in modo che possa essere onebox. Penso che un miglioramento fattibile sarebbe un’impostazione del sito che semplicemente la cambi in “solo URL”, in modo che non dovresti consentire agli amministratori di inserire HTML da qualche parte.

2. Controllo sul contenuto HTML troncato

Puoi già farlo. Imposta semplicemente l’impostazione del sito allowed embed classnames su un nome di classe di un elemento che hai utilizzato per racchiudere l’estratto che desideri sul tuo sito, ad esempio:

Su Discourse

Imposta queste impostazioni del sito:

  • embed truncate su false
  • allowed embed classnames su “discourse-excerpt”

Sulla tua pagina del blog

<div class="discourse-excerpt">
Siamo entusiasti di condividere il passaggio della community di Spiceworks a Discourse! Il team di Spiceworks ha lavorato a stretto contatto con il nostro team di migrazione
</div>

3. Controllo sull’ordine dell’HTML “importato da” e del Contenuto HTML

Se ho capito bene, vuoi che la parte “importato da” (ad esempio, solo l’URL) venga prima del contenuto HTML (o del contenuto troncato). Ancora una volta, il modo più semplice per farlo sarebbe un’impostazione booleana del sito, qualcosa come embed imported from above content.

Quindi, in breve, se ho capito bene, potresti ottenere questo con l’aggiunta di due nuove impostazioni booleane e alcune piccole modifiche alla classe TopicEmbed. Noterai che tutte queste modifiche sono a discourse/discourse stesso poiché l’elaborazione deve avvenire lì.

Come ho menzionato sopra, questi sono solo suggerimenti su come raggiungerei ciò che vuoi fare. Per ottenere queste, o qualcosa di simile, sarebbe necessario il consenso del team di Discourse.

1 Mi Piace
14

Grazie per averlo scritto! :+1:

Sì, è esattamente quello con cui ho giocato, il problema è che il contenuto sarà racchiuso in diversi tag HTML, motivo per cui il onebox non si attiverà. Ho provato a separare l’URL con tag <br> (per attivare il onebox), ma cose del genere sembrano essere tagliate automaticamente.

Hmm, okay, perché? :slight_smile:

Imposterei ovviamente il valore di embed_url.

15

Ottenere l’URL di incorporamento per il onebox è un problema separato. Usa allowed embed classnames solo per impostare l’estratto di testo come nel mio esempio.

Perché in effetti reinventerai la ruota nel tentativo di aggirare quello che è veramente un problema di parsing di TopicEmbed. Aprirà anche una nuova serie di problemi, come cosa succede se il tuo codice non viene eseguito nell’ordine previsto, ad esempio c’è una race condition o qualche altra eccezione intervenuta. Questi tipi di problemi si verificano abbastanza spesso con un mix di codice su un sito esterno con il plugin WP Discourse. In breve, non ne vale la pena.

Sembra che tu conosca bene una codebase :slight_smile: . Devi effettivamente apportare due semplici modifiche a questa classe.

  1. Inserisci una condizione controllata da un’impostazione del sito qui
  1. Inserisci un’altra condizione controllata da un’impostazione del sito qui

Non avresti nemmeno bisogno di creare l’app discourse. Scrivi prima due test rspec, poi apporta le modifiche e, una volta che funzionano, crea una PR :slight_smile:

1 Mi Piace
16

Per quel che vale, ecco cosa ho finito per fare:

  1. Sul mio blog, ho un <div id="forum-excerpt"> che è nascosto con display:none ma contiene l’HTML che vorrei mostrare nel post di Discourse. (Lo faccio usando una logica Jekyll / Liquid, ma non dovrebbe importare molto.)

  2. Sul mio Discourse, ho impostato il CSS selector for elements that are allowed in embeds su #forum-excerpt. Anche se il div è nascosto sulla mia pagina effettiva, il contenuto appare sul forum.

  3. Ho anche deselezionato Truncate the embedded posts.

  4. Nella sezione Embedded CSS, ho dato a .button un font più grande. Questa è una piccola modifica, ma rende più grande il pulsante per aggiungere un commento.

  5. Ho anche personalizzato il testo di embed.continue, embed.start_discussion e embed.imported_from, che cambia ciò che appare nella sezione commenti sul mio sito web.

Ciò significa che ho il pieno controllo sull’HTML che appare nel post del forum. L’HTML che fornisco è fondamentalmente l’equivalente di un OneBox: è una grande miniatura e un link al post principale.

Questo funziona quasi perfettamente per me, ringraziamenti posticipati per l’aiuto!

2 Mi Piace
17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.