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, but 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.

  • Asset references
  • Embedded Lightning web components

    If you want to include Lightning web components in your content or layout templates, the lwr_resources context object is required. See LWR Compile-Time Data for more about lwr_resources.

  • Context objects (HTML and Nunjucks only)

    Context isn't passed into 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.

The following brief snippets in LWR’s various templating languages demonstrate:

  • adding an asset reference to a logo file
  • embedding the c/info Lightning web component
  • using the someText context object property

HTML:

Markdown:

Note that this example doesn't include the someText property, as context objects aren't available in Markdown templates unless you use a custom route handler, as noted previously.

Nunjucks:

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:

  • rootDir: The root directory of the LWR project. The default is the current working directory (.).
  • 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.