Per assemblare le voci e i loro elementi, la struttura del template di Blogger nidifica naturalmente i box HTML, ma con un criterio un po' insolito.
Il box esterno con nome di classe date-outer ha come box figlio quello contenente la data ( date-header ) e il box date-posts . Al suo interno appare il post-outer , che contiene direttamente il post e quelli corrispondenti al resto dei componenti della voce (data, intestazione, corpo e piè di pagina).
Il fatto è che la data è omessa e separata dal resto, ma questo perché Blogger incorpora una serie di condizioni che fanno sì che se due o più voci hanno la stessa data, rimangano tutte all'interno di un'unica data e box ( date-outer ).
Il disegno qui sotto illustra questo concetto, perché descriverlo a parole può essere un po' confuso, ma per chiarezza rimando a un altro post che ho scritto un po' di tempo fa intitolato " Blogger raggruppa i post per data; noi li separiamo ". Lì ho descritto il problema più in dettaglio, includendo una serie di diagrammi grafici che ritengo molto utili per comprendere l'origine del problema e l'alternativa che propongo.
La struttura originale descritta è piuttosto fastidiosa , ad esempio, quando vogliamo disporre un template con riepiloghi e visualizzarli in righe di due, tre, ecc. Per fare ciò, la cosa logica sarebbe configurare questi blocchi con CSS attaccando la classe esterna date-outer , ma il fatto che due o più post possano essere al suo interno rende il compito quasi impossibile. Se ci spostiamo al successivo riquadro post -outer, la stessa cosa accadrà tre quarti delle volte. Tutto questo perché a volte i post sono raggruppati e altre volte no.
D'altra parte, c'è il piccolo problema che la data appare solo nel primo post di ogni set di post pubblicati lo stesso giorno . Potremmo pensare che risolvendo il problema sopra descritto saremmo in grado di visualizzare la data in tutti i post, ma poiché Blogger la memorizza solo per il primo post di ogni batch, abbiamo bisogno di qualcosa di più. Dato che siamo a questa parte del template, aggiungeremo un piccolo JavaScript per visualizzare la data in tutti i casi e completare così la risoluzione di entrambi i problemi.
Nell'articolo che ho linkato all'inizio, ho già indicato come farlo, ma poiché il codice di Blogger è stato aggiornato, lo abbiamo aggiornato anche qui, incorporando il JS.
Per eliminare le condizioni che generano raggruppamenti di post e risolvere anche il problema della data, è necessario individuare questo frammento di codice nel template ( modifica HTML ). Se non lo trovate nel vostro, è semplicemente perché questo codice proviene dai template classici standard ... non da quelli personalizzati con nomi di classe diversi, non da quelli del Nuovo Designer , non da quelli dinamici . Detesto ancora molto questi ultimi, quindi non chiedetemelo.
<b:if cond='data:mobile == "false"'>
<!-- post -->
<div class='blog-posts hfeed'>
<b:include data='top' name='messaggio-di-stato'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart e non data:post.isFirstPost'>
</div></div>
</b:se>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:se>
<b:if cond='data:post.dateHeader'>
<h2 class='intestazione data'>
<span>
<data:post.dateHeader/>
</span>
</h2>
</b:se>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:se>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageDigita {"static_page","item"}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:altrimenti/>
<data:adEnd/>
</b:se>
<div class='annuncio in linea'>
<data:adCode/>
</div>
<data:adStart/>
</b:se>
</b:ciclo>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:se>
<data:adEnd/>
</div>
Una volta individuata, rimuoveremo le condizioni che controllano se ci troviamo o meno nel primo post di un gruppo di post con la stessa data, in modo che abbiano tutti la stessa struttura.
Inoltre, aggiungeremo un codice JS che salverà l'ultima data utilizzata e, se il post successivo non ha una data (cosa che accade quando ci sono più post al giorno), andremo a quello salvato in precedenza e lo "coloreremo".
Per aggiungere tutto questo, basta sostituire tutte le righe menzionate sopra con queste altre . Non dimenticare di salvare una copia di backup del tuo template prima di apportare modifiche di questo tipo.
<b:if cond='data:mobile == "false"'>
<!-- post -->
<div class='blog-posts hfeed'>
<b:include data='top' name='messaggio-di-stato'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var dateult = '<data:post.dateHeader/>';</script>
<h2 class='intestazione data'>
<data:post.dateHeader/>
</h2>
<b:altrimenti/>
<h2 class='intestazione data'>
<script type='text/javascript'>documento.write(ultima data);</script>
</h2>
</b:se>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageDigita {"static_page","item"}' data='post' name='comment_picker'/>
</div>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:altrimenti/>
<data:adEnd/>
</b:se>
<div class='annuncio in linea'>
<data:adCode/>
</div>
<data:adStart/>
</b:se>
</b:ciclo>
<data:adEnd/>
</div>
E questo è tutto. Due problemi risolti in un colpo solo. Ora appariranno tutte le date di tutti gli articoli e, per poter disporre i post in modo che siano riassunti (o simili), dovremo solo lavorare con il CSS sulla classe date-outer .
Commenti
Posta un commento