使用Tumblr的主题解析器遇到一些问题

Question

在我正在处理的tumblr主题的一部分下面，你会注意到我使用{block:PostType}语法来声明每个帖子的开头标记，这是有序列表中的<li>元素。这使我不仅可以根据帖子的类型动态设置li的类，还可以减少我调用ShareThis JS的次数，这实际上是在浏览页面。这创造了一个新问题，我认为这是Tumblr解析器中的一个缺陷。每个帖子都是一个有序列表，其中包含一个<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">&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}

Answer 1

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

只需将<ol>放在{block:Posts}之前，将</ol>直接放在{/block:Posts}

之后

Answer 2

试试这个，当我把它放入Theme Parser时，它对我有用。我已经修改了你的代码：

• 彻底改变了您的语法。请不要冒犯，我只是为了清楚起见才这样做！
• 将<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>