Create custom Adxstudio page templates using Liquid

Liquid is an open-source template language integrated into Adxstudio Portals. It can be used to add dynamic content to pages, and to create a wide variety of custom templates. In this post, we’ll create a custom Page Template, using Liquid and a Web Template Page Template in Adxstudio portal.

Our final template will consist of three columns containing Web Link Set as left-side navigation, with the page content in the center and blog posts in right. The final page will look like below

final-page-template

First of all we’ll create a base template which will provide breadcrumb links and our page title/header, as well as define our three-column layout. For this go to Portals >Web Templates and click New as shown in screenshot below.

Web template -1

 

The source code of above template is given below

<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-4">
{% block sidebar %}{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block content %}{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
 {% block blog %}{% endblock %}
 </div>
</div>
</div>

Now we’ll  create a new Web Template that extends our base layout template, using the navigation web link set associated with the current page for our navigation links as shown in screenshot below.

weblinks and blog child template

 

The source code of the above template is given below

{% extends '3 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 %}
{% block blog %}
{% assign blogposts = blogs.posts | paginate: 0,4 | all %}
<ul class="list-group">
{% for post in blogposts %}
<li class="list-group-item" >
<a class="user-avatar" href="{{ post.author_url }}">
<img src="{{ post.user_image_url }}" />
</a>
<h4 class="list-group-item-heading">
<a href="{{ post.app_relative_path }}">{{ post.title }}</a>
</h4>
<div class="content-metadata">
<abbr class="timeago">{{ post.publish_date }}</abbr> &ndash;
<a href="{{ post.author_url }}"> {{ post.author_name }} </a> &ndash;
<a href="{{ post.application_path }}#comments">
<span class="fa fa-comment" aria-hidden="true"></span>
{{ post.comment_count }}
</a>
</div>
</li>
{% endfor %}
</ul>
{% endblock %}

Next, we create a new Web Template Page Template that uses our Web Template. for this go to Portals > Page Templates and click New as shown in screenshot below.

Screenshot_10

 

Now the last step is to create the Web Page that will use our template and associated web links set as shown in the screenshot.

Web Page

 

And that’s all you have successfully created a custom 3 page layout in Adxstudio portal using Liquid.

 

 



Leave a Reply