yuheijotaki.com

Tumblr 自作テーマ その3

こちらのサイトに合わせて、Tumblr もアップデートしました。

 

主に参考はLIGさんの記事

 

引っかかったところ

 

○indexページではPhotosetの表示を1枚だけに
Photosetの投稿タイプの場合、

{block:Photoset}
	{block:IndexPage}
		{block:Photos}
			<img src=&quot;{PhotoURL-HighRes}&quot;>
		{/block:Photos}
	{/block:IndexPage}
{/block:Photoset}

こういう書き方だとデフォルトでセットの写真がすべて表示されてしまう。
これを1枚だけにしたい場合、

{block:Photoset}
	{block:IndexPage}
		{block:Photos}
			<img src=&quot;{PhotoURL-HighRes}&quot;>
		<!--{/block:Photos}-->
	{/block:IndexPage}
{/block:Photoset}

と {/block:Photos} をコメントアウトすると、2枚目以降が非表示に。
cssでやる方法もあるようです。

 

○参考

 

○オートページャー
ページナビゲーションをやめて、Infinite Scrollを実装しました。
実装が簡単なのはこちらのやり方のようですが、カスタマイズの自由さは既存のjQueryプラグインのほうがあるようです。
JS部分

<script src="jquery.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script>
$(function(){
	$('section.mainArea').infinitescroll({
		loading: {
			finished: undefined,
			finishedMsg: 'All Posts Loaded.',
			msg: null,
			msgText: '<p class="loading">Loading Posts...</p>',
			img: null,
			selector: null,
			speed: 0,
			start: undefined
		},
		navSelector  : 'div.pagenation', // ページナビゲーション セレクタ
		nextSelector : 'p.older a', // 次のページリンク セレクタ
		itemSelector : 'section.mainArea article', // 投稿グループ セレクタ
	});
});
</script>

 

○参考