With page properties you are able to manage your content without touching your theme source-code. For example you are able to manage your Google Analytics ID, Icons of Products or text on your website.

General information management

Managing general information on your website may be helpful, and page properties can help achieve this. For instance, you can change a banner image within seconds, just by editing your confluence page.

Adding page properties

Open the root-page of your space and add the page properties macro. 

Shortcut for confluence editor

{ page properties }

As you don't need any settings in the dialogue, just press Insert.

Inside the page properties, add a table with two columns. If you want to add a description to your page properties you also can add a three column table.

The first column contains the name of the page property which we are going to use in our source code. Please make sure the first column is a heading row. Otherwise, Velocity can not find your property.

The second column contains the value of our page property and the third column contains the description of our page property.

The description will not be displayed anywhere else, other than on the confluence page.

Your table should look something like this:

Of course you can add as many page properties as you want.

Setting up your Viewport Theme

After adding the page properties to the root-page of our space, we are now able to get the information of our root-page anywhere in our theme.

To make sure you are getting the page property information of your root-page, you will need to add a variable to your page.

Root-page variable

#set ($home = $pages.home.properties)

pages.home is referencing our root-page while properties is referencing the properties we included on the root-page. To have a cleaner code we recommend setting this variable.

To now access the content of your property, all you have to do is the following:

Rendering page property content

## With home variable set

## Without home variable set

$home is our variable while yourPageproperty is the name of the selected page property. The HtmlFragment asText is how the content of your page property will be rendered.

For more render options please visit HtmlFragment.