Login

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 xdt: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 the matching element in the master with the child element

  • SetAttributes – copies the child's attributes onto the matching master element (its children and text are preserved)

  • Insert – appends the child's children into the target, preserving existing content (Append is a Docly alias)

  • InsertBefore(selector) / InsertAfter(selector) – inserts the child as a sibling before/after the node matched by selector

  • Remove – removes the matching master element (first match only)

  • RemoveAll – removes every matching master element (often combined with xdt:Locator="Match(attr)")

  • RemoveAttributes(attr1,attr2,…) – removes specific attributes from the target without changing its content

  • Create – adds the child as a new element under the child's parent path in the master (creates, does not match existing nodes)

For id-based targeting, xdt:Locator="Match(attr)", nested masters and the full error-message reference, see: Using master page files.

Execution order

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

  • Runs scripts in the page file

  • Runs scripts in the master file

  • Merges by specified xdt transforms from the page file