Content and Layout Templates in LWR on Node.js

When LWR renders the response for a page request, it uses content and layout templates. You can individually configure the content and layout templates for each route in an application with LWR.

LWR supports the following languages for templating:

• HTML
• Markdown
• Nunjucks

Let's review the files you created in your first static site project.

In lwr.config.json, there are content and layout template files specified with the Home route id. LWR uses the route's templates along with the context to render the response.

Let's first examine the content templates in /src/content. In this example, they're written in Markdown. Each of these files (for example, about.md) contains a heading and the body content for a page on your site. Content templates are fairly self-explanatory, so we don't spend much time discussing them.

Next, in the /src/layouts directory of your project, there's a layout template: main_layout.njk. Layout templates can get fairly complex, but let's start with the simple one that LWR generated for your project.

When you examine the following code sample, you find that the main_layout.njk file is mostly doing things you might encounter elsewhere:

• telling LWR the location of the CSS style sheet for the site
• describing the logo to draw at the top of each page
• setting up the labels and destinations for the top navigation buttons

But when you get all the way down to <main>, there’s something that’s probably new: {{ body | safe }}.

Here body is an LWR context object property that’s available in layout templates. It's essentially a string containing the rendered page content from the route's contentTemplate or rootComponent. Applying the safe filter to body prevents HTML escaping.

And that’s it. Keep reading for more on the resources you can use in your LWR templates.

You can use the following resources in your LWR templates when creating dynamic content.

• Asset references
• Context objects
• Embedded Lightning web components

The following snippets in LWR’s various templating languages provide examples of using each of these resource types. In each example, the code adds an asset reference to a logo file, then embeds the c/info Lightning web component. The HMTL and Nunjucks example also uses the someText context object property.

Unlike the HTML and Nunjucks example above, the following Markdown example doesn't include the someText context object property. Context objects aren't available in Markdown templates unless you use a custom route handler. Route handlers are an advanced topic, so for now know that a route handler is a function that is configured for a route.

You can configure the directory locations of templates, global context data, and static assets in your lwr.config.json file:

• contentDir: The content templates directory. The default is "$rootDir/src/content".
• layoutsDir: The layout templates directory. The default is "$rootDir/src/layouts".
• globalDataDir: The directory of global data for templating. The default is "$rootDir/src/data".
• assets: You can configure one or more files or directories to serve static assets. For each file or directory, include these properties:
  • alias: A name for this path to use in content or layout templates.
  • dir or file: The file system path containing the asset.
  • urlPath: The URI path that serves the asset.

Here's an example:

After you set up an asset reference, you can use the static assets in LWC content or layout templates using either the alias or the urlPath value:

By alias:

By urlPath:

Curious about routing in LWR? Find out more now.