Yielding content to other places within the DOM & Layout
Sometimes you may want to place certain things in different places than where your
</body>tag or you want to put another stylesheet in your
<head>but you only want this CSS or JS to be used in one specific template (eg:
To do that, place:
<r:yield name="page-js"> <r:content /> </r:yield>
into your layout (probably
default.html) where you want the content to appear.
This is your "hook." Then, in your template (say
frontpage.htmlfor example), place:
<r:content_for name="page-js"> <!-- Your stuff goes between these tags! --> </r:content_for>
In this example, I called it
page-js. You can name it whatever you want (as long as you follow the
best practices outlined on the Convert a theme to CleanSlate page). You just want to be sure to include the same name in both places
where you reference it (e.g., in your layout [say
default.html] and in your page template [say
frontpage.html]). In other words,
don't just copy and paste blindly, rename
page-jsto what you want it to be! The
DIY Outdoors Theme has a good example of this technique.
Last updated on June 15, 2018.
We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:
- A brief description of the issue
- A link to the page where you saw the issue
- Screenshots that illustrate the problem - How do I take a screenshot?