Injecting Dynamic Content into a Layout
This guide will help you inject dynamic content from a page into a layout using the content_for and yield tags. This is often used when setting metadata for a particular page (i.e. title tag contents), loading per-page javascript, or per-page stylesheet.
Requirements
To follow the steps in this tutorial, you should have created a page and a layout.
Steps
Injecting dynamic content into a layout is a two-step process:
Step 1: Use yield in layout
Add the yield tag to the previously created application.liquid layout file, e.g. switch the layout title to dynamic content with the yield tag:
app/views/layouts/application.liquid
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% yield 'meta_title' %}</title>
</head>
<body>
<h1>Layout</h1>
{{ content_for_layout }}
</body>
</html>
Step 2: Use content_for in page
Add the content_for tag in the previously created index.liquid page. The positioning of this line doesn't matter as long as it's in the content part of the page.
app/views/pages/index.liquid
{% content_for 'meta_title' %}Homepage title{% endcontent_for %}
Homepage
Sync or deploy. The Homepage title is now displayed in your browser's title bar or tab.
Add content_for to all pages in the same way, and the page title will be dynamically displayed for each page.
Next steps
Congratulations! You have injected dynamic content into a layout. Now you can learn how to reuse code across multiple pages using partials.