Tumblr temamı etiketleri virgülle ayırmak için nasıl edinebilirim?

Tumblr temamdaki her gönderi türünün sonunda şu kodu aldım:

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

(  Biraz tam olarak bir sınıf eylemi olmadığını biliyorum . Dört saniyelik geçici çözümümdü ve bu sorunun amacı değil, bu yüzden benimle kal!)

Birden fazla etiketi olan bir gönderide bu, aşağıdakileri sağlar:

Sadece sonra virgül eklerseniz {Tag}yapma, <a href="{TagURL}">{Tag},</a>ben alıyorum:

Son etiketin dışında bir virgül vardır ve yalnızca bir etikete sahip gönderiler de bu yöntem altında fazladan virgül gösterir.

Yalnızca doğru sayıda virgül nasıl ekleyebilirim?

Güncelleme :

Jeremy aşağıdaki cevabı istediğimi yaptı. Ancak, fantezi almak için "standartlara uygun" (IE8 kullanan herkesin tumblr'ımı neden okuyacağını bilmesem de), w3d'nin önerisini uygulamaya çalıştım. Şimdi CSS şöyle görünüyor:

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

Sonuç şimdi:

( nb: satır sonu ilgisiz - bunu bilerek ekledim. )

Yani. Ne yanlış gitti?

Başka bir fikrim var.

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

Bu, her etiketten sonra "tagtail" sınıfıyla bir span ekleyecektir .

Sonra şu css'i ekleyin:

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

Bu, bir kuyruk kuyruğu açıklığından sonra gelen her etiket tutturucusunu seçecektir (bu nedenle birinciden başka her biri). Bu şekilde, ilk çocuk veya son çocuk seçicilerini kullanma ihtiyacından kaçınırız .

GÜNCELLEME:

Virgüllerin çapa dışında şekillendirildiğinden emin olmak istiyorsanız, şunları da yapabilirsiniz:

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

ve sonra şöyle stil verin:

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

Ancak, tarayıcılar geçersiz kılma kurallarında farklılık gösterdiğinden bunun ayarlanması gerekebilir.

Bazı CSS hilelerini deneyin (IE 8'de çalışmasını sağlamak için, belgenin üstünde bir <! DOCTYPE> belirtmeniz gerekir).

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

Ardından, aşağıdaki CSS'yi ekleyin:

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

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

Sözde seçici eklemek için sözde seçici : after ve az kullanılan content özelliğini kullanır. İkinci kural, dizideki son etiketin content özelliğini geçersiz kılar.

@ Jeremy'nin cevabından sonra ... IE8'i (ve IE7'yi) desteklemek için bunun first-childyerine sözde sınıfı kullanmanız gerekecek last-child. IE8, last-childstandartlara uygun modda bile (DOCTYPE ile) desteklemez.

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

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

DÜZENLEME: Bununla birlikte, bu yaklaşımla ilgili hafif bir uyarı </a>, işaretlemenizde / temanızda kapatıldıktan sonra görünen herhangi bir ek beyaz boşluğu muhtemelen kaldırmanız gerekeceğidir .

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

EDIT: OS 5.0 Safari 5.0'da keman çıktı ekran görüntüsü :

:beforeÖnceki cevaplarda öneri üzerine inşa . Bir etiket listesiyle çalışıyorsanız, bunları bir listeye yerleştirmeniz oldukça olasıdır. Her lietiketi :beforeetiketin içindeki etiketi yerine kullanırsanız li- her etiket etiketin ilk alt öğesi olur, liancak yalnızca bir lietiket ulveya oletiketinin ilk alt öğesi olur ! Ben dt etiketi "Etiketler" koymak istedim bir açıklama listesi kullanıyorum böylece aynı dd etiketi için geçerlidir .

Ancak bir açıklama listesi kullanmanın ek bir karmaşıklığı vardır. İlk ddetiket asla etiketin ilk alt öğesi değildir, dletikettir, bu dtnedenle nth-child(2)hedeflemek için kullanmanız gerekir. Kullanmanın dezavantajı, nth-child(2)IE 8 uyumlu olmadığı için bu sorunun tekrar gelmesi.

İşte benim çözümüm.

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

Ayrıca önceki yanıtlardan, content ( content: ", ";) içinde bir alan kullanmanın işe yaradığını önerirler . Çalışıyor mu? Çalışamıyor ama "\ 00a0" olacak.

.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;
}