अल्पविराम के साथ टैग को अलग करने के लिए मैं अपनी टंबलर थीम कैसे प्राप्त कर सकता हूं?

Question

मेरे Tumblr विषय में हर पोस्ट के अंत में, मुझे यह कोड मिला है:

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

(मुझे पता है कि  बिट बिल्कुल एक क्लास एक्ट नहीं है। यह मेरा चार सेकंड का वर्कअराउंड था, और यह इस सवाल का उद्देश्य नहीं है, इसलिए मेरे साथ सहन करें!)

कई टैग के साथ एक पोस्ट पर, कि पैदावार:

अगर मैं {Tag}इसे बनाने के बाद सिर्फ एक अल्पविराम जोड़ता <a href="{TagURL}">{Tag},</a>हूं, तो मुझे यह मिलता है:

अंतिम टैग में एक एक्सट्रॉनिक कॉमा है, और केवल एक टैग के साथ पोस्ट इस पद्धति के तहत अतिरिक्त कॉमा दिखाएगा।

मैं सिर्फ कॉमा की सही संख्या कैसे जोड़ूं?

---

अपडेट :

नीचे जेरेमी का जवाब था कि मुझे क्या चाहिए। लेकिन, कल्पना को "मानक-अनुरूप" होने के प्रयास में (हालांकि मुझे नहीं पता है कि IE8 का उपयोग करने वाला कोई भी मेरे tumblr को क्यों पढ़ेगा), मैंने w3d के सुझाव को लागू करने का प्रयास किया। तो अब CSS दिखता है:

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

परिणाम अब है:

( नायब: लाइन ब्रेक असंबंधित है - मैंने इसे उद्देश्य पर जोड़ा है। )

इसलिए। क्या गलत हुआ?

Comments

यह वास्तव में "मानकों के अनुरूप" होने का मामला नहीं है , यह सिर्फ इतना है कि IE8 केवल इस सीएसएस का समर्थन करेगा यदि यह मानकों के अनुरूप मोड में है। दुर्भाग्य से Windows XP पर सभी उपयोगकर्ता IE8 तक सीमित होंगे क्योंकि आपको IE9 में अपग्रेड करने के लिए Vista + की आवश्यकता है।

— MrWhite

@ w3d एचएम। का उल्लेख किया। कैथा ने इसे 'फैंसी' माना! :)

— hairboat

क्षमा करें, मुझे लगता है जैसे मैं चीजों को गड़बड़ कर रहा हूं, क्योंकि यह स्पष्ट रूप से आपके ब्राउज़र में आपके लिए ठीक काम कर रहा था। टैग के बाद और उससे पहले का अतिरिक्त व्हाइट-स्पेस ,संभवतः वह सफेद-स्पेस है जो </a>आपके मार्कअप / थीम के बाद होता है । आप इसे हटाने का प्रयास कर सकते हैं। पहला अल्पविराम अभी भी मौजूद है? शो देखने के content:"";लिए content:"%";सिर्फ देखने के लिए बदलने की कोशिश करें %? (हालांकि मैं अपने जवाब पर आपकी टिप्पणी से देखता हूं कि इसका कोई प्रभाव नहीं हो सकता है!)

— Mrhhite

आप कौन से ब्राउज़र में इसे आज़मा रहे हैं?

— MrWhite

@ w3d,% दिखाई नहीं देता है। मैं OS X शेर पर Chrome 13.0.782.220 चला रहा हूं। अब के लिए जेरेमी के समाधान पर वापस जाएंगे लेकिन जारी रखें। इसे गड़बड़ करने के बारे में कोई चिंता नहीं है - यह चबाने के लिए एक मजेदार समस्या है!

— hairboat

Answer 1

मुझे एक और विचार आया है।

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

यह हर टैग के बाद "टैगटेल" वर्ग के साथ एक स्पैन जोड़ देगा ।

फिर, इस सीएसएस को जोड़ें:

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

यह हर टैग एंकर का चयन करेगा जो एक टैगटेल स्पैन के बाद आता है (इसलिए हर एक लेकिन पहले)। इस तरह, हम पहले-बच्चे या अंतिम-बच्चे के चयनकर्ताओं का उपयोग करने की आवश्यकता से बचते हैं ।

---

अपडेट करें:

यदि आप यह सुनिश्चित करना चाहते हैं कि एंकर के अलावा कॉमा को स्टाइल किया गया है, तो मुझे लगता है कि आप भी कर सकते हैं:

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

और फिर इसे स्टाइल करें:

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

हालाँकि, इसे बदलने की आवश्यकता हो सकती है क्योंकि ब्राउज़र ओवरराइडिंग नियमों पर भिन्न होते हैं।

Comments

+1 ... अतिरिक्त मार्कअप के बारे में शर्म की बात है, लेकिन मुझे यह पसंद है! :)

— मृद्वीप

मैं खुद को बहुत सारे डिजाइन में अतिरिक्त अनावश्यक मार्कअप फेंक रहा हूं, ताकि सीएसएस के साथ लेआउट का मिलान करने के लिए आईई को समर्थन न मिले।

— जेरेमी

: यदि आप यह सुनिश्चित करें कि अल्पविराम के लंगर से अलग स्टाइल रहे हैं चाहते हैं, मैं तुम्हें भी कर सकता है लगता है {block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}की तरह और फिर शैली यह: span.taghead { display:none; } a.tag + span.taghead { display:inline; }। हालाँकि, इसे बदलने की आवश्यकता हो सकती है क्योंकि ब्राउज़र ओवरराइडिंग नियमों पर भिन्न होते हैं।

— जेरेमी

@ जेरेमी, यह अंतिम बिट पूरी तरह से काम कर रहा है । tagtailविधि अल्पविराम से पहले एक स्थान प्रतिपादन किया गया था, लेकिन इस छोटे से tagheadथोड़ा अब मुझे बहुत खुश कर रही है। उत्तर में अपनी टिप्पणी वापस जोड़ने पर विचार करें?

— hairboat

किया और किया! खुशी है कि यह आपके लिए काम करता है।

— जेरेमी

Answer 2

कुछ सीएसएस ट्रिकरी आज़माएं (IE 8 में काम करने के लिए, आपको दस्तावेज़ के शीर्ष पर <! DOCTYPE> निर्दिष्ट करना होगा)।

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

फिर, निम्नलिखित सीएसएस जोड़ें:

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

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

यह छद्म चयनकर्ता का उपयोग करता है : तथ्य के बाद अल्पविराम जोड़ने के लिए और बाद में उपयोग की जाने वाली छोटी सामग्री का उपयोग करता है। दूसरा नियम अनुक्रम में अंतिम टैग के लिए सामग्री संपत्ति को ओवरराइड करता है।

Comments

अति उत्कृष्ट। बहुत बड़ी सफलता। धन्यवाद, जेरेमी!

— hairboat

@ जेरेमी: IE8 last-childमानकों के अनुरूप मोड में भी छद्म वर्ग का समर्थन नहीं करता है (यानी। DOCTYPE के साथ)। first-child:beforeIE8 (और IE7) का समर्थन करने के लिए आपको उपयोग करने की आवश्यकता होगी ।

— श्रीवित्ते

@ w3d: यह बेकार है। सिली आईई। मुझे यकीन नहीं है कि आपका पहला बच्चा: इससे पहले कि चयनकर्ता एबी के लिए ठीक से काम नहीं कर रहा है, लेकिन मैंने एक और विचार के साथ एक और उत्तर जोड़ा है जो स्पैन जोड़ता है और + चयनकर्ता का उपयोग करता है।

— जेरेमी

Answer 3

@ जेरेमी के जवाब से आगे ... IE8 (और IE7) का समर्थन करने के लिए आपको first-childछद्म वर्ग का उपयोग करने की आवश्यकता होगी , बजाय last-child। IE8 last-childमानकों के अनुरूप मोड (यानी एक DOCTYPE के साथ) में भी समर्थन नहीं करता है ।

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

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

संपादित करें: हालांकि, इस दृष्टिकोण के साथ एक मामूली चेतावनी यह है कि आपको संभवतः </a>अपने मार्कअप / थीम में बंद होने के बाद दिखाई देने वाले किसी भी अतिरिक्त सफेद-स्थान को निकालना होगा ।

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

संपादित करें: OS X पर Safari 5.0 में फ़िडेल के आउटपुट का स्क्रीनशॉट :

Comments

मैं उपयोग कर रहा हूं a.tag:before { content:", ";}और a.tag:first-child:before { content:"# tagged: ";}, लेकिन यह उन टैगों की एक पंक्ति में परिणत होता है जो सिर्फ कहते हैं , Mareen Fischinger , New York City , Times Square। हम्म। यह टिप्पणी भ्रामक है। मैं सवाल को अपडेट करूंगा।

— hairboat

Answer 4

:beforeपिछले उत्तरों में सुझाव पर निर्माण । यदि आप टैग की सूची के साथ काम कर रहे हैं, तो यह बहुत संभव है कि आप उन्हें एक सूची में रखेंगे। यदि आप टैग के अंदर liटैग के :beforeबजाय प्रत्येक टैग का उपयोग करते हैं li- प्रत्येक टैग टैग का पहला बच्चा होगा, liहालांकि केवल एक liटैग ulया olटैग का पहला बच्चा होगा ! मैं एक विवरण सूची का उपयोग कर रहा हूं क्योंकि मैं dटी टैग में "टैग" डालना चाहता था इसलिए dडी टैग पर भी यही लागू होता है ।

हालांकि, विवरण सूची का उपयोग करना एक अतिरिक्त जटिलता है। पहला ddटैग कभी भी टैग का पहला बच्चा नहीं है dl, यह dtटैग है, इसलिए आपको nth-child(2)इसे लक्षित करने के लिए उपयोग करने की आवश्यकता है। उपयोग करने के नकारात्मक पक्ष nth-child(2)यह है कि फिर से यह IE 8 अनुरूप नहीं है ताकि मुद्दा फिर से आ जाए।

यहाँ मेरा समाधान है।

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

पिछले उत्तरों से भी वे सुझाव देते हैं कि सामग्री में स्थान का उपयोग करना ( content: ", ";) काम करता है। क्या यह काम करता है? मैं इसे काम करने के लिए नहीं कर सकता, लेकिन "\ _00a0" होगा।

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