LWR Content & Layout Templates

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:

Templates in Your StaticSite Project

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, located 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. Because content templates are fairly self-explanatory, we won’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 may have encountered 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. We don’t need to get into the details of body right now. It’s essentially a string containing the rendered page content that’s output 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.

Template Resources

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

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.

Configure Template and Asset References

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 serving the asset.

Here's an example:

After you set up the asset reference, you can use the static assets in LWC templates:

Next Steps

Curious about routing in LWR? Find out more now.