The template contains the definition of the mobile page layout.

A. What is a Template?

A template is a part of the compiled adaptive.js transformation file. In the template, you define the layout of your mobile page. You build the layout for the page from the content that you selected or transformed in the view that corresponds to this particular template.

Each page has template files located in the app/pages/pageName folder of your project directory.

a. Dust.js

Our templates are written in Dust.js, which is a templating engine that LinkedIn maintains.

Dust.js Read the official Dust.js documentation at .

Dust.js Syntax See our Dust.js Cheat Sheet for help with syntax.

b. Base Template

In most template files, the first line references the base template is:


This loads the app/global/base.dust file, which is the master template file for the mobile experience. The master template includes the skeleton HTML for each page.

c. Blocks

In the app/global/base.dust file, there are several templating blocks. These templating blocks look something like this:


Blocks allow you to define default content in the base template. Then you have the ability to override the blocks in the child template.

Read more about blocks in our Dust.js Cheat Sheet.

i. Content Block

The content block is the main content area between the header and footer. You override this block in the child template in almost all cases.

For example, in the app/pages/home/template.dust file, the overridden block looks like this:


Read more about overriding blocks in our Dust.js Cheat Sheet.

ii. UI Scripts Block

The code in the UI Scripts block calls the the user interface (UI) JavaScript for this template. The content is auto-generated and appears here for your reference.


Read more about UI JavaScript in our Use the Existing Desktop JavaScript and in the Dust.js Cheat Sheet.

d. Partials

To reuse pieces of HTML, you create partial template files that are included on different templates.

Find partials in the app/global/includes folder.

Read more about partials in our Dust.js Cheat Sheet.

i. Header

In the app/global/base.dust base template, there is an include for the header partial:


This loads the app/global/includes/header/template.dust template, which includes the global header for your mobile site.

There is also an include for the footer partial in the app/global/base.dust base template:


Now you are able to read Dust.js templates!

Edit in GitHub