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


11

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 &nbsp;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:

ini seperti apa

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

terlalu banyak koma

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:

tangkapan layar yang diperbarui

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

Begitu. Apa yang salah?


Ini tidak benar-benar kasus yang "standar compliant", hanya saja IE8 hanya akan mendukung CSS ini jika berada dalam modus standar compliant. Sayangnya semua pengguna di Windows XP akan terbatas pada IE8 karena Anda memerlukan Vista + untuk meningkatkan ke IE9.
MrWhite

@ w3d Hm. Dicatat. Seharusnya menyimpannya di 'semakin mewah'! :)
hairboat

Maaf, saya merasa seolah-olah saya mengacaukan semuanya, karena itu jelas bekerja dengan baik untuk Anda di browser Anda. Ruang putih tambahan setelah tag dan sebelum ,mungkin merupakan ruang putih yang terjadi setelah </a>di markup / tema Anda. Anda dapat mencoba menghapus ini. Koma pertama masih ada? Coba ubah content:"";menjadi content:"%";hanya untuk melihat apakah %pertunjukan? (Meskipun saya melihat dari komentar Anda pada jawaban saya bahwa ini mungkin tidak berpengaruh ?!)
MrWhite

Di browser mana Anda mencoba ini?
MrWhite

@ w3d,% tidak muncul. Saya menjalankan Chrome 13.0.782.220 di OS X Lion. Akan kembali ke solusi Jeremy untuk saat ini tetapi terus men-tweak. Jangan khawatir mengacaukannya - ini masalah yang menyenangkan untuk dikunyah!
hairboat

Jawaban:


4

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.


+1 ... Sayang sekali tentang markup tambahan, tapi saya suka! :)
MrWhite

Saya mendapati diri saya melemparkan markup ekstra yang tidak perlu dalam banyak desain untuk mendapatkan IE agar sesuai dengan tata letak dengan CSS yang tidak didukungnya.
Jeremy

Jika Anda ingin memastikan bahwa koma bergaya selain anchor, saya kira Anda juga bisa melakukan: {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}dan gaya kemudian seperti: span.taghead { display:none; } a.tag + span.taghead { display:inline; }. Namun, ini mungkin perlu diubah karena browser berbeda pada aturan utama.
Jeremy

@ Jeremy, bit terakhir ini bekerja dengan sempurna . The tagtailMetode itu render spasi sebelum koma, tapi ini sedikit tagheadagak membuat saya sangat bahagia sekarang. Pertimbangkan untuk menambahkan komentar Anda kembali ke jawabannya?
hairboat

Dilakukan dan dilakukan! Senang itu berhasil untuk Anda.
Jeremy

4

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.


Luar biasa. Sukses besar. Terima kasih, Jeremy!
hairboat

1
@ Jeremy: IE8 tidak mendukung last-childpseudo-class bahkan dalam mode standar yang sesuai (mis. Dengan DOCTYPE). Anda harus menggunakan first-child:beforeuntuk mendukung IE8 (dan IE7).
MrWhite

@ w3d: Itu menyebalkan. IE konyol. Saya tidak yakin mengapa anak pertama Anda: sebelum pemilih tidak berfungsi dengan benar untuk Abby, tetapi saya telah menambahkan jawaban lain dengan gagasan lain yang menambahkan rentang dan menggunakan pemilih +.
Jeremy

3

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:

Cuplikan layar output biola di Safari 5.0 pada OS X


Saya menggunakan a.tag:before { content:", ";}dan a.tag:first-child:before { content:"# tagged: ";}, tetapi menghasilkan deretan tag yang hanya mengatakan , Mareen Fischinger , New York City , Times Square. Hm Komentar ini membingungkan. Saya akan memperbarui pertanyaan.
hairboat

0

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;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.