Trio Icon
Trio v5.0.0
Documentation is evolving and is a WIP

Include

An include is an optional asset that can be inserted into fragment and template assets.

  • file location: root/source/includes
  • file type/content: .html/HTML or .md/Markdown
  • front matter required: no
  • required predefined front matter properties: none
  • optional predefined front matter properties: appendToTarget
  • applicable data-trio-* attributes: data-trio-callback, data-trio-link

Inclusion By File Name

To insert an include asset by its file name, you decorate the tag that you are targeting as the insertion point with a data-trio-include attribute, and assign it the name of the include file, including its file.extension (i.e. .html or .md).

File root/source/includes/footer.html:

<!--
appendToTarget: true
-->
Copyright ©2019 All Rights Reserved
Example: Footer Include File

File root/source/templates/default.html:

<footer>data-trio-include="footer.html"</footer>
Example: Inclusion By File Name

Inclusion By Indirect Value

Inclusion by indirect value allows fragments to name the include files whose content is to be inserted into their associated templates.

To insert an include asset by indirect value, you decorate the tag in the template that you are targeting as the insertion point with a data-trio-include attribute, and assign it the name of a front matter property that is declared in the template's associated fragment whose value is the name of the include file.

File root/source/includes/footer.html:

<!--
appendToTarget: true
-->
Copyright ©2019 All Rights Reserved
Example: Footer Include File

File root/source/fragments/index.html:

<!--
template: default
title: Hello World!
myfooter: footer.html
--> 
Example: Fragment Front Matter Declaring Name Of Include File

File root/source/templates/default.html:

<footer>data-trio-include="myfooter"</footer>
Example: Inclusion By Indirect Value

See Also