Antora UI

Antora uses vinyl virtual filesystem aka content catalog

Framework Variable

How to deal with antora handlebar templates?

Template Variables

  • siteRootPath

  • uiRootPath

Data Attributes

How to use data attributes

Store extra information with HTML elements

How to data attributes are defined?
<div class="ct-chart"
  data-chart-height="400"
  data-chart-width="600">
How to access data-attributes?
element.dataset.chartHeight
element.dataset.chartWidth

Use Cases

  1. Show captions onHover on certain elements

  2. Hide/Show some list items

  3. Pass data to javascript libraries/modules to do something interesting, like generating chart

  1. How to access keys from antora-playbook.yml in partial templates?

    {{#with site.keys.googleAnalytics}}

  2. Prebuilt HTML pages?

    Put them inside attachments directory then add a link to them in nav file

  3. What are HTML Data Attributes?

    If you want to operate on elements based on data attributes, Eg: drawing charts etc