以下は、私が取り組んでいる tumblr テーマの一部です。順序付きリスト{block:PostType}
の要素である各投稿の開始タグを宣言する構文を使用していることに気付くでしょう。<li>
これにより、投稿の種類に基づいて li のクラスを動的に設定できるだけでなく、ページを実際に動かしていた ShareThis JS を呼び出す回数を減らすことができます。これにより、新しい問題が発生しますが、これは Tumblr のパーサーの欠陥であると私は信じています。各投稿は、1 つの<li>
要素を含む順序付けられたリストです。各投稿<div>
を Tumblrの達人?提案?
コードのサンプル:
{block:Posts}
<ol class="posts">
{block:Text}
<li class="post type_text" id="{PostID}">
{block:Title}
<h2><a href="{Permalink}" title="Go to post '{Title}'.">{Title}</a></h2>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<li class="post type_photo" id="{PostID}">
<div class="image">
<a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></a>
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
{block:Photoset}
<li class="post type_photoset" id="{PostID}">
{Photoset-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
{block:Quote}
<li class="post type_quote" id="{PostID}">
<blockquote>
<div class="quote_symbol">“</div>
{Quote}
</blockquote>
{block:Source}
<div class="quote_source">{Source}</div>
{/block:Source}
{/block:Quote}
{block:Link}
<li class="post type_link" id="{PostID}">
<h2><a href="{URL}" {Target} title="Go to {Name}.">{Name}</a></h2>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}
<li class="post type_chat" id="{PostID}">
{block:Title}
<h2><a href="{Permalink}" title="Go to post {PostID} '{Title}'.">{Title}</a></h2>
{/block:Title}
<table class="chat_log">
{block:Lines}
<tr class="{Alt} user_{UserNumber}">
<td class="person">{block:Label}{Label}{/block:Label}</td>
<td class="message">{Line}</td>
</tr>
{/block:Lines}
</table>
{/block:Chat}
{block:Video}
<li class="post type_video" id="{PostID}">
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Audio}
<li class="post type_audio" id="{PostID}">
{AudioPlayerWhite}
{block:Caption}
{Caption}
{/block:Caption}
{block:ExternalAudio}
<p><a href="{ExternalAudioURL}" title="Download '{ExternalAudioURL}'">Download</a></p>
{/block:ExternalAudio}
{/block:Audio}
<div class="post_footer">
<p class="post_date">Posted on {ShortMonth} {DayOfMonth}, {Year} at {12hour}:{Minutes} {AmPm}</p>
<ul>
<li><a class="comment_link" href="{Permalink}#disqus_thread">Comments</a></li>
<li><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=722e181d-1d8a-4363-9ebe-82d5263aea94&type=website"></script></li>
</ul>
{block:PermalinkPage}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/kyleetilley/embed.js"></script>
<noscript><a href="http://disqus.com/forums/kyleetilley/?url=ref">View the discussion thread.</a></noscript>
{/block:PermalinkPage}
</div>
</li>
</ol>
{/block:Posts}