Stile del post del blog

[Discourse]

	Riepilogo	Blog Post Styling ti permette di designare una categoria blog, modificando l’aspetto dei topic all’interno di tale categoria per renderli simili a post di blog tradizionali.
	Anteprima	Anteprima su theme-creator.discourse.org
	Repository	github.com/discourse/discourse-blog-post-styling
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Il componente del tema Blog Post Styling trasforma i topic di Discourse in un layout tradizionale da post di blog. Quando applicato a una categoria, la prima immagine di ogni topic viene promossa a un’immagine hero a larghezza intera sopra il titolo, e il contenuto viene stilizzato con una tipografia e una visualizzazione dei metadati adatte ai blog.

Impostazioni

Di seguito sono riportate le varie impostazioni associate a questo componente del tema:

• Categoria blog: I topic che appartengono a una delle categorie selezionate avranno applicata la stilizzazione da post di blog.

• Tag blog: Scegli uno o più tag che, se applicati a un topic, gli conferiranno la stilizzazione da post di blog.

• Dimensione immagine: Decidi come l’immagine hero in evidenza riempie l’area dell’intestazione:

  • Nessuna immagine: Nascondi l’immagine in evidenza.
  • Larghezza intera (predefinita): L’immagine si estende su tutta l’area del contenuto.
  • Centrata: L’immagine mantiene il rapporto d’aspetto ed è centrata nell’area del contenuto.

• Posizione immagine: Decidi dove mostrare l’immagine rispetto al titolo:

  • Sopra il titolo (predefinito): Mostra l’immagine sopra il titolo del topic.
  • Sotto il titolo: Mostra l’immagine sotto il titolo del topic. Se selezionata, puoi anche includere un riassunto che viene visualizzato tra il titolo e l’immagine. Di seguito, puoi vedere come appare l’immagine quando l’impostazione posizione immagine è configurata su sopra il titolo e sotto il titolo:

• Dropcap abilitato: Se abilitato, la prima lettera del post di blog avrà uno stile ingrandito, come in questo esempio:
  
  
• Mobile abilitato: Se abilitato, la stilizzazione da post di blog viene applicata quando si legge il topic su dispositivi mobili.

Scrivere un post di blog

Una volta configurata la tua categoria blog (o applicato il tuo tag per post di blog), ci sono alcune cose particolari da notare sul funzionamento del topic del post di blog.

Immagine in evidenza

Posiziona l’immagine che desideri come immagine hero sulla prima riga in assoluto del post, seguita da una riga vuota prima dell’inizio del contenuto:

![descrizione immagine|1100x440](upload://hash-immagine.jpg)

Il contenuto del tuo post inizia qui...

Il componente posiziona automaticamente questa immagine in base all’impostazione posizione immagine (vedi sopra). Se qualsiasi altro contenuto — incluse righe vuote — appare prima dell’immagine, questa non verrà promossa alla posizione hero.

Dopo aver pubblicato per la prima volta un post, aggiorna la pagina per vedere l’immagine apparire nella posizione designata. (Questo influisce solo sull’autore del post alla pubblicazione iniziale; i membri che accedono al post dovrebbero vedere l’immagine nel posto giusto immediatamente.)

Suggerimenti per il ridimensionamento delle immagini

Il contenitore dell’immagine è alto 440px e largo 100%. Per i migliori risultati quando l’impostazione dimensione immagine è impostata su larghezza intera:

• Usa o ritaglia le immagini a 1100x400px prima del caricamento per evitare ritagli, oppure
• Scegli immagini con un soggetto centralizzato o contenuti non specifici (paesaggi, motivi) in modo che i ritagli non rimuovano dettagli importanti.

Riassunti

Quando l’impostazione posizione immagine è impostata su sotto il titolo, puoi aggiungere un riassunto opzionale al tuo post di blog, che apparirà tra il titolo e l’immagine in evidenza.

Per fare ciò, avvolgi il contenuto che desideri includere nel riassunto come segue:

[summary] Ecco il contenuto che sarà il tuo riassunto. [/summary]

Blockquote stilizzati

Quando crei topic in una categoria blog, i blockquote ricevono una stilizzazione speciale. Puoi creare blockquote nel composer usando il simbolo > o il pulsante della barra degli strumenti del composer <kbd>“</kbd>.

Impostazione categoria consigliata

Nelle impostazioni della tua categoria blog, considera di abilitare l’impostazione categoria Vai al primo post dopo la lettura dei topic. Questo invia i lettori abituali direttamente al contenuto del post di blog anziché alla loro ultima posizione di lettura.

Blog Post Styling + Miniature nell’elenco dei topic

Questo componente è compatibile con Topic List Thumbnails, che evidenzia l’immagine in evidenza del tuo post di blog nell’elenco dei topic:

Nota: Il componente Topic List Thumbnails non è compatibile con il tema Horizon. Lo screenshot sopra è stato realizzato utilizzando il tema Foundation.

[amotl (Andreas Motl)]

@amotl

After bumping the defined sizes manually just slightly in the markup, the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.

---

JeeLink

[ohellno]

Ciao, e grazie mille per aver dedicato del tempo a creare questo e rilasciarlo gratuitamente.

Mi chiedevo solo se fosse possibile modificare qualcosa per utilizzare un tag specifico invece di una categoria particolare?

Ho appena configurato un nuovo sito Discourse, ma ho scritto molti “post del blog” e vorrei comunque che apparissero nelle altre categorie appropriate per renderli un po’ più integrati.

Attualmente li pubblico nella loro categoria blog-post, che ho limitato in modo che solo io potessi pubblicare lì, ma ho appena creato un gruppo di tag e l’ho reso accessibile solo allo staff.

Grazie ancora!

[Howaids (Martin)]

Grazie mille @tshenry. I componenti del tuo tema sono stati tutti perfetti. E grazie anche a @sam e @codinghorror per aver condiviso un’applicazione incredibile! La vostra generosità, incluso il supporto fornito su Meta, è davvero sentita. Discourse è davvero creato per un internet più premuroso del futuro.

[LoganRTW (Ward)]

Esiste un modo per farlo funzionare con un video come contenuto in primo piano invece che con un’immagine? Cancellerei il mio sito WordPress se potessi semplicemente pubblicare un video di YouTube, Vimeo, ecc., e averlo come contenuto principale. Avete qualche idea?

[Howaids (Martin)]

Assolutamente! Ottima idea @LoganRTW. Hai il mio voto @tshenry. È fattibile?

[tshenry (Taylor)]

Aggiornamento

Se ci credete

Ho iniziato a rifattorizzare e pulire il componente per utilizzare la struttura dei file in stile plugin e sfruttare le nuove miniature degli argomenti.

FEATURE: Include optimized thumbnails for topics (#9215)

Ho anche aggiunto alcune nuove funzionalità:

• Nuove impostazioni

  • image_display_style - ci sono due opzioni disponibili. Quella predefinita dovrebbe mantenere il comportamento che il componente ha avuto finora. L’alternativa assicura che non ci sia ritaglio e che venga visualizzata l’immagine intera. È difficile dire quale sia “migliore”, quindi vi consigliamo di fare qualche prova per vedere cosa funziona meglio per il vostro flusso di lavoro e le immagini del blog.

    

  • mobile_enabled - questa è una prima versione dello stile dei post del blog per dispositivi mobili. Sono interessato a ricevere segnalazioni di bug o idee per miglioramenti!

    

Vorrei continuare a rifattorizzare e pulire il codice, ma questo dovrebbe essere un buon inizio.

Introduce mobile, image display options, and refactor

---

@Varhall

Sarebbe bello aggiungere il markup schema.org per questo tipo di argomento. È previsto nei piani?

Al momento non ci sono piani, temo!

[torstensson (Per Torstensson)]

Grazie per un componente davvero ispirante e piacevole @tshenry

Nella mia valutazione ho individuato due problemi;

1. Nessuna immagine del blog nelle sottocategorie - dopo un troubleshooting abbastanza approfondito con diversi temi e attivando/disattivando sia i plugin che altri componenti, credo di poter affermare con quasi certezza che le immagini del blog non vengono visualizzate per le sottocategorie. La prima immagine, ovvero l’immagine del blog prevista, è tuttavia ancora nascosta.

2. La prima immagine non è nascosta in linea con DiscoTOC - quando lo Stile del Post del Blog viene utilizzato insieme a DiscoTOC, l’immagine del blog viene correttamente visualizzata sopra il titolo, ma viene renderizzata due volte poiché viene ancora visualizzata anche nella sua posizione originale.

[tshenry (Taylor)]

Grazie mille per il feedback @torstensson! Entrambi i punti erano effettivamente dei bug e ora dovrebbero essere risolti:

Bug fixes

Fatemmi sapere se continuate ad avere problemi.

---

A tutti coloro che utilizzano questo componente:

Se non state attualmente includendo un’immagine in evidenza all’inizio di tutti i post del blog, questo è per voi!

Questo componente è stato creato con l’intenzione di visualizzare un’immagine sopra ogni argomento del post del blog. Detto questo, era possibile creare un post del blog senza visualizzare un’immagine in evidenza semplicemente non includendo un’immagine nella prima riga del post. Questo comportamento è cambiato.

La nuova implementazione migliora notevolmente le prestazioni, ma utilizza un valore predefinito invece di analizzare direttamente il contenuto del post. Il valore predefinito viene generato dalla prima immagine trovata nel post. A differenza di prima, non è necessariamente limitato a un’immagine che appare come prima riga del post. Ciò significa che se create un post senza un’immagine nella prima riga, ma includete una singola immagine alla fine del post, quell’immagine in fondo verrà ora visualizzata anche sopra l’argomento.

Ho incluso un’impostazione on/off che permette di attivare o disattivare l’“immagine in evidenza”, consentendovi di avere tutto lo stile tranne l’immagine in evidenza, se preferite.

Aggiornerò il primo post (OP) con tutte le nuove considerazioni e raccomandazioni, ma in sintesi assicuratevi di includere un’immagine nella prima riga del post (questo posizionamento è ancora utilizzato per evitare che l’immagine venga ripetuta). Potreste trovare utile utilizzare un’immagine segnaposto nel template dell’argomento della categoria, che possa essere usata come predefinita se non viene fornita alcuna immagine.

[torstensson (Per Torstensson)]

@tshenry

Grazie mille per il feedback @torstensson! Entrambi i punti erano effettivamente bug e dovrebbero essere stati risolti. Fammi sapere se continui ad avere problemi.

Fantastico, grazie @tshenry Posso confermare con piacere che entrambi i problemi sono stati risolti con l’aggiornamento e ancora una volta - grazie per un componente davvero eccellente, non solo per la funzionalità ma anche per l’ispirazione

[core]

Una funzionalità recentemente annunciata potrebbe funzionare come alternativa a questo componente del tema. La lasciamo qui per chi fosse interessato.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff users to convert a topic into a standalone static page with custom styling. Examples include the Terms of Service and Privacy Policy pages. Required user level: Staff Publishing static pages on Discourse Page Publishing allows Staff users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy Policy …

[nityeshaga (Nityesh Agarwal)]

@tshenry Grazie mille per questo componente! Lo stiamo utilizzando insieme al plugin Topic List Previews per creare una sezione Articoli per gli studenti nella Community di Dataquest.

Ho una richiesta di funzionalità da considerare nelle future iterazioni di questo componente: potresti aggiungere la possibilità di inserire URL canonici negli articoli?

I motori di ricerca utilizzano i link canonici per determinare e dare priorità alla fonte definitiva dei contenuti, eliminando confusione quando esistono copie multiple dello stesso documento in posizioni diverse.

Grazie!

[sebastianh (Rebastion)]

Quindi penso che questo sia un ottimo componente. In realtà, lo sto già provando su un Discourse attivo e sto sperimentando con esso. Senza un ordine particolare, vorrei condividere i miei primi pensieri e feedback, spero che siano utili: scusate se alcune di queste osservazioni sono più delle domande:

• Il modo in cui viene mostrato l’autore è un po’ fuori luogo e potrebbe essere risolto in modo più efficiente in termini di spazio, per integrarlo meglio con il titolo, il tag della categoria, ecc… C’è anche troppo spazio bianco tra la riga che conclude le informazioni sull’autore e l’inizio del testo.
• È difficile per un visitatore arrivato direttamente a un post del blog capire dove si trova, poiché non c’è una chiara breadcrumb o qualcosa di simile. Il motivo principale è che la barra del titolo sembra essere disattivata, mentre nei topic normali si trasforma e include il titolo, la categoria, ecc.
• Sarebbe fantastico se la visualizzazione delle categorie potesse avere un aspetto più da blog, con piccole immagini di anteprima e simili; sarebbe difficile farlo?
• Non vedo una descrizione della categoria nella visualizzazione delle categorie?

[sebastianh (Rebastion)]

@nityeshaga

an Sezione Articoli per studenti nella Community di Dataquest.

wow, quale componente del tema è stato utilizzato per quella vista delle categorie? Sembra figo

[tshenry (Taylor)]

Grazie per il feedback

@sebastianh

• Il modo in cui viene visualizzato l’autore è un po’ fuori luogo e potrebbe essere risolto in modo più efficiente dal punto di vista dello spazio, per integrarlo meglio con il titolo, il tag della categoria, ecc… C’è anche molto spazio bianco tra la riga che conclude le informazioni sull’autore e l’inizio del testo.

Concordo sul fatto che ci sia molto spazio bianco intorno all’area autore/titolo. Terrò presente questo feedback la prossima volta che lavorerò sul componente e vedrò se riesco a trovare una soluzione.

@sebastianh

È difficile per un visitatore indirizzato direttamente a un post del blog capire dove si trova, poiché non c’è un percorso di navigazione chiaro o qualcosa di simile. Il motivo principale è che la barra del titolo sembra essere disattivata, mentre nei topic normali si trasforma e include il titolo, la categoria, ecc.

Non sono sicuro al 100% di cosa intendiate qui. L’intestazione cambierà per includere il titolo e il percorso di navigazione non appena scorrerete verso il basso oltre l’immagine e il titolo del blog. Avete ragione nel dire che, nella parte superiore della pagina, non è particolarmente evidente, però. Terrò anche questo a mente.

@sebastianh

• Sarebbe fantastico se la visualizzazione delle categorie avesse un aspetto più da blog, con piccole anteprime delle immagini e simili. Sarebbe difficile da realizzare?
• Non vedo una descrizione della categoria nella visualizzazione delle categorie?

Queste funzionalità esulano dall’ambito di questo componente. Per la visualizzazione delle categorie, potreste dare un’occhiata a: Topic List Thumbnails

[sebastianh (Rebastion)]

Grazie per il feedback Penso che la maggior parte sia stata chiarita e ora vedo anche la descrizione della categoria, non sono sicuro del perché non fosse visibile prima, pensavo avesse a che fare con il componente. Continuerò a provarlo e pubblicherò altri feedback più tardi. Ottimo lavoro!

[sebastianh (Rebastion)]

Penso che lo spazio in eccesso in alto provenga dallo spazio rimasto dopo che l’immagine è stata “spostata” nell’intestazione del post del blog, risultando non in uno spazio guadagnato sotto, ma in uno spazio vuoto.

Ma ho notato un problema reale: se pubblico link a un tale post del blog in altri argomenti, non c’è nessuna anteprima, vedi qui

[sebastianh (Rebastion)]

@sebastianh

Penso che lo spazio in eccesso in alto derivi dallo spazio residuo dopo che l’immagine è stata “spostata” nell’intestazione del post del blog, risultando non in uno spazio guadagnato sotto, ma in un’area vuota.

Ecco uno screenshot di ciò che intendo:

[tshenry (Taylor)]

Sono abbastanza sicuro che ciò sia dovuto all’assenza di un’interruzione di riga tra il link per il caricamento dell’immagine e il primo paragrafo. Puoi provare a modificarlo in modo che corrisponda al seguente:

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg) 

<big>Sebbene</big> ci sia ampio spazio sul web per pubblicare, scrivere blog, condividere e twittare e via dicendo, il mio luogo preferito per scambiare idee con tutti voi sul western spaghetti è questo forum. Alcuni di voi potrebbero ricordare uno sforzo risalente a diversi anni fa, chiamato "Planet Spaghetti Western", l'idea era quella di avere un blog che avrebbe aggregato automaticamente i post da tutti i blog sul western spaghetti presenti su internet, presentandoli in una sorta di riassunto. Era piuttosto complicato dal punto di vista tecnico e alla fine richiedeva più lavoro di quanto ne valesse la pena, quindi ho dovuto chiudere quel progetto.

Se funziona, aggiungerò una nota nell’OP riguardo a questo requisito.

[sebastianh (Rebastion)]

Ciao. Questo riduce un po’ il margine, effettivamente, grazie. Nel editor avevo fatto esattamente l’opposto: lasciare il meno spazio possibile tra l’immagine e l’inizio del testo.