tumblrに[1][2][3]というページ送りを表示したい。
tumblrに[1][2][3]という感じのページ送り機能(ページャーとかページネーションとも呼びます)を搭載したいと思います。
tumblrが用意しているタグだけでは、これを実装することはできませんが、
Java Scriptを併用することで実現することが可能です。
tumblrのページURLは非常にシンプルで、
http://egoblock.tumblr.com/page/1 (→”/”にリダイレクトされます)
http://egoblock.tumblr.com/page/2
http://egoblock.tumblr.com/page/3
といったように末尾の数字が変わるだけです。
なので下記のようなソースで簡単に実装できます。
{block:Pagination}
<script type="text/javascript">
var i=1;
document.write('<ul class="pagination">');
for(i; i<={TotalPages}; i++){
if(i==)
document.write('<li><a href="/page/'+i+'">'+i+'</a></li>');
}
document.write('</ul>');
</script>
{/block:Pagination}
{TotalPages}の値が必要なので、
{block:Pagination}{/block:Pagination}の中にJavaScriptを記述します。
何をしているかというと、
『{TotalPage}=最後のページ数』になるので、
{TotalPage}の値に達するまで1からループしてリストを書き出しています。
これでよくある<ul>リストのページャーができます。
現在いるページへのリンクは無効にして太字にするといったことも可能です。
{block:Pagination}
<script type="text/javascript">
var i=1;
document.write('<ul class="pagination">');
for(i; i<={TotalPages}; i++){
if(i=={CurrentPage}){
document.write('<li><span class="current">'+i+'</span></li>');
}else{
document.write('<li><a href="/page/'+i+'">'+i+'</a></li>');
}
}
document.write('</ul>');
</script>
{/block:Pagination}
{CurrentPage}は現在いるページ数を出力します。
ループの途中で{CurrentPages}の値と同じページになったときだけ処理を変えています。
細かいCSSは割愛します。
