Liquid markup

Layouts, partials, stylesheets and scripts are preprocessed with Liquid, a simple but powerful markup language that makes it possible to inject relevant data into your pages dynamically; the data that is available depends on the type of the page. Liquid also allows you to use constructs such as loops and conditionals to build pages dynamically.

Please take a look at the official documentation on how to add things like conditionals, loops, and much more to your themes. Here we'll list DynaBlogger specific tags and helpers that you can use to inject data into your pages.

Also see the code of the available themes to get familiar with the markup.

Context

Each page type exposes a main context object called data. In this object you can find other objects and attributes that are relevant to the current layout type. For example, an article will have data concerning the article, while home/archive/tag/author pages will have access to paginated lists of posts. All the page types also have access to data that is useful for sections with recent posts, featured posts, monthly archives, and a tag cloud (which can display each tag with a different font size depending on how popular that tag is in your blog).

Blog attributes

You can access several attributes concerning the blog with the data.blog object, and any attribute with data.blog.<attribute>. In Liquid, you would add some markup to the code that looks as follows:

{{ data.blog.attribute }}

Here's the list of the attributes available:

  • title: the title of the blog as you may display it in the H1 of the homepage as well as the title of the browser tabs
  • description: the description of the blog, which you may use as tagline 
  • url: the default URL of the blog
  • canonical_url: it's the URL that a search engine should keep in its index. For example, due to pagination you will have URLs like /page/2/, /page/3/ and so on. Rather than distributing "link juice" between these pages, with the canonical URL you can instruct the search engines to concentrate value on the homepage
  • meta_title and meta_description: set the title and description that should appear in search results
  • facebook_page_url and twitter_url: URLs to the social profiles of your blog
  • facebook_title, facebook_description, facebook_image_url, twitter_title, twitter_description, twitter_image_url: data for cards for social networks
  • logo_url: a logo, if the blog has one
  • favicon_url: the little icon that should be displayed in browser tab headings as well as bookmarks
  • cover_image_url: an image that you could use as header or background for example on the homepage
  • language: the language of the blog - default is "en" for English
  • rss_feed_url: the URL of the RSS feed

Article attributes - applies to posts and pages

Each post or page exposes several attributes with the following syntax:

{{ data.post.attribute }}

or 

{{ data.page.attribute }}

Here's the list of the available attributes:

  • title
  • description
  • content
  • summary
  • url
  • featured_image_url
  • cover_image_url
  • meta_title, meta_description, canonical_url (for search engines)
  • header_scripts, footer_scripts
  • date_year, date_month, date_day: publishing date
  • time_hour, time_minute, time_meridian: publishing time
  • featured: whether the article is featured
  • twitter_title, twitter_description, twitter_image_url: for Twitter card
  • facebook_title, facebook_description, facebook_image_url: for Facebook card
  • tags
  • authors
  • previous: the previous article by publishing date
  • next: the next article by publishing date
  • has_previous: (boolean) whether there is a previous article
  • has_next: (boolean) whether there is a next article

Archive - for a list of posts by month

When listing the posts for a given month, you can access details of the current month with this syntax:

{{ data.archive.attribute }}

Available attributes:

  • year
  • month
  • formatted: the month in the "May 2020" format
  • url
  • canonical_url

Author - for a list of posts by author 

Syntax:

{{ data.author.attribute }}

Available attributes:

  • first_name
  • last_name
  • full_name
  • avatar_url
  • location
  • facebook_profile_url
  • twitter_profile_url
  • bio
  • url
  • canonical_url

Tag - for a list of posts with a particular tag

Syntax:

{{ data.tag.attribute }}

Available attributes:

  • name
  • url
  • canonical_url
  • count: how many posts have this tag
  • css_class: the CSS class to use for the tag cloud

In a tag cloud, tags are usually represented with a different font size depending on how popular they are. In the available themes we use these classes:

.tag1 {font-size: 1.0em;}
.tag2 {font-size: 1.2em;}
.tag3 {font-size: 1.4em;}
.tag4 {font-size: 1.6em;}
.tag5 {font-size: 1.8em;}
.tag6 {font-size: 2.0em;}

The best way to render menus that may have nested items is by using a partial. First assign the relevant menu to a variable:

{% assign primary_menu = "Primary" | navigation %}

In this example we assume that you have given the name "Primary" to the menu. Next, create a partial with something similar to the following:

<ul class="list-none">
  {% for menu_item in menu_item.menu_items %}
  <li class="my-1 truncate">
    <a class="link text-xl" href="{{ menu_item.url }}">{{ menu_item.name }}</a>
    {% if menu_item.menu_items.size > 0 %}
      <div class="ml-4">
        {% include "menu" with { menu_item: menu_item } %}
    </div>
    {% endif %}
  </li>
  {% endfor %}
</ul>

Then add the following wherever you want the menu to be rendered:

{% include "menu" with { menu_item: primary_menu } %}

The example above is taken from our default theme (the styles are Tailwind CSS but you can use whatever you wish). The end result of this is that a menu is rendered recursively like a tree, if it has nested menu items.

Pagination

On pages that list posts, the posts are paginated according to the page size configured for the blog. Here's an example of markup to render a pagination taken from our default theme:

{% if data.pagination.page_count > 1 %}
  <div class="w-full p-3 text-center text-1xl flex justify-between">
    {% if data.pagination.prev %}
    <a class="underline link" href="{{ data.pagination.prev_url }}">< Newer posts</a>
    {% endif %} 

    Page {{ data.pagination.current_page.number }} of {{ data.pagination.page_count }}

    {% if data.pagination.next %}
    <a class="underline link" href="{{ data.pagination.next_url }}">Older posts ></a>
    {% endif %}
  </div>
{% endif %}

Paged posts

On pages that lists posts, you can access the list of the posts for the current page number (due to pagination) with the following:

{{ data.paged_posts }}

You can then access, in a loop, the attributes of each post as explained earlier.

The list of featured posts is available on every page of the website with:

{{ data.featured_posts }}

Like for the paged posts, you can then access all the attributes available for each post in a loop.

Recent posts

Same thing for recent posts:

{{ data.recent_posts }}

Tags

You can access the list of the tags in use in the blog with the following:

{{ data.tags }}

For each tag, you have the following attributes:

  • name
  • css_class
  • count
  • url
  • canonical_url

Authors

You can access the list of authors with this syntax:

{{ data.authors }}

For each author, you have the following attributes:

  • first_name
  • last_name
  • full_name
  • avatar_url
  • location
  • facebook_profile_url
  • twitter_profile_url
  • bio
  • canonical_url
  • url

Authors can edit this information from their account settings page.

Archives

To access the list of the months (year/month) of all the posts in the blog, use the following syntax:

{{ data.archives }}

For each archive, you have the following attributes:

  • year (number)
  • month (number)
  • formatted (like "September 2021")
  • url
  • canonical_url

Referencing assets

To reference an asset in layouts/partials/stylesheets/scripts, use the following syntax.

Stylesheets:

{{ "filename.css" | stylesheet_url }}

Scripts:

{{ "filename.js" | script_url }}

Images:

{{ "filename.jpg" | image_url }}

Fonts:

{{ "filename.woff2" | font_url }}

The syntax above will ensure that the assets are served via a CDN for better performance.