My Blog: A Bit More Templating

09 December 2016

Expanding upon earlier templating work, I've now spun off most of my page structure to functions. This is how my templates look now.

For the University Package, I have grouped my page templates into three informal categories:

  1. Home - Only used for home pages.
  2. NoTitle - Layouts that do not include an <h1> title from the page.
  3. Standard - Layouts that do include an <h1> title from the page.

These are accessed from just two Page Types:

  1. BaileyWeb.University.Home - Only used for home pages (Home).
  2. BaileyWeb.University.Pages - Everything else (Just NoTitle and Standard for now).

I am planning to create custom Page Types for each of my Page Datafolders, but I'll deal with those that much later on.

My base Page Templates are assigned to the following Page Types:

All of the pages now have the same HTML structure, with the main meta and content blocks (metadata, header, navigation, footer) spun off into separate functions. The content area (main) remains within the actual Page Template, and is formatted into several sub-<div> blocks (id="contents", id="aside", id="sidemenu", id="banners") according to the template design.

Example Template

If we look at the BaileyWeb.University.Standard.Menu.Aside template, we can see how the pages are now constructed:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:rendering="http://www.composite.net/ns/rendering/1.0" xmlns:asp="http://www.composite.net/ns/asp.net/controls">
	<f:function name="Composite.Web.Html.Template.LangAttribute" />
	<head>
		<title>
			<lang:string key="Resource, Resources.Pages.WebsiteName" />:
			<rendering:page.title /></title>
		<rendering:page.metatag.description />
		<f:function name="Composite.Web.Html.Template.CommonMetaTags" />
		<f:function name="BaileyWeb.University.HeadMetadata" />
	</head>
	<body>
		<f:function name="BaileyWeb.University.CommonNavigationBar" />
		<f:function name="BaileyWeb.University.BodyHeader" />
		<f:function name="BaileyWeb.University.BodyNavigation" />
		<div class="wrapper-main container-fluid">
			<div id="main" aria-label="Main Content" role="main" class="row">
				<main>
					<div id="contents" class="col-xs-12 col-sm-12 col-md-6 col-md-push-3">
						<article aria-label="Article" role="article">
							<header>
								<h1 class="page-header">
									<rendering:page.title />
								</h1>
							</header>
							<rendering:placeholder id="content" title="Content" default="true" />
						</article>
					</div>
					<div id="asides" class="col-xs-12 col-sm-6 col-md-3 col-sm-push-6 col-md-push-3">
						<aside aria-label="Aside" role="complementary">
							<header>
								<h1 class="page-header">Aside</h1>
							</header>
							<rendering:placeholder id="aside" title="Aside" default="false" />
						</aside>
					</div>
					<div id="sidemenu" aria-label="Section Navigation" role="navigation" class="col-xs-12 col-sm-6 col-md-3 col-sm-pull-6 col-md-pull-9">
						<f:function name="BaileyWeb.University.BodySideNavigation" />
					</div>
				</main>
			</div>
		</div>
		<f:function name="BaileyWeb.University.BodyFooter" />
	</body>
</html>

Note how the page's <title> tag is being populated from a Localisation Resource, in this case the BaileyWeb.University.Pages.Pages file. I'll discuss that in a later post.

For now, you can see the following links to the functions:

  • <f:function name="BaileyWeb.University.HeadMetadata" />
  • <f:function name="BaileyWeb.University.BodyHeader" />
  • <f:function name="BaileyWeb.University.BodyNavigation" />
  • <f:function name="BaileyWeb.University.BodyFooter" />

You can safely ignore the <f:function name="BaileyWeb.University.CommonNavigationBar" />, as that function adds the black domain navigation strip at the top of all of my pages.

XSLT Function BaileyWeb.University.HeadMetadata

Here you can see the metadata, stylesheet and JavaScript links for all pages. This supplements that provided by the CMS in the <rendering:page.metatag.description /> and <f:function name="Composite.Web.Html.Template.CommonMetaTags" /> functions.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
	<xsl:template match="/">
		<html>
			<head>
				<meta charset="utf-8" />
				<meta http-equiv="X-UA-Compatible" content="IE=edge" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="stylesheet" type="text/css" href="/Frontend/Libraries/jQuery-UI/jquery-ui-1.12.0/jquery-ui.min.css" id="jQuery-CSS" />
				<link rel="stylesheet" type="text/css" href="/Frontend/Libraries/Bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" id="Bootstrap-CSS" />
				<link rel="stylesheet" type="text/css" href="/Frontend/Styles/University/university.css" id="University-CSS" />
				<link rel="stylesheet" type="text/css" href="/Frontend/Styles/ie10-viewport-bugfix.css" id="ie10-Viewport-Bugfix-CSS" />
				<script type="text/javascript" src="/Frontend/Libraries/jQuery/jquery-3.1.0.min.js" id="jQuery"></script>
				<script type="text/javascript" src="/Frontend/Libraries/jQuery-UI/jquery-ui-1.12.0/jquery-ui.min.js" id="jQuery-UI"></script>
				<script type="text/javascript" src="/Frontend/Libraries/pagePiling/jquery.pagepiling.min.js" id="pagePiling"></script>
				<script type="text/javascript" src="/Frontend/Libraries/Bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js" id="Bootstrap"></script>
				<script type="text/javascript" src="/Frontend/Scripts/University/university.js" id="University"></script>
			</head>
			<body />
		</html>
	</xsl:template>
</xsl:stylesheet>

XSLT Function BaileyWeb.University.BodyHeader

Providing all of the visible header links, including the logo, website name <h1>, tagline <h2>, and eventually the search engine is this function:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
	<xsl:template match="/">
		<html>
			<head />
			<body>
				<f:function xmlns:f="http://www.composite.net/ns/function/1.0" name="BaileyWeb.University.TextStrings" />
				<div class="wrapper-header container-fluid">
					<div id="header" aria-label="Masthead Banner" role="banner" class="row">
						<div class="col-sm-12">
							<header>
								<a href="http://uni.baileyweb.online/" class="logo">
									<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120px" height="120px" viewBox="50 50 750 750">
										<desc>
											<lang:string key="Resource, Resources.Pages.WebsiteName" />
										</desc>
										<switch>
											<g>
												<path fill="#660066" fill-rule="nonzero" clip-rule="evenodd" d="M450.3,798.621c-0.3-16.286-0.3-32.956-0.364-49.646 C587.956,741.446,689.702,643.75,732,533c24.404-63.898,21.245-162.97-3-224c-37.139-93.487-108.747-163.846-208-195 c-24.853-7.801-53.507-11.826-82.682-13.13c-69.128-3.091-113.304,15.427-143.298,27.082C179.764,172.734,57.672,329.087,112,514 c35.565,121.051,140.983,225.98,288,235c0,16.665,0,33.335,0,50c-49.488-3.239-84.957-15.043-121.458-28.128 C144.953,722.982-6.437,524.861,70.748,301.974C110.107,188.316,195.207,103.464,314,66c27.569-8.694,59.677-13.594,92.008-15.406 C489.506,45.913,533.793,65.607,566,78c133.043,51.193,272.939,218.034,224.117,432.691 C758.149,651.243,630.998,788.61,450.3,798.621z" />
												<g>
													<path fill="#660066" fill-rule="nonzero" clip-rule="evenodd" d="M476,200c7.999-8.333,16.001-16.667,24-25c-24.998,0-50.002,0-75,0 c0,16.665,0,33.335,0,50c24.998,0,50.002,0,75,0C492.001,216.667,483.999,208.333,476,200z" />
													<path fill="#660066" fill-rule="nonzero" clip-rule="evenodd" d="M550,558c0-102.656,0-205.344,0-308c-16.665,0-33.335,0-50,0 c0,16.665,0,33.335,0,50c-16.665,0-33.335,0-50,0c0-16.665,0-33.335,0-50c-16.665,0-33.335,0-50,0c0,16.665,0,33.335,0,50 c-16.665,0-33.335,0-50,0c0-16.665,0-33.335,0-50c-16.665,0-33.335,0-50,0c0,102.656,0,205.344,0,308 c-36.189,1.687-67.433,13.178-100,18c0,17.998,0,36.002-0.513,53.988C290.196,595.392,507.541,582.448,649,630 c0.333,0,0.667,0,1,0c0-17.998,0-36.002,0-54C617.96,570.364,585.822,558.642,550,558z M500,553c-16.665-1-33.335-2-50-3 c0-24.998,0-50.002,0-75c-16.665,0-33.335,0-50,0c0,24.998,0,50.002,0,75c-16.332,1-32.668,2-49,3c-0.333,0-0.667,0-1,0 c0-67.66,0-135.34,0-203c49.995,0,100.005,0,150,0C500,417.66,500,485.34,500,553z" />
												</g>
											</g>
											<foreignObject width="120" height="120" requiredExtensions="http://www.w3.org/1999/xhtml">
												<img src="/Frontend/Images/University/bailey-university-logo.png" class="hidden" width="120" height="120">
													<xsl:attribute name="alt"><lang:string key="Resource, Resources.Pages.WebsiteName" /></xsl:attribute>
												</img>
											</foreignObject>
										</switch>
									</svg>
								</a>
								<h1 class="page-header">
									<a href="http://uni.baileyweb.online/"><lang:string key="Resource, Resources.Pages.WebsiteName" /></a>
								</h1>
								<h2 class="page-strapline">
									<a href="http://uni.baileyweb.online/"><lang:string key="Resource, Resources.Pages.WebsiteTagline" /></a>
								</h2>
							</header>
						</div>
						<!-- TODO: Search engine will go here -->
					</div>
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

I'm using a Scalable Vector Graphic (SVG) for my logo to support Hi-DPI screens, with a fall-back PNG logo file. If you're trying this in earlier versions of Composite C1, be aware that there was an issue with SEO Validation prior to v5.0.

Once again note that I am using Localisation Resources to populate the website name and tagline strings.

XSLT Function BaileyWeb.University.BodyNavigation

Website navigation is provided by this function. It'll eventually utilise drop-down menus, but for now it links off to a customised version of Orckestra's Composite.Navigation.Distributed.XSLT function via an intermediary function.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
	<xsl:template match="/">
		<html>
			<head/>
			<body>
				<div class="wrapper-navigation container-fluid">
					<div id="navigation" aria-label="Main Navigation" role="navigation" class="row">
						<div class="col-sm-12">
							<nav>
								<f:function xmlns:f="http://www.composite.net/ns/function/1.0" name="BaileyWeb.University.MainNavigation.ShowMainNavigationList" />
							</nav>
						</div>
					</div>
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

XSLT Function BaileyWeb.University.BodyFooter

Lastly, here is the function the produces the footer:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
	<xsl:template match="/">
		<html>
			<head />
			<body>
				<div class="wrapper-footer container-fluid">
					<div id="footer" aria-label="Page Footer" role="contentinfo" class="row">
						<div class="col-sm-12">
							<footer>
								<p>My footer with copyrights, etc.</p>
								<f:function name="BaileyWeb.University.Pages.ShowLastUpdated" xmlns:f="http://www.composite.net/ns/function/1.0" />
							</footer>
						</div>
					</div>
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

It's probable that these aren't the final form of these functions, so please refer to the documentation for up-to-date versions.


comments powered by Disqus