Wie kann ich mein Tumblr-Thema dazu bringen, Tags durch Kommas zu trennen?

Am Ende jedes Beitragstyps in meinem Tumblr-Thema habe ich folgenden Code:

<p class="permalink">
   <a href="{Permalink}">{NoteCountWithLabel}</a>
   {block:HasTags} &nbsp;&nbsp; # filed under:
      {block:Tags}  
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
   {/block:HasTags}
</p>

(Ich weiß, dass das  Bit nicht gerade eine Klassenhandlung ist. Es war meine vier Sekunden lange Problemumgehung, und es ist nicht der Zweck dieser Frage, also nimm es mit!)

Bei einem Beitrag mit mehreren Tags ergibt sich Folgendes:

Wenn ich nur hinzufügen , ein Komma nach {Tag}, so dass es <a href="{TagURL}">{Tag},</a>, erhalte ich:

Das letzte Tag hat ein Fremdkomma, und bei Posts mit nur einem Tag wird auch bei dieser Methode das zusätzliche Komma angezeigt.

Wie füge ich genau die richtige Anzahl von Kommas hinzu?

Update :

Jeremys Antwort tat, was ich wollte. Um jedoch zu versuchen, "standardkonform" zu werden (obwohl ich nicht weiß, warum jemand, der IE8 verwendet, meinen Tumblr lesen würde), habe ich versucht, den Vorschlag von w3d umzusetzen. So sieht das CSS jetzt aus:

a.tag:before {
  content:", ";
}
a.tag:first-child:before {
  content:"";
}

Das Ergebnis ist jetzt:

( nb: Der Zeilenumbruch hat nichts damit zu tun - das habe ich absichtlich hinzugefügt. )

So. Was schief gelaufen ist?

Ich habe eine andere Idee.

{block:Tags}<a class="tag" href="{TagURL}">{Tag}</a><span class="tagtail"></span>{/block:Tags}

Dadurch wird nach jedem Tag eine Spanne mit der Klasse "Tagtail" hinzugefügt.

Fügen Sie dann dieses CSS hinzu:

span.tagtail + a.tag:before {
   content:", ";
}

Dadurch wird jeder Tag- Anker ausgewählt, der nach einer Tagtail- Spanne kommt (also jeder außer dem ersten). Auf diese Weise vermeiden wir die Verwendung der Selektoren für das erste oder das letzte Kind .

AKTUALISIEREN:

Wenn Sie sicherstellen möchten, dass die Kommas getrennt vom Anker stehen, können Sie wahrscheinlich auch Folgendes tun:

{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

und dann stylen Sie es wie:

span.taghead { display:none; }
a.tag + span.taghead { display:inline; }

Dies muss jedoch möglicherweise angepasst werden, da sich die Browser hinsichtlich der überschreibenden Regeln unterscheiden.

Probieren Sie einige CSS-Tricks aus (damit es in IE 8 funktioniert, müssen Sie oben im Dokument ein <! DOCTYPE> angeben).

<p class="permalink">
       <a href="{Permalink}">{NoteCountWithLabel}</a>
       {block:HasTags} &nbsp;&nbsp; # filed under:
          {block:Tags}  
             <a class="tag" href="{TagURL}">{Tag}</a>
          {/block:Tags}
       {/block:HasTags}
</p>

Fügen Sie dann das folgende CSS hinzu:

a.tag:after {
   content:",";
}

a.tag:last-child:after {
   content:"";
}

Es verwendet den Pseudo-Selektor : after und die wenig genutzte Content- Eigenschaft, um das Komma nachträglich hinzuzufügen. Die zweite Regel überschreibt die Inhaltseigenschaft für das letzte Tag in der Sequenz.

Nach der Antwort von @ Jeremy ... Um IE8 (und IE7) zu unterstützen, müssen Sie die Pseudoklasse first-childanstelle von verwenden last-child. IE8 wird last-childauch im standardkonformen Modus (dh mit einem DOCTYPE) nicht unterstützt.

a.tag:before {
   content:", ";    /* comma + space */
}

a.tag:first-child:before {
   content:"";
}

BEARBEITEN: Eine kleine Einschränkung bei diesem Ansatz ist jedoch, dass Sie wahrscheinlich alle zusätzlichen Leerzeichen entfernen müssen, die nach dem Schließen </a>in Ihrem Markup / Thema erscheinen.

      {block:Tags}<a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}

BEARBEITEN: Screenshot der Ausgabe von fiddle in Safari 5.0 unter OS X:

Aufbauend auf dem :beforeVorschlag in früheren Antworten. Wenn Sie mit einer Liste von Tags arbeiten, ist es durchaus möglich, dass Sie sie in eine Liste aufnehmen. Wenn Sie jedes liTag mit :beforeeinem Tag innerhalb des liTags anstelle eines Tags verwenden, ist jedes Tag das erste Kind des liTags, jedoch ist nur ein liTag das erste Kind des Tags uloder ol! Ich verwende eine Beschreibungsliste, da ich "Tags" in das dt-Tag einfügen wollte, damit dies auch für das dd-Tag gilt.

Die Verwendung einer Beschreibungsliste hat jedoch eine zusätzliche Komplexität. Das erste ddTag ist niemals das erste untergeordnete Element des dlTags, sondern das dtTag. Sie müssen es also verwenden nth-child(2), um es als Ziel festzulegen. Der Nachteil der Verwendung nth-child(2)ist, dass es wiederum nicht IE 8-kompatibel ist, sodass das Problem erneut auftritt.

Hier ist meine Lösung.

{block:HasTags}
<div class="t">
<dl>
<dt>Tags</dt>
{block:Tags}
<dd><a href="{TagURL}" class="tag">{Tag}</a></dd>
{/block:Tags}
</dl>
</div>
{/block:HasTags}

Aus früheren Antworten geht auch hervor, dass die Verwendung eines Leerzeichens in content ( content: ", ";) funktioniert. Funktioniert es? Ich kann es nicht zum Laufen bringen, aber "\ 00a0" wird es tun.

.t dl {
    margin: 0px;
    list-style-type: none;
}
.t dt {
    margin: 0px 5px 0px 0px;
    float: left;
}
.t dd {
    margin: 0px;
    float: left;
}

.t dd:before {
    padding: 0px 5px 0px 0px;
    content: ",\00a0";
    float: left;
}

.t dd:nth-child(2):before {
    padding: 0px 0px 0px 0px;
    content: "";
    float: left;
}