egoblock

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は割愛します。

サイドメニュー

Loading

カテゴリー別アーカイブ

固定ページ一覧

今年って西暦何年?2012年です。
今年、平成何年だっけ?24年です。