Quelques problèmes avec le Theme Parser de Tumblr

Question

Ci-dessous une partie d'un thème tumblr sur lequel je travaille et vous remarquerez que j'utilise l'élément {block:PostType} pour déclarer la balise d'ouverture de chaque message, qui est une balise <li> dans une liste ordonnée. Cela me permet non seulement de définir dynamiquement la classe du lien en fonction du type de message, mais aussi de réduire le nombre de fois où j'appelle le JS ShareThis, ce qui alourdissait vraiment la page. Cela crée un nouveau problème qui, je crois, est une faille dans l'analyseur de Tumblr. Chaque article est une liste ordonnée avec un <li> en son sein. Je sais que je pourrais résoudre ce problème en faisant en sorte que chaque message soit un élément <div> mais j'aime beaucoup le contrôle et la sémantique de l'utilisation d'une liste. Gourous de Tumblr ? Des suggestions ?

Exemple de code :

{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

Le bloc "Posts" est exécuté une fois pour chaque article, c'est pourquoi le balisage du conteneur doit être placé en dehors de ce bloc.

Il suffit de mettre le <ol> juste avant {block:Posts} et le </ol> directement après le {/block:Posts}

Answer 2

Essayez ceci, cela a fonctionné pour moi quand je l'ai mis dans le Theme Parser. J'ai un peu modifié votre code :

• a remanié votre syntaxe à dessein. Ne vous en offusquez pas, je l'ai fait par souci de clarté !
• déplacer le <ol> en dehors de l'élément {block:Posts} car tout ce qu'il contient est rendu une fois pour chaque type de message.
• déplacé et modifié votre <li> de façon à ce qu'il ne soit plus spécifique au type d'article, Tumblr fournit un petit élément soigné. {PostType} qui affichera le type de chaque message (sauf pour photoset ; pour lequel il affichera "photo", mais j'ai ajouté un peu plus pour tenir compte de cela). Ceci est plus rapide à rendre et plus simple à lire.
• a échangé votre {AudioPlayerWhite} à {AudioPlayer} Il s'agit simplement du fait que Tumblr s'énerve parfois si vous définissez la couleur du lecteur audio, et qu'un message s'affiche sur tumblr.com/new/audio disant "Votre thème ne prend pas en charge les lecteurs audio appropriés". Ce n'est probablement pas lié au problème, mais c'est une bonne pratique.

Exemple de travail : stackoverflow-theme-test-1.tumblr.com - ignore son apparence car je n'ai pas appliqué de style, mais le code est parfaitement valide.

<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>