- RedDot CMS Blog
- 07.02.2020
- EN
rdb: The One True Container – RedDot CMS Tutorial – Part III
The Return of the King – Include Container
What is the solution? Taking the process that led us from “copy and paste” to “header and footer” to its logical conclusion – “one include container” to contain all common code. How do we do that? One step at a time. If you are starting out on a new project, this should save you a lot of pain in the future. But where it shines is how easily it can be added to an existing project – without interfering with the existing structure and therefore allowing you to refactor the above pain spots on your terms, as and when you need or want to.
Step 1: Add your “include container” to each base template.
Create a container placeholder at the very end of each template, after the closing HTML tag. I call mine “con_include” as I liken it to the concept of using include files. I’ve previously used “con_library” and “con_prexecute” because it will all be pre-executed. The name is unimportant – choose something that has meaning to you. Surround the container with RedDot Pre-executing script block tags. A container with nothing in it won’t render as anything – so far, perfectly safe.
Handy Hint
We place our ¨con_include¨ placeholder at the end of the template because we plan to move the DOCTYPE declaration into this common code and we don´t want to risk spaces or new lines appearing before it in the final output (as it may then not be recognised). We can use ASP functions, subroutines and classes that are defined later in the file.
Step 2: Create content classes to be included, and create and connect instances to the ¨con_include¨ placeholder.
You could do this with one single content class, but I find it easier break them up into logical groupings – again, think include files.
A ¨Utility¨ content class to hold general functions used across the site:
<%
Public Function IIf(bCond, vTrue, vFalse)
If bCond Then
IIf = vTrue
Else
IIf = vFalse
End If
End Function
Public Function IsString(v)
IsString = IIf(VarType(v) = vbString, True, False)
End Function
%>
<script language="jscript" runat="server">
function GetVar(sId) {
var re = //*(.*)*//m;
return re.exec(eval(sId + ".toString()"))[1];
}
function GetTime() {
var d = new Date();
return d.getTime()
}
</script>
A ¨Page¨ content class defining a Page class to hold the contents of placeholders that are to be used in the shared output but differ from page to page:
<% Class cPage Private m_hdl_headline Private m_inf_pageUrl Private m_stf_summary Private m_stf_meta_description Private m_stf_meta_keywords Public Property Get hdl_headline hdl_headline = m_hdl_headline End Property Public Property Let hdl_headline(str) m_hdl_headline = str End Property Public Property Get inf_pageUrl inf_pageUrl = m_inf_pageUrl End Property Public Property Let inf_pageUrl(str) m_inf_pageUrl = str End Property Public Property Get stf_summary stf_summary = m_stf_summary End Property Public Property Let stf_summary(str) m_stf_summary = str End Property Public Property Get stf_meta_description stf_meta_description = m_stf_meta_description End Property Public Property Let stf_meta_description(str) m_stf_meta_description = str End Property Public Property Get stf_meta_keywords stf_meta_keywords = m_stf_meta_keywords End Property Public Property Let stf_meta_keywords(str) m_stf_meta_keywords = str End Property End Class %>
Handy Hint
I use ASP classes as a way to package variables, functions and subroutines to avoid polluting the global namespace and the associated issues this may lead to.
A ¨HTML¨ content class defining an HTML class to hold subroutines that will output the shared HTML:
<%
Class cHTML
Public Sub header(oPage)
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title><%= oPage.hdl_headline %> | Unofficial RedDot CMS blog</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="robots" content="index, nofollow, noodp">
<meta http-equiv="expires" content="43200">
<meta name="audience" content="all">
<meta name="language" content="en">
<meta http-equiv="content-language" content="en">
<!-- all in one seo pack 1.4.7.4 [245,327] -->
<meta name="description" content="<%= oPage.stf_meta_description %>">
<meta name="keywords" content="<%= oPage.stf_meta_keywords %>">
<!-- /all in one seo pack -->
<link rel="stylesheet" href="<%anc_css_style2%>" type="text/css" media="screen, projection">
<!--[if lt IE 7]>
<link rel="stylesheet" href="<%anc_css_ie%>" type="text/css" media="screen, projection">
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="Unofficial RedDot CMS blog RSS Feed" href="<%anc_xml_rss%>">
<link rel="alternate" type="application/atom+xml" title="Unofficial RedDot CMS blog Atom Feed" href="<%anc_xml_atom%>">
<link rel="pingback" href="<%anc_pingback%>">
<link rel="shortcut icon" href="<%img_favicon%>">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%anc_xml_rsd%>">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<%anc_xml_wlwmanifest%>">
<!-- Added By Democracy Plugin. Version 2.0.1 -->
<script type="text/javascript" src="<%anc_js_democracy%>"></script>
<link rel="stylesheet" href="<%anc_css_basic%>" type="text/css">
<link rel="stylesheet" href="<%anc_css_style1%>" type="text/css">
<link href="<%anc_css_syntax_highlighter%>" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="<%anc_css_sociable%>">
<!-- Protected by WP-SpamFree v2.0.0.1 :: JS BEGIN -->
<script type="text/javascript" src="<%anc_js_wp_spamfree%>"></script>
<!-- Protected by WP-SpamFree v2.0.0.1 :: JS END -->
</head>
<bo<% ' %>dy> <!--start body-->
<div class="container"> <!--start container-->
<div id="header" class="column span-14">
<div id="logo" class="column first">
<div class="title">
<div><a href="<%anc_home%>">Unofficial RedDot CMS blog</a></div>
<div class="desc">RedDot hints from developers, freelancers and fellow customers</div>
</div>
<!--<a href="<%anc_home%>" title="RedDot hints from developers, freelancers and fellow customers: Home" class="sitelogo"></a>-->
</div>
<div id="search_menu" class="column span-6 border_left last push-0">
<div id="search" class="column first">
<h3 class="mast4">Search</h3>
<div id="search-form">
<form method="get" id="searchform" action="<%anc_search%>">
<div><label for="s" class="none">Search for:</label>
<input name="s" id="s" class="search_input" value="" type="text">
<label for="searchsubmit" class="none">Go</label>
<input id="searchsubmit" class="submit_input" value="Search" type="submit"></div>
</form>
</div>
</div>
<ul id="menu">
<li><span class="home"><a href="<%anc_home%>">Home</a></span></li>
<!-- <li><span class="about"><a href="<%anc_about%>">About</a></span></li> -->
<li><span class="archives"><a href="<%anc_archives%>">Archives</a></span></li>
<li><span class="subscribe"><a href="<%anc_subscribe%>">Subscribe</a></span></li>
<!-- <li><span class="contact"><a href="<%anc_contact%>">Contact</a></span></li> -->
</ul>
</div>
</div> <!--end header-->
<div id="topbanner_single" class="column span-14"> <!-- start top banner -->
<div class="pagetitle">
// you’re reading...
</div>
</div> <!-- end top banner -->
<%
End Sub
Public Sub footer
%>
<div id="comment-form">
<h2 id="respond" class="post_comm2">Post a comment</h2>
<form action="<%anc_comments%>" method="post" id="commentform">
<fieldset>
<p>
<label for="author" class="com">Name *</label>
<input class="comtext" name="author" id="author" value="" size="22" tabindex="1" type="text">
</p>
<p>
<label for="email" class="com">E-mail *</label>
<input class="comtext" name="email" id="email" value="" size="22" tabindex="2" type="text">
</p>
<p>
<label for="url" class="com">Web site</label>
<input class="comtext" name="url" id="url" value="" size="22" tabindex="3" type="text">
</p>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </small></p>-->
<p>
<label for="comment" class="com">Comment</label>
<textarea class="comtext" name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea>
</p>
</fieldset>
<fieldset>
<p>
<input name="submit" id="submit" tabindex="5" class="comsubmit" value="Submit Comment" type="submit">
<input name="comment_post_ID" value="74" type="hidden">
</p>
<noscript><p><strong>Currently you have JavaScript disabled. In order
to post comments, please make sure JavaScript and Cookies are enabled,
and reload the page.</strong> <a
href="http://www.google.com/support/bin/answer.py?answer=23852"
rel="nofollow external" >Click here for instructions</a> on how to
enable JavaScript in your browser.</p></noscript>
</fieldset>
</form>
</div>
</div> <!-- end comments -->
</div>
<div class="column span-3 last">
<div id="side_categories">
<h3 class="mast">Categories</h3>
<ul class="cat">
<%con_categories%>
</ul>
</div>
<div id="side_recent_comments">
<h3 class="mast">Recent Comments</h3>
<ul class="reccom">
<!IoRangeList><li><%inf_originalAuthorFullName%> on <a href="<%lst_recentComments%>" title="View all comments for <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeList>
</ul>
</div>
</div>
</div> <!-- start home_content -->
<div id="footer" class="column span-14">
<div class="column span-7 first">
© 2009 Unofficial RedDot CMS blog. <a href="<%anc_subscribe%>"><img src="<%img_subscribe%>" alt="Entries (RSS)" style="margin: 2px 0pt 0pt 7px; vertical-align: top;"></a>
</div>
<div class="column span-7 last">
<div class="push-0">
<a href="http://wordpress.org/" title="Powered by WordPress"><img src="<%img_wordPress%>" alt="Powered by WordPress"></a>
<a href="http://code.google.com/p/the-morning-after/" title="Design: The Masterplan"><img src="<%img_masterplan%>" alt="Theme by The Masterplan"></a>
</div>
</div>
</div>
</div> <!--end container-->
<!-- WordPress theme by Arun Kale / www.themasterplan.in | Download it at http://code.google.com/p/the-morning-after/ -->
<!-- Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="<%anc_js_googleAnalytics%>" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5132063-1");
</script>
<script type="text/javascript">
pageTracker._trackPageview();
</script>
<!-- End of Google Analytics code -->
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCore%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSharp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterPhp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterJScript%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterVB%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterSQL%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterXML%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSS%>"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<%swf_clipboard%>';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- Piwik code inserted by Piwik Analytics Wordpress plugin by Jules Stuifbergen http://blog.jongbelegen/piwik -->
<script language="javascript" src="<%anc_js_piwik%>" type="text/javascript"></script>
<script type="text/javascript">
<!--
piwik_action_name = document.title;
piwik_idsite = 1;
piwik_url = '<%anc_piwik%>';
piwik_log(piwik_action_name, piwik_idsite, piwik_url);
//-->
</script><img src="<%img_piwik%>" alt="Piwik" style="border: 0pt none ;">
<object>
<noscript><p>Web analytics <img src="<%anc_piwik%>?idsite=1" style="border:0" alt="piwik"/></p>
</noscript></object>
<!-- /Piwik -->
<!--end body-->
</bo<% ' %>dy></html>
<%
End Sub
Public Sub tags
%><img src="<%img_tags%>" class="posttag" alt="Print This Post" title="Print This Post" style="border: 0px none ;">Tags: <%
End Sub
Public Sub sociable(oPage)
%>
<div class="sociable">
<div class="sociable_tagline">
<h5>Share and Enjoy:</h5>
</div>
<ul>
<li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="<%img_printer%>" onclick="" title="Print this article!" alt="Print this article!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="mailto:?subject=<%= oPage.hdl_headline %>&body=<%= oPage.inf_pageUrl %>" title="E-mail this story to a friend!"><img src="<%img_emailLink%>" onclick="" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://digg.com/submit?phase=2&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Digg"><img src="<%img_digg%>" title="Digg" alt="Digg" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://reddit.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Reddit"><img src="<%img_reddit%>" title="Reddit" alt="Reddit" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.stumbleupon.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="StumbleUpon"><img src="<%img_stumbleupon%>" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Google"><img src="<%img_googleBookmark%>" title="Google" alt="Google" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://del.icio.us/post?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="del.icio.us"><img src="<%img_delicious%>" title="del.icio.us" alt="del.icio.us" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mister-wong.com/addurl/?bm_url=<%= oPage.inf_pageUrl %>&bm_description=<%= oPage.hdl_headline %>&plugin=soc" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mister-wong.com/addurl/?bm_url=<%= oPage.inf_pageUrl %>&bm_description=<%= oPage.hdl_headline %>&plugin=soc');" title="MisterWong"><img src="<%img_misterWong%>" title="MisterWong" alt="MisterWong" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.facebook.com/share.php?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>');" title="Facebook"><img src="<%img_facebook%>" title="Facebook" alt="Facebook" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mixx.com/submit?page_url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Mixx"><img src="<%img_mixx%>" title="Mixx" alt="Mixx" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.furl.net/storeIt.jsp?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>');" title="Furl"><img src="<%img_furl%>" title="Furl" alt="Furl" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= oPage.stf_summary %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.linkedin.com/shareArticle?mini=true&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= oPage.stf_summary %>');" title="LinkedIn"><img src="<%img_linkedIn%>" title="LinkedIn" alt="LinkedIn" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Live"><img src="<%img_live%>" title="Live" alt="Live" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ma.gnolia.com/bookmarklet/add?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Ma.gnolia"><img src="<%img_magnolia%>" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=<%= oPage.inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://twitter.com/home?status=<%= oPage.inf_pageUrl %>');" title="TwitThis"><img src="<%img_twitter%>" title="TwitThis" alt="TwitThis" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<%= oPage.inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://technorati.com/faves?add=<%= oPage.inf_pageUrl %>');" title="Technorati"><img src="<%img_technorati%>" title="Technorati" alt="Technorati" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&save?u=<%= oPage.inf_pageUrl %>&h=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.newsvine.com/_tools/seed&save?u=<%= oPage.inf_pageUrl %>&h=<%= oPage.hdl_headline %>');" title="NewsVine"><img src="<%img_newsVine%>" title="NewsVine" alt="NewsVine" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.tumblr.com/share?v=3&u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>&s=" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.tumblr.com/share?v=3&u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>&s=');" title="Tumblr"><img src="<%img_tumblr%>" title="Tumblr" alt="Tumblr" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=<%= oPage.inf_pageUrl %>&submitHeadline=<%= oPage.hdl_headline %>&submitSummary=<%= oPage.stf_summary %>&submitCategory=science&submitAssetType=text" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://buzz.yahoo.com/submit/?submitUrl=<%= oPage.inf_pageUrl %>&submitHeadline=<%= oPage.hdl_headline %>&submitSummary=<%= oPage.stf_summary %>&submitCategory=science&submitAssetType=text');" title="Yahoo! Buzz"><img src="<%img_yahooBuzz%>" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://yigg.de/neu?exturl=<%= oPage.inf_pageUrl %>&exttitle=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yigg.de/neu?exturl=<%= oPage.inf_pageUrl %>&exttitle=<%= oPage.hdl_headline %>');" title="Yigg"><img src="<%img_yigg%>" title="Yigg" alt="Yigg" class="sociable-hovers"></a></li>
</ul>
</div>
<%
End Sub
End Class
%>
Handy Hint
RedDot treats the ¨body¨ HTML tag in a ¨special¨ way that will cause you no end of grief when used in a container page. Make sure you hide it (and its closing tag) from RedDot using the above technique (inserting an ASP comment in the middle – ie <bo<% ‘ %>dy> and </bo<% ‘ %>dy>) or another similiar technique.
A ¨RedDot¨ content class defining a RedDot class which acts a single point of initialisation and cleanup:
<% Class cRedDot Private m_iStart ' start time in milliseconds Public Property Get iElapsedTime ' time elapsed from start in milliseconds iElapsedTime = GetTime() - m_iStart End Property Private Sub Class_Initialize m_iStart = GetTime() Set oHTML = New cHTML Set oPage = New cPage End Sub Private Sub Class_Terminate Set oPage = Nothing Set oHTML = Nothing End Sub End Class Dim oHTML, oPage %>
Handy Hint
Keeping track of the elapsed time of the execution of our scripts for the entire page is good peace of mind when it comes to hunting down performance issues.
Step 3: Add your ¨con_include¨ container to the clipboard and ¨Reference Link for All Content Classes¨ for all base templates.
None of the above changes should have had any effect yet on your existing templates – we have simply added common code, but without actually executing any of it.
Step 4: Update our base template.
We can now update our base template to make use of our new functionality, and remove the duplicated HTML and those extra unnecessary placeholders:
<!IoRangePreExecute><% Set oRedDot = New cRedDot ' performs all initialisation oPage.hdl_headline = "<%hdl_headline%>" oPage.inf_pageUrl = "<%inf_pageUrl%>" oPage.stf_summary = "<%stf_summary%>" oPage.stf_meta_description = "<%stf_meta_description%>" oPage.stf_meta_keywords = "<%stf_meta_keywords%>" oHTML.header oPage %><!/IoRangePreExecute> <div id="post_content" class="column span-14"> <!-- start home_content --> <div class="column span-11 first"> <h2 class="post_cat"><%stf_category%></h2> <h2 class="post_name" id="post-<%inf_pageId%>"><%hdl_headline%></h2> <div class="post_meta"> By <a href="<%anc_author%>" title="Posts by <%inf_originalAuthorFullName%>"><%inf_originalAuthorFullName%></a> <span class="dot">⋅</span> March 11, 2009<%inf_pageReleaseDate%> <span class="dot">⋅</span> <a href="#comments">Post a comment</a> </div> <%txt_content%> <!IoRangePreExecute><% oHTML.sociable oPage %><!/IoRangePreExecute> <h5>Related posts:</h5><ol><!IoRangeDynLink><li><a href="<%anc_related%>r" rel="bookmark" title="Permanent Link: <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeDynLink></ol> <h2 class="post_comm2">About the author:</h2> <div id="authorinfo"> <!IoRangeConditional><img src="<%img_author%>" alt="<%inf_originalAuthorFullName%>" title="<%inf_originalAuthorFullName%>"><!/IoRangeConditional> <%txt_aboutAuthor%> </div> <div class="post_meta"> <!IoRangePreExecute><% oHTML.tags %><!/IoRangePreExecute><!IoRangeDynLink><a href="<%anc_tag%>" rel="tag"><%hdl_headline%></a>, <!/IoRangeDynLink></div> <div id="comments"> <!-- start comments --> <div id="commenthead"> <h2 class="post_comm">Discussion</h2> <h3 class="mast5">? comments for “<%hdl_headline%>”</h3> </div> <!-- You can start editing here. --> <ol id="commentlist"> <%con_comments%> </ol> <!IoRangePreExecute><% oHTML.footer %><!-- <%= oRedDot.iElapsedTime %>ms --><% Set oRedDot = Nothing ' performs all cleanup %><%con_include%><!/IoRangePreExecute>
Our SmartTree now looks like this:
SmartTree
Epilogue
So, what do we have at the end of our journey?
- A simplified SmartTree – we now only have one placeholder representing everything shared between base templates. The rest are specific to the page (as they should be).
- A simplified template – we have eliminated most if not all of the HTML repetition from the template.
- A single place to add shared content and functions – we should no longer need to use the ¨Reference Link/Page for All Content Classes¨ plugin, and therefore can breath a bit easier as our instances head over the 2000 mark.
Are we done? For this article, yes. But here are some things to think about for the future (feel free to add more!):
- Reducing the number of anchor placeholders by using dynamic anchors or lists for CSS and Javascript.
- Performance optimisations – specifically bringing the CSS and Javascript inline for SmartEdit and collapsing into single files for Publish.
- Red dots! And for more fun – red dots in shared content!
- Escaping of placeholders for use in shared content, especially text fields.
- Handling of categories, tags, authors and social links.
Which methods of base page template construction have you seen and/or used? Do you have any hints or tips regarding base page template construction or even a completely different method that you want to share?
Catchya,
Adrian