FB0D5BBC12C84DABAADB72951A4FA113
  • 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: &lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;blockquote cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </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


       

Downloads

 

QuickLinks

 

Channel