- dodać widget stron do bloggera
- utworzyć na blogerze oddzielną stronę np: Spis alfabetyczny
- wprowadzić odpowiedni kod funkcji javascript, korzystający z formatu JSON
- wstawić skrypt pobierający posty z bloga.
- wykonać skrypt wyświetlający listę
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
bardzo fajne rozwiązanie taka lista :)
OdpowiedzUsuń