component​

The component is isolated in scope. If external variables are needed, they must be manually passed in through hash parameters. The Sline global object has no restrictions.

Renders the specified public component, which can be a global component (under the component directory) or a private section/block component (under the corresponding section/block directory).

{{#component file_path [hash...] /}}

file_path

The component file path can be a relative path or an absolute path. The relative path needs to start with ./, and the absolute path is the file under components/.

hash

Dynamic hash parameters(key=value), with no limit on the number, are used to pass variable parameters required by the component.

Example​

Using Global Components

Import the global components/title.html component.

{{#component "title" /}}

Importing private components

For example, currently in the sections/header/header.html template, use the sections/header/title.html template.

{{#component "./title" /}}

Component passing parameters

For example, you want to pass the variables in section.settings.title into the title component.

<!--! sections/header/header.html -->
{{#component "./title" title=section.settings.title show=true /}}
<!--! sections/header/title.html -->
{{#if show}}
    {{ title }}
{{/if}}