Version: v0.8.1 - Beta.  We welcome contributors & feedback.

Web.anchor

Web.anchor($label, $options = {}) -> HtmlString

Description

Create a # anchor that lets users jump to this specific point in the page.

This is often used to implement a table of contents.

It will convert the label to a dash-case URL slug.

tem docsHtml {

    --- $sections = ['Apples', 'Oranges, etc.']
    --- foreach $sections as $section {

        <h3> {{ $section }} {{ Web.anchor($section) }}

        ...

    --- }
}

//   <a name="apples">#</a>
//   <a name="oranges-etc">#</a>

Options

Option Value Description
link true/false Include a visible link to itself.
linkLabel string The label of the visible link. (default: #)

If $options is -link, a clickable link will be inserted at the same position, making it easier for users to share the direct link.

{{ Web.anchor('Oranges, etc.', -link) }}
//  <a href="#oranges-etc" class="anchor-link">#</a>
//  <a name="oranges-etc"></a>

See Also