Master directive(file) Last updated: 23. Apr 2026
This is used for specifying a master file to use as template for the page. The child page uses xdt:Transform attributes on elements to merge content into the master — replacing, inserting, setting attributes on, removing, or creating elements.
Supported actions (case-insensitive): Replace, Insert (alias Append), InsertBefore(selector), InsertAfter(selector), SetAttributes, Remove, RemoveAll, RemoveAttributes(attr1,attr2,…), and Create. A child node is located in the master by xdt:Locator="Match(attr)" if present, otherwise by the node's id attribute, otherwise by tag-path hierarchy from <html> downwards. A master file may itself include a <!--#master--> directive, enabling multi-level inheritance. Unknown or malformed directives produce visible error messages in the output.
Since a master page is typically shared across pages in different sub-folders, all references to assets (CSS, JS, images, etc.) should use absolute paths starting with "/". For example: "/css/style.css" or "/js/app.js". Docly will automatically resolve these paths to the correct URL based on the published folder structure, ensuring that the assets load correctly regardless of which sub-folder the page resides in.
Parameters
| Name | Type | Description |
|---|---|---|
| file | string | Absolute file path (from the site root) to the specified file to use as master page. |
Returns
Merges the page into the specified master page template.
Example
Code example (#JS)
#JS is mixed HTML (or other text file) with inline JavaScript with # starting and ending each inline statement.<!--#master file="/master.hash"-->
<html>
<head>
<title xdt:Transform="Replace">My Page Title</title>
<link href="/css/custom.css" rel="stylesheet" xdt:Transform="Insert" />
<script src="/js/page.js" xdt:Transform="Insert"></script>
</head>
<body>
<div id="page-content" xdt:Transform="Replace">
<h1>Welcome</h1>
<p>This is my page content.</p>
</div>
</body>
</html> Output
The #JS code above produces the output shown below:<html lang="no">
<head>
<title>My Page Title</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
<script src="/js/page.js"></script>
</head>
<body>
<header>
<!-- Navigation from master.hash -->
</header>
<div id="page-content">
<h1>Welcome</h1>
<p>This is my page content.</p>
</div>
<footer>
<!-- Footer from master.hash -->
</footer>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>