Create a custom page template

In this example, we'll create a custom page template by using Liquid and a page template that is based on a web template. More information: Store source content by using web templates. Our goal is to build a simple two-column template that uses a web link set as left-side navigation, with the page content to the right. Something like this:

Custom page template

Step 1: Create a web template and write the Liquid template code

First, we'll create our Web Template and write the Liquid template code. We're likely to reuse some common elements of this template in future templates. So, we'll create a common base template that we'll then extend with our specific template. Our base template will provide breadcrumb links and our page title/header, as well as define our one-column layout:

Web template one column layout

Tip

Read about template inheritance using the block and extends tags: Template tags

Two Column Layout (Web Template)

<div class=container>
  <div class=page-heading>
    <ul class=breadcrumb>
      {% for crumb in page.breadcrumbs -%}
        <li>
          <a href={{ crumb.url }}>{{ crumb.title }}</a>
        </li>
      {% endfor -%}
      <li class=active>{{ page.title }}</li>
    </ul>
    <div class=page-header>
      <h1>{{ page.title }}</h1>
    </div>
  </div>
  <div class=row>
    <div class=col-sm-4 col-lg-3>
      {% block sidebar %}{% endblock %}
    </div>
    <div class=col-sm-8 col-lg-9>
      {% block content %}{% endblock %}
    </div>
  </div>
</div>

Step 2: Create a new web template that extends our base layout template

Use the navigation web link set associated with the current page for our navigation links to create a new web template that extends our base layout template.

Web template web links left navigation layout

Tip

Familiarize yourself on how to load web link sets using the weblinks object.

{% extends 'Two Column Layout' %}

{% block sidebar %}
  {% assign weblinkset_id = page.adx_navigation.id %}
  {% if weblinkset_id %}
    {% assign nav = weblinks[page.adx_navigation.id] %}
    {% if nav %}
      <div class=list-group>
        {% for link in nav.weblinks %}
          <a class=list-group-item href={{ link.url }}>
            {{ link.name }}
          </a>
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <div class=page-copy>
    {{ page.adx_copy }}
  </div>
{% endblock %}

Step 3: Create a new page template based on the web template

In this step, we'll create a new page template that is based on the web template we created in the previous step.

Page template weblinks left navigation layout

Step 4: Create a web page to display content

Now, all that's left to do is to create a web page that uses our page template, and has an associated Web Link Set, and we have our result.

Web page with left navigation

See also

Create advanced templates for portals
Create a custom page template to render an RSS feed
Render the entity list associated with the current page
Render a website header and primary navigation bar
Render up to three levels of page hierarchy by using hybrid navigation