আমি কীভাবে আমার টাম্বলার থিমটি কমা দিয়ে আলাদা আলাদা ট্যাগগুলিতে পেতে পারি?

Question

আমার টাম্বলার থিমের প্রতিটি পোস্টের টাইপ শেষে, আমি এই কোডটি পেয়েছি:

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

(আমি জানি  বিটটি হুবহু কোনও শ্রেণিবদ্ধ কাজ নয় It এটি আমার চারটি দ্বিতীয় কাজ, এবং এটি এই প্রশ্নের উদ্দেশ্য নয়, তাই আমার সাথে সহ্য করুন!)

একাধিক ট্যাগ সহ একটি পোস্টে, এটি দেয়:

আমি যদি {Tag}এটির পরে কেবল কমা যোগ করি তবে তা <a href="{TagURL}">{Tag},</a>পাই:

সর্বশেষ ট্যাগটিতে একটি বহিরাগত কমা রয়েছে এবং কেবলমাত্র একটি ট্যাগযুক্ত পোস্টগুলিতে এই পদ্ধতির অধীনে অতিরিক্ত কমাও প্রদর্শিত হবে।

আমি কীভাবে ঠিক কমা সংখ্যার যোগ করব?

---

আপডেট :

নীচে জেরেমির উত্তর আমি যা চাইছিলাম তা করেছিল। তবে, অভিনবত্ব অর্জনের "মানদণ্ডের সাথে সামঞ্জস্যপূর্ণ" হওয়ার চেষ্টা করার জন্য (যদিও আমি জানি না যে আইই 8 ব্যবহার করে কেউ আমার টাম্বলার কেন পড়বে), আমি ডব্লু 3 এর পরামর্শটি বাস্তবায়নের চেষ্টা করেছি। তাই এখন সিএসএসের মতো দেখাচ্ছে:

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

ফলাফল এখন:

( এনবি: লাইন ব্রেকটি সম্পর্কিত নয় - আমি এটি উদ্দেশ্য হিসাবে যুক্ত করেছি ))

So. কি ভুল ছিল?

Comments

এটি সত্যই "স্ট্যান্ডার্ডস কমপ্লায়েন্ট" হওয়ার ঘটনা নয় , আইই 8 কেবল এই সিএসএসকে সমর্থন করবে যদি এটি মান সম্মত মোডে থাকে। দুর্ভাগ্যক্রমে উইন্ডোজ এক্সপি-র সমস্ত ব্যবহারকারী আইই 8-তে সীমাবদ্ধ থাকবে যেহেতু আইই 9-তে আপগ্রেড করার জন্য আপনার ভিস্তা + প্রয়োজন।

— মিঃ হোয়েট

@ w3d এইচএম উল্লেখযোগ্য। কাঁধে রাখা 'অভিনব'! :)

— হেয়ারবোট

দুঃখিত, আমি মনে করি যেন আমি বিষয়গুলিকে গোলমাল করছি, যেহেতু এটি অবশ্যই আপনার ব্রাউজারে আপনার জন্য ঠিক কাজ করছে। ট্যাগের পরে এবং তার আগে অতিরিক্ত সাদা স্থান ,হ'ল সম্ভবত আপনার শ্বেত-স্থান যা </a>আপনার মার্কআপ / থিমের পরে ঘটে । আপনি এটি অপসারণ করতে চেষ্টা করতে পারেন। প্রথম কমা এখনও উপস্থিত? শো করার content:"";জন্য content:"%";কেবল পরিবর্তন করার চেষ্টা করবেন %? (যদিও আমি আমার মন্তব্যে আপনার মন্তব্য থেকে দেখছি যে

— এটির

আপনি কোন ব্রাউজারে এটি চেষ্টা করছেন?

— মিঃ হোয়েট

@ w3d,% দেখায় না। আমি ওএস এক্স লায়নটিতে 13.0.782.220 ক্রোম চালাচ্ছি। আপাতত জেরেমির সমাধানে ফিরে যেতে হবে তবে টুইট চালিয়ে যেতে হবে। এটিকে গোলমাল করার বিষয়ে কোনও উদ্বেগ নেই - এটি চিবানো মজাদার সমস্যা!

— হেয়ারবোট

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বিট এখন আমার খুব খুশি করছে। উত্তরে আপনার মন্তব্য যুক্ত করার বিষয়ে বিবেচনা করুন?

— হেয়ারবোট

কাজ ও সম্পন্ন! খুশি এটা আপনার জন্য কাজ করে।

— জেরেমি

Answer 2

কিছু সিএসএস কৌশল চেষ্টা করে দেখুন (আইই 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

চমৎকার। ব্যাপক সফলতা. ধন্যবাদ, জেরেমি!

— হেয়ারবোট

@ জেরেমি: আইই 8 last-childসিউডো-ক্লাসটি এমনকি মান সম্মত মোডে (উদাহরণস্বরূপ: একটি ডোকিপিইপি সহ) সমর্থন করে না । first-child:beforeআইই 8 (এবং আই 7) সমর্থন করার জন্য আপনাকে ব্যবহার করতে হবে ।

— মিঃ হোয়েট

@ ডাব্লু 3 ডি: এটি সফল হয়। বোকা আই। আমি নিশ্চিত না কেন আপনার প্রথম সন্তানের: নির্বাচক আগে অ্যাবির পক্ষে সঠিকভাবে কাজ করছেন না, তবে আমি অন্য একটি ধারণার সাথে আরও একটি উত্তর যুক্ত করেছি যা স্প্যান যোগ করে এবং + নির্বাচক ব্যবহার করে।

— জেরেমি

Answer 3

@ জেরেমির উত্তর থেকে অনুসরণ করা ... আইই 8 (এবং আই 7) সমর্থন করার জন্য আপনার first-childপরিবর্তে সিউডো-ক্লাস ব্যবহার করা দরকার last-child। আইই 8 সমর্থন করে না last-child, এমনকি মান সম্মত মোডেও (যেমন।

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

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

সম্পাদনা: তবে, এই পদ্ধতির সাথে একটি সামান্য সতর্কতা হ'ল আপনাকে সম্ভবত </a>আপনার মার্কআপ / থিমটি বন্ধ হওয়ার পরে উপস্থিত কোনও অতিরিক্ত শ্বেত-স্থান সরিয়ে ফেলতে হবে ।

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

সম্পাদনা: ওএস এক্স-এ সাফারি 5.0-এ ফিডলের আউটপুটটির স্ক্রিনশট :

Comments

আমি ব্যবহার করছি a.tag:before { content:", ";}এবং a.tag:first-child:before { content:"# tagged: ";}, তবে এটির ফলাফলটি কেবলমাত্র বলছে এমন একটি সারিতে তৈরি হয় , Mareen Fischinger , New York City , Times Square। হুঁ। এই মন্তব্য বিভ্রান্তিকর। আমি প্রশ্ন আপডেট করব।

— হেয়ারবোট

Answer 4

:beforeপূর্ববর্তী উত্তরের পরামর্শের উপর ভিত্তি করে । আপনি যদি ট্যাগগুলির একটি তালিকা নিয়ে কাজ করছেন তবে এটি সম্ভব যে আপনি এগুলিকে একটি তালিকায় রাখবেন। আপনি যদি ট্যাগের ভিতরে থাকা ট্যাগের পরিবর্তে প্রতিটি liট্যাগ ব্যবহার করেন - প্রতিটি ট্যাগই ট্যাগের প্রথম সন্তান হবে তবে কেবল একটি ট্যাগই বা ট্যাগের প্রথম সন্তান হতে পারে ! আমি ট্যাগ তালিকাতে "ট্যাগ" রাখতে চাইলে আমি একটি বিবরণীর তালিকাটি ব্যবহার করছি যাতে এটি ডি ট্যাগের ক্ষেত্রেও প্রযোজ্য ।:beforelililiuloldd

একটি বিবরণী তালিকা ব্যবহারের ক্ষেত্রে অবশ্য একটি যুক্ত জটিলতা রয়েছে। প্রথম ddট্যাগটি কখনই ট্যাগের প্রথম বাচ্চা হয় না dl, এটি dtট্যাগ হয়, তাই nth-child(2)এটির লক্ষ্যবস্তু করতে আপনাকে ব্যবহার করতে হবে। ব্যবহারের ক্ষতিটি nth-child(2)হ'ল এটি আবার আইই 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: ", ";) স্থান ব্যবহার করা কাজ করে। এটা কি কাজ করে? আমি এটি কাজ করতে পারি না তবে "a 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;
}