marko-layout
Advanced tools
This module provides the builtin layout taglib for Marko. The layout taglib provides support for separating out an HTML layout from content. A layout a just a normal Marko template with placeholders that allow for additional content to be provided by another template.
Example usage of of the layout taglib is shown in the sample code below:
default-layout.marko:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><layout-placeholder name="title"/></title>
</head>
<body>
<h1 if="data.showHeader !== false">
<layout-placeholder name="title"/>
</h1>
<p>
<layout-placeholder name="body"/>
</p>
<div>
<layout-placeholder name="footer">
Default Footer
</layout-placeholder>
</div>
</body>
</html>
Usage of default-layout.marko:
<layout-use template="./default-layout.marko" show-header="$true">
<layout-put into="title">My Page</layout-put>
<layout-put into="body">BODY CONTENT</layout-put>
</layout-use>
A layout is just a standard Marko template with special <layout-placeholder> tags.
<layout-placeholder>Supported attributes:
Each <layout-placeholder> tag should be assigned a name using the name attribute.
Each placeholder can have default content that is shown if no content for the placeholder is provided by the caller. The default content (if any) should be provided as nested content as shown below:
<layout-placeholder name="footer">
This is the default content for the "footer" placeholder. If
no "footer" content is provided by the caller then this content will
be rendered.
</layout-placeholder>
The user of a layout template can provide content for a placeholder using the <layout-put> tag (described later).
<layout-use>The <layout-use> tag is used to render a layout template with content being provided by the caller.
Supported attributes:
Example:
<layout-use template="./default-layout.marko" show-header="$true">
...
</layout-use>
<layout-put>The <layout-put> tag is used to provide layout content.
Supported attributes:
If nested content is provided then it will be used the content for the corresponding placeholder.
Example usage:
<layout-put into="title">My Page</layout-put>
Alternatively, the content can be provided using the value attribute as shown below:
<layout-put into="title" value="My Page"/>
Additional data can be provided to a layout template by the caller. Data is separate from content and be used to control how the layout renders. Layout data will be accessible as properties in the standard data variable. Any additional attributes other than the "template" attribute that are provided to the <layout-use> tag are used to pass additional data to a layout template.
The example below shows a showHeader option can be passed to a layout template to control how the header content renders:
default-layout.marko:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><layout-placeholder name="title"/></title>
</head>
<body>
<h1 if="data.showHeader !== false">
<layout-placeholder name="title"/>
</h1>
...
</body>
</html>
Usage of default-layout.marko:
<layout-use template="./default-layout.marko" show-header="$true">
...
</layout-use>
NOTE: All data attributes will be de-hyphenated and converted to camel case (e.g., show-header will be accessible via the showHeader property on the data object).
FAQs
Layout taglib for marko
We found that marko-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.