0

下面是我正在处理的 tumblr 主题的一部分，您会注意到我使用{block:PostType}语法来声明每个帖子的开始标签，它是<li>有序列表中的一个元素。这使我不仅可以根据帖子类型动态设置 li 的类，还可以减少我调用 ShareThis JS 的次数，这确实使页面陷入困境。这产生了一个新问题，尽管我认为这是 Tumblr 解析器中的一个缺陷。每个帖子都是一个有序列表，其中包含一个<li>元素。我知道我可以通过将每个帖子都设置为 a 来解决这个问题，<div>但我真的很喜欢使用列表的控制和语义。豆瓣大师？建议？

代码示例：

{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">&ldquo;</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&amp;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}
4

2 回答 2

3

Posts 块对每个帖子执行一次，因此容器的标记应该超出该块。

只需将<ol>右边放在前面{block:Posts}和</ol>直接放在后面{/block:Posts}

于 2010-03-19T03:55:53.910 回答
0

试试这个，当我把它放入主题解析器时它对我有用。我稍微修改了你的代码：

  • 彻底检查了您的语法。请不要生气，我只是为了清楚起见！
  • 将<ol>元素移到外部，{block:Posts}因为它内部的所有内容都会为每种类型的帖子呈现一次。
  • 移动和修改了您的<li>元素，使其不再特定于帖子的类型，Tumblr 提供了一个简洁的小{PostType}变量，可以打印每个帖子的类型（除了 photoset；它打印“照片”，但我添加了更多在那里解释这一点。）这可以更快地呈现并且更易于阅读。
  • {AudioPlayerWhite}把你换成{AudioPlayer}这只是因为如果您定义音频播放器的颜色，Tumblr 有时会感到不安，并且 tumblr.com/new/audio 上会显示一条消息，说“您的主题不支持正确的音频播放器”。可能与问题无关，但这是一个好习惯

工作示例：stackoverflow-theme-test-1.tumblr.com - 忽略它的外观，因为我没有应用任何样式，但代码都是完全有效的。

<ol class="posts">
  {block:Posts}
    <li class="post type_{PostType}{block:Photoset}set{/block:Photoset}" id="{PostID}"> <!--Saves you from having to manually define each type of post-->
      {block:Text}
        {block:Title}
          <h2><a href="{Permalink}" title="Go to post '{Title}'.">{Title}</a></h2>
        {/block:Title}
        {Body}
      {/block:Text}

      {block:Photo}
        <div class="image">
          <a href="{LinkURL}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></a>
        </div>
        {block:Caption}
          {Caption}
        {/block:Caption}
      {/block:Photo}

      {block:Photoset}
        {Photoset-500}
        {block:Caption}
          {Caption}
        {/block:Caption}
      {/block:Photoset}

      {block:Quote}
        <blockquote>
          <div class="quote_symbol">&ldquo;</div>
          {Quote}
        </blockquote>
        {block:Source}
        <div class="quote_source">{Source}</div>
        {/block:Source}
      {/block:Quote}

      {block:Link}
        <h2><a href="{URL}" {Target} title="Go to {Name}.">{Name}</a></h2>
        {block:Description}
          {Description}
        {/block:Description}
      {/block:Link}

      {block:Chat}
        {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}
        {Video-500}
        {block:Caption}
          {Caption}
        {/block:Caption}
      {/block:Video}

      {block:Audio}
        {AudioPlayer} <!--Tumblr don't like you to specify a colour for the {AudioPlayer}, you could do anyway, but in the interests of minimising parsing errors I havent--> 
        {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&amp;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>
  {/block:Posts}
</ol>
于 2012-08-04T15:22:34.403 回答