Peekaboo ပိုစ္ေခါက္ျခင္း (Label & Archive)

Label ကေန၊ ဒါမွမဟုတ္ Archive ကေန ကလစ္ႏွိပ္ၿပီး ၾကည့္မယ္ဆိုရင္ ပံုမွန္ အားျဖင့္ ေခါင္းစဥ္ေကာ စာကိုယ္ပါ အကုန္ ေဖာ္ျပေပးမွာ ျဖစ္ပါတယ္။ ဥပမာ “ကဗ်ာ”ဆိုတဲ့ Label ကို ႏွိပ္လိုက္ရင္ ကဗ်ာလို႔ အၫႊန္တပ္ထားတဲ့ ပို႔စ္ေတြ အကုန္လံုးကို ေခါင္းစဥ္ေကာ စာကိုယ္ပါ အကုန္ျပေပးပါတယ္။ ဒီေတာ့ အျမင္ ႐ႈပ္ႏိုင္ပါတယ္။ ဒါေၾကာင့္ Label နဲ႔ Archive မွာ ကလစ္ႏွိပ္ရင္ ပို႔စ္ေခါင္းစဥ္ပဲ ေဖာ္ျပဖို႔ ဒီေနရာမွာ ေဆြးေႏြးၿပီး ျဖစ္ပါတယ္။ ေခါင္းစဥ္ပဲ ေဖာ္ျပမယ္ဆိုရင္ အျမင္ရွင္းေပမယ့္ တကယ္လို႔ စာကိုယ္ကို ဖတ္ခ်င္ရင္ေတာ့ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္ၿပီး Page ကို ျပန္တင္မွာပါ။ ဒါဆို Page ကို Refresh ျပန္လုပ္တဲ့ အခ်ိန္ ထပ္ေပးရဦးမယ္။ ေကာ္နက္ရွင္ နည္းတဲ့ ေနရာေတြမွာ Page တစ္ခု တက္ဖို႔ အခ်ိန္ အမ်ားႀကီး ေပးရတာေၾကာင့္ ေနာက္တစ္ခါ Refresh ျပန္မလုပ္ဘဲ သက္ဆိုင္ရာ စာကိုယ္ကို ဖတ္ႏိုင္မယ္ဆိုရင္ ပိုအဆင္ေျပမယ္လို႔ ယူဆပါတယ္။ အခု ဒီပို႔စ္မွာ အဲဒီလို ဘယ္လို လုပ္မလဲ ဆိုတာ ေဆြးေႏြးပါ႔မယ္။ ေအာက္မွာပါတဲ့ ပံုအတိုင္း ေခါင္းစဥ္ေတြပဲ ျပမွာျဖစ္ၿပီး စာကိုယ္ကို ဖတ္ခ်င္ရင္ေတာ့ သက္ဆုိင္ရာ [+/-] ကို ႏွိပ္ၿပီး ဖတ္ႏိုင္မွာ ျဖစ္တယ္။

Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။ </head> ရဲ႕ အထက္နားမွာ ေအာက္က Code ကို ထည့္ေပးပါ။

<script type='text/javascript'>
function toggleIt(id) {
    post = document.getElementById(id);
    if (post.style.display != 'none') {
        post.style.display = 'none';
    } else {
        post.style.display = '';
    }
}
</script>

ေနာက္ၿပီး <b:includable id='main' var='top'> ကို ရွာေပးပါ။ ေတြ႕ၿပီဆိုရင္ သူ႔ရဲ႕ အေပၚနားမွာ ေအာက္က Code ကို ထည့္ေပးပါ။

<b:includable id='PeekABooPost' var='post'>
  <div class='post uncustomized-post-template'>
      <table><tr>
    <td width='40px'>
        <a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
    </td>
    <td>
        <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
    </td>
    </tr></table>
      <div class='post-body' expr:id='data:post.id' style='display:none'>
        <p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
  </div>
</b:includable>

ေနာက္ၿပီး ေအာက္မွာ ျပထားတဲ့ အနီေရာင္ Code ေတြကို ျဖည့္ေပးပါ။ အမည္းေရာင္ Code ေတြဟာ မူလ ရွိႏွင့္ၿပီး Code ေတြ ျဖစ္ပါတယ္။ အနီေရာင္ Code ေတြကို ထပ္ျဖည့္ေပးပါ။

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>
        <b:include data='post' name='post'/>
      </b:if>

      <b:if cond='data:blog.pageType == "item"'>
        <b:if cond='data:post.allowComments'>
          <b:include data='post' name='comments'/>
        </b:if>
      </b:if>
    </b:loop>
  </div>

ဒါဆိုရင္ က်ေနာ္တို႔ စာကိုယ္ကို ခ်ံဳ႕လို႔၊ ခ်ဲ႕လို႔ ရပါၿပီ။ အရင္ Peekaboo ပို႔စ္ေခါက္ျခင္း မွာ ပို႔စ္ကို တိုေအာင္ ေခါက္ဖို႔ ရွင္းျပခဲ့ဖူးပါတယ္။ ဒါေပမယ့္ Label ကေန ကလစ္ႏွိပ္ရင္ ပို႔စ္ေခါက္တာ အလုပ္မလုပ္ေတာ့ပါဘူး။ တကယ္လို႔ Label နဲ႔ Archive ႏွိပ္ၿပီး ပို႔စ္ကို ေခါက္လ်က္သား တင္ခ်င္တယ္ ဆိုရင္ေတာ့ ဒီပို႔စ္အတုိင္း လုပ္လိုက္ရင္ အဆင္ေျပသြားႏိုင္ပါတယ္။ ေအာင္ျမင္ပါေစဗ်ာ။