Technical Articles
Tutorials
2: phpLD Template Tutorial - Exploring the Default Template
| 2: phpLD Template Tutorial - Exploring the Default Template |
|
|
|
| Wednesday, 14 March 2007 | |
|
In this part of the tutorial we will explain what each of the .tpl files in the default template is responsible for. This will focus on the output of each template file, when these files are displayed and how this relates to the structure of the template. This part of the turtorial will serve as the foundation for the rest and give us a little insight into how phpLD works.
main.tplmain.tpl is the main template file of phpLD, hence the name. It is displayed when you are browsing the index, the latest links, the top hits, the search results and any page within the categories. It is specifically not displayed when submitting a link. The main.tpl file is responsible for setting the varibles for the header of the html page (title and description) and outputting the categories and/or links in a structured manner. It also has include functions for header.tpl, top_bar.tpl, footer.tpl, and may also include links.tpl depending on if the page viewed includes links. The structure of main.tpl is as follows:
The first part of main.tpl that is of concern is setting up the the varibles for the html title, in_page_title and description, which will be used in header.tpl. The code is below and should be left alone, it is not important to the design of the template but we will use these variables later and therefore they should be mentioned. main.tpl {* Calculate title from path *} {capture name="title"} ... {strip} {assign var="in_page_title" value=$category.TITLE} {assign var="description" value=$category.DESCRIPTION} ... main.tpl now calls header.tpl and then top_bar.tpl to be displayed. We will go in to more detail about the output of these files soon. Next main.tpl outputs the dynamic part of the page, where the categories, links or search result will be displayed. The output of this part of the page depends out what page you are browsing. Below is the code for outputting the categories and subcategories. I will show it’s output for now but we will not focus on this part until later when customizing the style of our template. For now pay attention the html in the code below and the output. main.tpl - categories and subcategories ... {* Categories *} <table border="0" cellpadding="0" cellspacing="2"><tr> {foreach from=$categs item=cat name=categs} {if ($smarty.foreach.categs.iteration mod $cats_per_col eq 1 and $cats_per_col gt 1) or $smarty.foreach.categs.first}1<td>3{/if} <h2>4<a href="{if $smarty.const.ENABLE_REWRITE}{$cat.TITLE_URL}/{else}index.php?c={$cat.ID}{/if}">{$cat.TITLE}</a>{if $smarty.const.CATS_COUNT} <span class="count">({$cat.COUNT})</span>{/if}</h2> {* Display subcategories *} <p class="subcats">5 {if $cat.SUBCATS} {foreach from=$cat.SUBCATS item=scat name=scategs} <a href="{if $smarty.const.ENABLE_REWRITE}{$cat.TITLE_URL}/{$scat.TITLE_URL}/{else}index.php?c={$scat.ID}{/if}"> {$scat.TITLE}</a>, {/foreach} ... {/if} </p> {if ($smarty.foreach.categs.iteration mod $cats_per_col eq 0 and $cats_per_col gt 1) or $smarty.foreach.categs.last}6</td>{/if} {/foreach} </tr></table> ...output <table border="0" cellpadding="0" cellspacing="2"> <tr><td> <h2><a href="index.php?c=1">Category 1</a> <span class="count">(3)</span></h2> <p class="subcats"> <a href="index.php?c=7">Sub 1</a>, <a href="index.php?c=8">Sub 2</a>, <a href="index.php?c=9">Sub 3</a>, ...</p> <h2><a href="index.php?c=2">Category 2</a> <span class="count">(3)</span></h2> <p class="subcats"> <a href="index.php?c=10">Sub 4</a>, <a href="index.php?c=11">Sub 5</a>, <a href="index.php?c=12">Sub 6</a>, ...</p> </td><td> <h2><a href="index.php?c=3">Category 3</a> <span class="count">(3)</span></h2> <p class="subcats"> <a href="index.php?c=13">Sub 7</a>, <a href="index.php?c=14">Sub 8</a>, <a href="index.php?c=15">Sub 9</a>, ...</p> <h2><a href="index.php?c=4">Category 4</a> <span class="count">(3)</span></h2> <p class="subcats"> <a href="index.php?c=16">Sub 10</a>, <a href="index.php?c=17">Sub 11</a>, <a href="index.php?c=18">Sub 12</a>, ...</p> </td></tr> </table> Fo the output we get two a table with two columns and the subcategories. Later we will makes this into a table less output using the div tag and lists. The rest of the code on main.tpl is used for to output the featured links, regular links and the sorting. We will dive into the design of this later, for now just know that this is where the links are coming from. There is also a little bit of javascript at the end of main.tpl and as stated in the comment above it this is for tracking link clicks. header.tplThis file is pretty straight forward and is included on all the pages of the frontend of phpLD. It holds the html header and the first part of the html body displaying the in page title as well as the site description. Everything in this file is pretty normal, but we will return to it when cotructing the design of our new template. top_bar.tplThis displays the menu, site path and the search bar. It is documented suffciently and is pretty straight forward in its purpose. We will get a better idea of how to customize during that part of the tutorial. link.tpl and pagerank.tplThe file link.tpl is responsible for how each link is displayed. We will edit this file later to make it display links in a table-less manner. The pagerank.tpl is responsible for the PR as you probably thought and there is no reason to edit this file during our design process, so we won’t. footer.tplThis is the part of template that displays all the links at bottom of the page as well as the total records and sometimes stats of the directory. paypal.tpl and payment.tplThese are responsible for the paypal process and confirmation of the order. We will only pay attention to these files when finishing or design to ensure payment confirmation is consistent with the rest of our design. add_recirpocal.tplThis is responsible for processing a reciprocal link and we will return to this file only when we view our payment file. submit.tplThis is template for submiting links and we will be returning to this file when customizing and adding our submission rules. It inlcudes the header.tpl, top_bar.tpl and footer.tpl files to ensure a consistent design. rss2.tplThis is responsible for the output the directory feed and is not important to the design of the directory so we will not cover this file in this tutorial. The next part of the tutorialTutorial 3: The blank phpLD template Comments (0)
![]() Write comment
You must be logged in to a comment. Please register if you do not have an account yet.
|
| < Prev | Next > |
|---|
| Dir-Resources.com is annoucing it's grand opening as of March. The site is a network/community for the SEO directory community. Don't miss out on this growing resource! |