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

Tag Attributes

data-trio-* tag attributes are used as markers to indicate that a specific action is associated with its HTML tag.

When building for release Trio removes all the data-trio-* attributes from the generated pages.

You can add your own custom data-trio-* attributes to your markup which you can then target in your tag-based callbacks:

$page("[data-trio-myattribute]").addClass("someCssClass")

data-trio-fragment

  • Optional
  • Applicable in template assets.
  • Is used to indicate that the HTML tag is the target of a fragment asset's content.
  • See appendToTarget and fragment for more information.

data-trio-include="[filename] | [fragment front matter property]"

  • Optional
  • Applicable in template and fragment assets.
  • The name of the file to be included can be directly assigned or can be determined indirectly by assigning the name of a fragment front matter property whose value names the file to be included.
  • The name of the file to be included requires a file extension (e.g. .html | .md).
  • Is used to indicate that the HTML tag is the target of the named include asset's content.
  • See Include for more information.

data-trio-callback="name of tag-based callback"

  • Optional
  • Applicable in template, fragment and include assets.
  • File extension is not required; it is assumed that it is .js.
  • Is used to indicate that the HTML tag is requesting that Trio call the named tag-based callback.
  • The named callback can reference this tag using the $tag parameter.
  • See Tag-Based Callbacks for more information.
  • Optional
  • Applicable when your Web hosting services hosts your site in a subfolder and requires that your URLs be prepended with a base URL.
  • See Base URL for more information.

See Also