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>