Setting up and using a Master Page

Master pages are used with docly's "master file" directive. Please refer to new updated code examples.

Create a master page (master.hash)

<!DOCTYPE html>
<html lang="no">
<head>
	<title>Example master page</title>
	<meta charset="UTF-8" />
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<link rel="stylesheet" href="/Mysite.css" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<style>
	    /* Placeholder to override styles on sub pages  */
	</style>
</head>
<body>
	<header>
		<div class="container">
			<a href="/"><img src="/iamges/logo.svg" alt="Logo" style="max-height: 80px"/></a>
			<form class="pull-right" style="width:12em;padding-top:3em">
				<div class="input-group">
					<input class="form-control" placeholder="Search site" id="SearchBox" />
					<span class="input-group-btn">
                        <button class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
				</div>
			</form>
		</div>
	</header>
	<div id="Stripe"></div>
	<nav></nav>
    <article></article>
	<footer>
		<div class="container">
		    <p>Address info demo demo demo</p>
		    <p>Demo demo demo demo</p>
        </div>
	</footer>
</body>
</html>

Using the master page from a sub page

<!--#master file="master.hash"-->
<!DOCTYPE html>
<html>
<head>
	<title xdr:Transform="Replace">Sub page example</title>
</head>
<body>
	<div id="Stripe" xdt:Transform="Replace">
	    This will replace the stripe from the master page.
	</div>
	<nav xdt:Transform="Replace"> <!-- This replaces the NAV in the master apge and includes another file -->
	    <!--#include file="nav.hash"-->
	</nav>
	<article xdt:Transform="Replace">
	    <!-- Here we replace the article tag and loads some data dynamically -->
	    <div class="container">
    		<div class="row" data-loop="getfolders(request.filepath)" data="#">
    			<div class="col-sm-3">
    				<a class="well block" href="/#replace(request.filepath,' ','-')#/#replace(this,' ','-')#" style="height:9em">
    					<h3>#replace(this,"-"," ")#</h3>
    				</a>
    			</div>
    		</div>
		</div>
	</article>
</body>
</html>

xdt:Transform modes:

Replace - replaces an element
SetAttributes - sets new attributes to element
Insert - inserts an element below current parent element (based on path)
Remove - removes specified tag

Execution order

Master directive transforms will be executed after all HASH Javascript has been executed in first the page file and then the master file.

Runs script in "page file"
Runs scripts in "master file"
Merge by specified xdt transforms in "page file"