piątek, 20 maja 2011

Dynamiczna, alfabetyczna lista postów blogu jako oddzielna strona

Aby utworzyć dynamiczną, alfabetyczną listę postów na blogu należy (krok po kroku):
  1. dodać widget stron do bloggera
  2. utworzyć na blogerze oddzielną stronę np: Spis alfabetyczny
  3. wprowadzić odpowiedni kod funkcji javascript, korzystający z formatu JSON
  4. wstawić skrypt pobierający posty z bloga.
  5. wykonać skrypt wyświetlający listę
A więc do dzieła. Krok 1,2 pominę gdyż chyba zrozumiałe i pokaże krok 3 i 4

Krok 3
Tworzymy skrypt js jako treść postu, w tym wypadku strony

<script style="text/javascript"> 


Definiujemy tablicę, do której będziemy dodawać posty
 var tabentry = new Array();

Teraz funkcję zwrotną odczytującą posty w formacie JSON i zapisującą posty do tablicy
   function ListaPostow(json) {     
     i=0;
     while (entry = json.feed.entry[i++])
     {
        tabentry.length++;
        tabentry[tabentry.length-1] = entry;
     }    
   }  


Dodajemy funkcję sortującą tablicę postów po tytułach postów
function SortByTitle(a,b)
   {
     if (b.title.$t==a.title.$t) return 0;
     if (a.title.$t>b.title.$t) { return 1; }
     else return -1;
   }


Na koniec funkcję, która wyświetli nam posortowaną listę postów na stronie.
   function ShowListEntry() {
     tabentry.sort(SortByTitle); //sortuj tablicę
     document.write('<table>');
     document.write('<tr><td colspan="2"><ul><h1>Lista alfabetyczna</h1></td></tr>');
    
     for (var i = 0 ; i<tabentry.length ; i++)
     {
       document.write('<tr><td style="padding-right:10px;"><li>');
       var posturl;   
       for (var k = 0; k < tabentry[i].link.length; k++) {
          if (tabentry[i].link[k].rel == 'alternate') {
            posturl = tabentry[i].link[k].href;
             break;
         }
       }
       document.write('<a href="'+posturl+'">');
       document.write(tabentry[i].title.$t);
       document.write('</a></li></td>');
       document.write('<td>(<i>'+ tabentry[i].category[0].term+')</i></td></tr>');
     }
     document.write('</ul></table>');


W tej funkcji wyświetlam listę w postaci tabeli wraz z nazwami przypisanych etykiet do postów.

Zamykamy znacznik skryptu
</script>

Krok 4
Wykonujemy skrypt pobierający listę postów oraz wyświetlamy ją na stronie:

<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=500&callback=ListaPostow"></script>

Pamiętając o podmianie adresu swojego bloga.

Skrypt ten działa do 500 postów, gdyż tyle jednorazowo można pobrać. Jeśli macie więcej to należy odpowiednio dopisać.

<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=501&max-results=500&callback=ListaPostow"></script>


i więcej...
<script src="http://progbis.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1001&max-results=500&callback=ListaPostow"></script><script>ShowListEntry();</script>

Krok 5
Wykonujemy funkcję, która wyświetli nam posortowaną listę postów
<script>ShowListEntry();</script>

Jak to działa? Sprawdźcie listę wg kategorii na moim blogu
Więcej informacji o formacie JSON i postów bloga znajdziesz pod adresem http://beautifulbeta.wikidot.com/json-feeds

1 komentarz: