My Blog: Beyond Basic Templates

08 October 2016

Building some page templates and configuring the CMS's Visual Editor.

Now that the CMS is up and running on the computer, it's time to go beyond the basic templates that we used initially.

I want my page templates to include a few libraries that will allow me to build interesting websites, so off we go to Bootstrap, JQuery, JQuery UI and pagePiling.js. Once downloaded, I added them to the ~/Frontend folder within a /Libraries/ sub-folder:

Functions

Next, it's off to the "Functions" perspective of the CMS console. I'm going to create three XSLT functions, one for page metadata, one for the header, and one for the footer.

  • BaileyWeb.University.HeaderMetadata
  • BaileyWeb.University.BodyHeader
  • BaileyWeb.University.BodyFooter

It's useful to note that Orckestra suggests adding the headers and footers under the "Template" perspective as "Page Template Features", but this results in them being cashed and unable to display any dynamic content. This is why I use functions instead.

In the BaileyWeb.University.HeaderMetadata function, I could add all my links to the libraries and CSS files:

<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" />
				<link rel="stylesheet" type="text/css" href="/Frontend/Libraries/Bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.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">
$(document).ready(function() {
    // Code here!
});
				</script>
			</head>
			<body></body>
		</html>
	</xsl:template>
</xsl:stylesheet>

Note the ID attributes on the JavaScript links. Those will come in to play when I start to build other functions that also use the same JavaScript libraries.

For the BaileyWeb.University.BodyHeader file, I initially went with:

<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></head>
			<body>
				<h1 class="page-header">Bailey University</h1>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

For the BaileyWeb.University.BodyFooter file, a link to the ~/Composite login page was all I needed:

<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></head>
			<body>
				<p>
					<a href="~/Composite">Login</a>
				</p>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

Templates

With the functions built, we can create our homepage template:

<!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>Bailey University</title>
		<f:function name="Composite.Web.Html.Template.CommonMetaTags" />
		<rendering:page.metatag.description />
		<f:function name="BaileyWeb.University.HeaderMetadata" />
	</head>
	<body>
		<div class="container-fluid">
			<f:function name="BaileyWeb.University.BodyHeader" />
			<main>
				<div id="main" class="row">
					<div class="col-sm-3 col-md-2 sidebar">
						<aside>
							<h1>Contents:</h1>
						</aside>
					</div>
					<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
						<article>
							<header>
								<h1 class="page-header">
									<rendering:page.title />
								</h1>
								<h2>
									<rendering:page.description />
								</h2>
							</header>
							<rendering:placeholder id="content" title="Content" default="true" />
						</article>
					</div>
				</div>
			</main>
			<f:function name="BaileyWeb.University.BodyFooter" />
		</div>
	</body>
</html>

Customising the Visual Editor

With the front-end of the website now playing nice with Bootstrap, we need the back end to reflect reality. This means adding the style-sheets to the Visual Editor inside the CMS, so we open ~/Frontend/Config/VisualEditor/common.xml for editing:

<?xml version="1.0" encoding="UTF-8"?>
<visualeditor>

  <!-- stylesheets to import (tip: you can also use @import inside the CSS) -->
  <styles>
    <style file="Styles/core.css" />
    <style file="../../Libraries/Bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <style file="../../Styles/visualeditor.common.css" />
  </styles>

[...]

</visualeditor>

With Bootstrap added, it's unlikely that you need the <style file="../../Styles/visualeditor.common.css" /> line, so you can remove this if you want to.

There are two further customisations I'm going to make to this file, but I'll save those for another post.


comments powered by Disqus