Editing your Blogger Template: Defining and Using a Function

Dear Friend,

As soon as I complete my first hack, I start thinking about refactoring it. Anything that is repeated again and again, is of course a good candidate for refactoring. As you can see, the header date is repeated twice:

     <b:if cond='data:blog.pageType == "item"'>
       <h2 class='date-header'><data:post.dateHeader/></h2>
     </b:if>
     <!--Fix Bug for not showing the date on main page - 7 Sep 2006 -->
     <b:if cond='data:blog.homepageUrl == data:blog.url'>
       <h2 class='date-header'><data:post.dateHeader/></h2>
     </b:if>


After reading the Beta Blogger Help Line, I found out how to make functions and function calls. Basically, you define a function call inside a widget only, and the scope of it thus is inside that widget. In Beta Blogger lingo, a function is called an "includable." You can call a function without THE parameter (since Blogger only allow ONE parameter to pass from the function call.)

Here is an example of a function definition:

  <b:includable id='hoctro_dateHdr'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
  </b:includable>

Then, once you define the function, you can call it, such as:

  <b:include name='hoctro_dateHdr'/>

Thus, here is my improvement of my first hack. It works the same as of the other one, so you don't even have to update that one with this one.

First, look for the Blog1 Widget:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>


Then, right before the "main" includable of that widget, add these three lines:

  <b:includable id='hoctro_dateHdr'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
  </b:includable>


Finally, replace the <div id='blog-posts'> of the "main" includable with this one:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
    <!--Improved hack from Hackosphere By: Hoctro http://hoctro.blogspot.com - 6 Sep 2006 -->
    <!-- This hack allows posts to be shown without dates and as a bullet list -->
        
        <b:if cond='data:post.dateHeader'>
          <b:if cond='data:blog.pageType == "item"'>

            <b:include name='hoctro_dateHdr'/>

          </b:if>
          <!--Fix Bug for not showing the date on main page - 7 Sep 2006 -->
          <b:if cond='data:blog.homepageUrl == data:blog.url'>

            <b:include name='hoctro_dateHdr'/>

          </b:if>
        </b:if>
      <!--End of Improved hack from Hackosphere By: Hoctro  -->
      <!--Hack by Hackosphere - 6 Sep 2006 -->
      <b:if cond='data:blog.homepageUrl != data:blog.url'>      
        <b:if cond='data:blog.pageType != "item"'>   
           <!--Improvement Hack by hoctro - 7 Sep 2006 -->       
           <ul><li><a expr:href='data:post.url'> <data:post.title/> </a></li></ul>
           <!--End of Improvement Hack -->     
         <b:else/>          
           <b:include data='post' name='post'/>      
         </b:if>  
      <b:else/>      
        <b:include data='post' name='post'/>  
      </b:if>
      <!--End of Hack by Hackosphere - 6 Sep 2006 -->
      
      <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>


I know it's quite involved for all of us Blogger newbies, but once it works, you'll feel proud that you're hacking the right way, the Blogger (Beta) way.

Cheers,

Hoctro (9/2006)
Blog: http://hoctro.blogspot.com/