Hai del codice per creare l'indice del tuo blog, ma non carica tutti i post? Beh, questo è normale se hai più di 150 post pubblicati, perché questo è il numero massimo che può essere caricato con una singola chiamata a un feed di Blogger. Ho già parlato di questo problema
nel post precedente e ho anche spiegato che caricare 150 post alla volta invece di gruppi di 500 risolveva il problema nella maggior parte dei casi.
Tuttavia, alcuni codici richiedono il caricamento di tutti i post e il loro successivo ordinamento o raggruppamento in un certo modo, rendendo la soluzione precedente impraticabile. È il caso di quello che vedremo oggi, che mostra i post categorizzati per tag.
Altri codici pubblicati in precedenza non prevedevano questa eventualità, ma ora, seguendo lo stesso algoritmo dell'ultima volta, saremo in grado di farlo funzionare.
Per installarlo, modifichiamo il nostro modello e quasi alla fine, appena prima di </body> , aggiungiamo questo:
<b:if cond='data:blog.pageType == "static_page"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<!-- INDICE PER TAG -->
<style>
ul.bsitemap, ul.bsitemap ul, ul.bsitemap li {larghezza: 100%;margine: 0;imbottitura: 0 ;stile-elenco:none;famiglia-caratteri: arial;}
ul.bsitemap li a {display: blocco;margine: 0 0 2px 0;imbottitura:0 10px;sfondo: #666;colore: #fff;decorazione-testo: none;dimensione-carattere: 20x;altezza-linea: 28px;trasformazione-testo: maiuscolo;}
ul.bsitemap li li a {sfondo: transparent;color:#333;line-height:22px;}
ul.bsitemap li a:hover {background: #333;}
/* Simbolo di elemento non a discesa */
ul.bsitemap li a:before {content: "\25CF\00A0";width: 28px;display: inline-block;vertical-align: top;}
/* Simbolo di elemento a discesa chiuso */
ul.bsitemap li.dropdown a:before {content: "\25BA\00A0";}
/* Simbolo di elemento a discesa aperto */
ul.bsitemap li.dropdown.activate a:before {content: "\25BC\00A0";}
ul.bsitemap li.dropdown ul li a:before, ul.bsitemap li.dropdown.activate ul li a:before {content: none}
ul.bsitemap ul {display: none;}
ul.bsitemap ul a {padding-left: 40px;text-transform: none;}
ul.bsitemap li li a:hover {background: transparent;text-decoration: underline;}
/* Stile del marchio NEW (ultimo mese) */
.bnew {color: red;font-style: italic;font-weight: bold;}
.bnew:after {content:" New";margin-left: 10px;padding: 2px 8px;color: white;background:red;font-style: italic;font-weight: bold;font-size: 80%;border-radius: 4px;}
/* Simbolo di caricamento animato */
.bloading {display: block;width: 80px;height: 80px;margin: 10px auto;font-size: 10px;text-align: center;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s lineare infinito;animazione: rotazione 1s lineare infinito;stile bordo: doppio;colore bordo: #666 trasparente;}
.bloading:before {contenuto: "CARICAMENTO";peso carattere: grassetto;altezza linea: 80px;colore: #990000;}
@-webkit-keyframes rotazione {100% {-webkit-transform: ruota(359 gradi);}}
@keyframes rotazione {100% {trasformazione: ruota(359 gradi);}}
</style>
<script type='text/javascript'>//<![CDATA[
var feed="http:// TUBLOG.blogspot.com/feed/post/default",exclusion=["tag1","tag2","tag3","ecc"],outboxes=$("#feed");$(document).ready(function(){var e=150,a=1e4,t=new Array;$.getJSON(feed+"?alt=json&callback=?").done(function(l){function s(t){var l=i*e+1,s=e;i==n-1&&(s=ae*i);var r=feed+"?orderby=published&start-index="+l+"&max-results="+s+"&alt=json&callback=?";return $.getJSON(r)}var r=parseInt(l.feed.openSearch$totalResults.$t);r>a&&(r=a),Math.ceil(r/e)<2&&(e=r-1);var n=Math.ceil(r/e),o=[];for(i=0;i<n;i++)o.push(s(i));$.when.apply($,o).done(function(e){for(var a=[],l=0,i=0;i<arguments.length;i++)a.push(arguments[i][0]);for(i=0;i<arguments.length;i++)$.each(a[i].feed.entry||[],function(e,a){if(a.category)for(var i=0;i<a.category.length;i++){for(var s=!0,r=0;r<exclusion.length;r++)if(a.category[i].term==exclusion[r]){s=!1;break}s&&(t[l]=new Array,t[l][0]=a.category[i].term,t[l][1]=new Date(a.published.$t||Date.now()),t[l][2]=a.title.$t||"",t[l][3]=(a.link||[]).slice(-1)[0].href,l++)}else t[l]=new Array,t[l][0]="Varie",t[l][1]=new Date(a.published.$t||Date.now()),t[l][2]=a.title.$t||"",t[l][3]=(a.link||[]).slice(-1)[0].href,l++});t.sort(function(e,a){return e[0]>a[0]?1:e[0]<a[0]?-1:e[2]>a[2]?1:e[2]<a[2]?-1:0});var s="",r="",n="",o="";outboxes.append('<ul class="bsitemap"></ul>');for(var c=0;c<t.length;c++){s=t[c][0],c>0&&(r=t[c-1][0],o="</ul></li>"),s!=r&&(n+=o+'<li><a href="javascript:void();">'+t[c][0]+"</a><ul>");var u=(new Date).getTime()-2592e6;u<=t[c][1]?class="bnew":class="old",n+='<li><a class="'+class+'" href="'+t[c][3]+'">'+t[c][2]+"</a></li>"}n+="</ul></li>",$(".bloading").remove(),$("ul.bsitemap").append(n),$("ul.bsitemap > li:has(ul)").addClass("dropdown"),$("ul.bsitemap > li a").click(function(){var) e=$(this).next();$("ul.bsitemap li").removeClass("attivo"),$(this).closest("li").addClass("attivo"),e.is("ul")&&e.is(":visible")&&($(this).closest("li").removeClass("attivo"),e.slideUp("normale")),e.is("ul")&&!e.is(":visible")&&($("ul.bsitemap ul:visible").slideUp("normale"),e.slideDown("normale"))})})})});
//]]></script>
</b:if>
Prestate attenzione alle due righe all'inizio, evidenziate a colori.
La prima è una condizione: tutto questo codice deve essere eseguito solo su pagine statiche, in modo da non rallentare le altre (Home e Post). Si presume che il modo migliore per includere un indice sia su una pagina statica, ed è per questo che l'ho impostato in questo modo.
Se avete già pubblicato la pagina specifica in cui lo inserirete, ne avrete anche l'indirizzo e, in tal caso, potete limitare ulteriormente il carico modificando la condizione generica che ho menzionato in qualcosa del genere:
<b:if cond='data:blog.url == " INDIRIZZO_PAGINA "'>
Per quanto riguarda la seconda riga, se hai già jQuery per altri scopi, puoi (e dovresti) rimuoverlo direttamente dal codice.
Tutto quanto sopra potrebbe essere aggiunto direttamente senza la condizione all'interno di una pagina statica utilizzando la scheda HTML dell'editor, ma dovrai fare attenzione se lo modifichi in futuro. Al primo salvataggio, tutto funzionerà correttamente, ma quando modifichi il post, alcune interruzioni di riga appariranno dove non dovrebbero essere e dovrai rimuoverle. È facile perderne alcune, quindi fai attenzione.
Come puoi vedere, la prima metà del codice qui sopra è CSS (tutto ciò che si trova tra i tag di stile ), ed è lì che puoi manipolarlo per cambiare l'aspetto dell'indice.
Una volta inserito quanto sopra nel template, non ci resta che andare alla pagina in cui vogliamo che appaia l'indice e aggiungere questo:
<div class="bloading"></div>
<div id="feed"></div>
<script>var feed = 'http:// INDIRIZZO_BLOG /feeds/posts/default';
var exclusion = ['tag1','tag2'];
var outputbox = $('#feed');</script>
La variabile feed è dove devi inserire l'indirizzo del feed del tuo blog. Ha il formato dell'indirizzo di esempio che ho pubblicato, quindi dovrai solo inserire l'indirizzo della home page invece di BLOG_ADDRESS .
La successiva variabile configurabile è quella che ho chiamato exclusion . Al suo interno, tra apostrofi e separati da virgole, puoi inserire i tag che per qualsiasi motivo non vuoi che appaiano nell'indice. Potrebbero essere vecchi tag che non vengono più utilizzati, che usi ma solo per il layout del blog o per far funzionare altri gadget...
Infine, nel caso in cui il nome del box con id="feed" ti dia problemi, puoi modificarlo anche in output_box .
E per verificare come funziona, qui sotto trovi la demo con l'indice completo di questo blog (attualmente più di 800 voci) da Codepen, dove, come sempre, puoi eseguire i tuoi test . Per vederlo "dal vivo" su un blog, ecco dove l'ho applicato solo due giorni fa.
Il CSS e il JavaScript avrebbero potuto essere più corti se non avessi aggiunto l'effetto accordion, ma visualizzare tutte quelle informazioni in modo completo mi sembra eccessivo.
Commenti
Posta un commento