Searching...

Matching results

    Example shortcodes

    info

    {{% info %}}

Your info message

{{% /info %}}

    Your info message

    toc

    The toc shortcode let you select the level at we start, 1 level below will be displayed. And as you can see with this header and the previous one, only the header located after the toc will be taken into account.

    {{% toc toplevel="2" %}}

    Initializing Table Of Contents...

    Howto steps

    howtoToc

    To generate the following howto toc, you must declare all the steps in the frontmatter. The frontmatter is the header (delimited with +++) at the top of your .md file.

    [[howtosteps]]
    id = "step1"
    name = "Step 1: Do something"
    shortname = "Do"
    img = "/img/howto/step-placeholder.png"
[[howtosteps]]
    id = "step2"
    name = "Step 2: Check something"
    shortname = "Check"
    img = "/img/howto/step-placeholder.png"

    And use the {{% howtoToc %}} shortcode.

    1 / Do

    2 / Check

    stepHeader

    The second shortcode using the frontmatter steps declaration is {{% stepHeader id="stepID" %}}.

    It generates a level 2 header using the step name along with the step image. You also can provide an optional description.

    {{% stepHeader id="step1" %}}

Optional step header description

{{% /stepHeader %}}

    Step 1: Do something

    Optional step header description

    link

    Lets you add a link pointing toward an external page

    {{% link text="This is an external link toward AirVantage" link="http://na.airvantage.net" external="true" %}}

    Or an internal one

    {{% link text="This is an internal link toward the root page" link="/" %}}

    This is an internal link toward the root page

    This is an external link toward AirVantage

    icon

    Display an icon.

    {{% icon src="/img/placeholders/icon.png" %}}

    This text includes an icon

    image

    Display an image that use the full width of the page.

    {{% image src="/img/placeholders/placeholder730x410.jpg" %}}

    youtube

    Quickly add a youtube video with: {{% youtube DcJmGyYV520 %}}

    The ID can be retrieved from Youtube.

    textImage

    Display some text on the left and an image on the right.

    The text can be of any kind (simple paragraph, headers, code block, info, etc..) and the image size will automatically be adjusted.

    You also can customize the layout:

    • 30⁄70
    • 50⁄50
    • 70⁄30

    Here is an example for the first example (50⁄50):

    {{% textImage layout="50/50" img="/img/placeholders/placeholder730x410.jpg" %}}

Text on the left and image on the right with a 50/50 ratio.

{{% /textImage %}}

    Text on the left and image on the right with a 50⁄50 ratio.

    Headers are allowed

    Text on the left and image on the right with a 70⁄30 ratio.

    Text on the left and image on the right with a 30⁄70 ratio.

    imageText

    Same concept but reversed, image on the left and text on the right.

    {{% imageText layout="50/50" img="/img/placeholders/placeholder730x410.jpg" %}}

Text on the right and image on the left with a 50/50 ratio.

{{% /imageText %}}

    Text on the right and image on the left with a 50⁄50 ratio.

    Text on the right and image on the left with a 70⁄30 ratio.

    Text on the right and image on the left with a 30⁄70 ratio.

    textYoutube

    Same thing as previously seen but with a Youtube video

    {{% textYoutube layout="70/30" video="_rizLAUgLSA" %}}

Text on the left and Youtube video on the right with a 70/30 ratio.

{{% /textYoutube %}}

    The 3 layouts “50⁄50”, “30⁄70” and “70⁄30” are available.

    Text on the left and Youtube video on the right with a 70⁄30 ratio.

    youtubeText

    Guess what… same thing but the other way around :)

    Youtube video on the left and text on the right with a 70⁄30 ratio.

    imagesshelf

    Display a serie of images with their description (below the image).

    When the page width is not sufficent, the images automatically goes to the next line.

    {{% imagesshelf

"/img/placeholders/placeholder730x410.jpg"
"Your description"

"/img/placeholders/placeholder730x410.jpg"
"Your description"

%}}

    Your description
    Your description
    Your description
    Your description
    Your description
    Your description

    collapse

    Allows you to “hide” a big content and to make it available with one click.

    {{% collapse id="1" text="More info..." %}}

More information about something interesting but a bit long.

{{% /collapse %}}

    The id parameter is mandatory and could be anything as soon as it is unique in your page.

    More info...

    More information about something interesting but a bit long.

    TOP