Bagaimana saya bisa mendapatkan tema Tumblr saya untuk memisahkan tag dengan koma?

Di akhir setiap jenis posting di tema Tumblr saya, saya mendapatkan kode ini:

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

(Saya tahu  bit itu bukan tindakan kelas. Itu solusi saya yang kedua, dan itu bukan tujuan dari pertanyaan ini, jadi bersabarlah!)

Pada posting dengan banyak tag, yang menghasilkan:

Jika saya hanya menambahkan koma setelah {Tag}, membuatnya <a href="{TagURL}">{Tag},</a>, saya mendapatkan:

Tag terakhir memiliki koma yang asing, dan kiriman dengan hanya satu tag akan menunjukkan koma tambahan di bawah metode ini.

Bagaimana cara menambahkan jumlah koma yang tepat?

Perbarui :

Jawaban Jeremy di bawah ini melakukan apa yang saya inginkan. Tapi, dalam upaya untuk mendapatkan mewah menjadi "standar-compliant" (meskipun saya tidak tahu mengapa ada orang yang menggunakan IE8 akan membaca tumblr saya), saya berusaha untuk menerapkan w3d ini saran. Jadi sekarang CSS terlihat seperti:

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

Hasilnya sekarang:

( nb: line break tidak berhubungan - saya menambahkannya dengan sengaja. )

Begitu. Apa yang salah?

Saya punya ide lain.

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

Ini akan menambahkan rentang dengan kelas "tagtail" setelah setiap tag.

Lalu, tambahkan css ini:

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

Ini akan memilih setiap jangkar tag yang muncul setelah rentang tagtail (jadi setiap orang kecuali yang pertama). Dengan cara ini, kami menghindari kebutuhan untuk menggunakan penyeleksi anak pertama atau anak terakhir .

MEMPERBARUI:

Jika Anda ingin memastikan bahwa koma ditata terpisah dari jangkar, saya kira Anda juga bisa melakukannya:

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

dan kemudian gaya seperti:

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

Namun, ini mungkin perlu diubah karena browser berbeda pada aturan utama.

Coba beberapa tipuan CSS (untuk membuatnya bekerja di IE 8, Anda perlu menentukan <! DOCTYPE> di bagian atas dokumen).

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

Kemudian, tambahkan CSS berikut:

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

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

Ia menggunakan pseudo-selector : after dan properti konten yang jarang digunakan untuk menambahkan koma setelah fakta. Aturan kedua menimpa properti konten untuk tag terakhir dalam urutan.

Mengikuti dari @ Jeremy jawaban ... Untuk mendukung IE8 (dan IE7) Anda harus menggunakan first-childpseudo-class, bukan last-child. IE8 tidak mendukung last-child, bahkan dalam mode yang sesuai standar (mis. Dengan DOCTYPE).

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

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

EDIT: Namun, sedikit keberatan dengan pendekatan ini adalah bahwa Anda mungkin harus menghapus spasi putih tambahan yang muncul setelah penutupan </a>markup / tema Anda.

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

EDIT: Screenshot dari output biola di Safari 5.0 pada OS X:

Membangun :beforesaran dalam jawaban sebelumnya. Jika Anda bekerja dengan daftar tag, sangat mungkin bahwa Anda akan menempatkannya dalam daftar. Jika Anda menggunakan masing-masing litag dengan :beforedaripada tag di dalam litag - setiap tag akan menjadi yang pertama-anak dari litag namun hanya satu litag akan menjadi yang pertama-anak dari ulatau oltag! Saya menggunakan daftar deskripsi karena saya ingin meletakkan "Tag" di dtag t sehingga hal yang sama berlaku untuk dtag d.

Namun menggunakan daftar deskripsi memiliki kompleksitas tambahan. ddTag pertama tidak pernah merupakan anak pertama dari dltag, ini adalah dttag, jadi Anda harus menggunakannya nth-child(2)untuk menargetkannya. Kelemahan dari penggunaannya nth-child(2)adalah lagi-lagi ini tidak sesuai dengan IE 8 sehingga masalah muncul kembali.

Inilah solusi saya.

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

Juga dari jawaban sebelumnya mereka menyarankan agar menggunakan spasi di konten ( content: ", ";) berfungsi. Apakah itu bekerja? Saya tidak bisa menjalankannya tetapi "\ 00a0" akan melakukannya.

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