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, with the data available depending on the type of the page.

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.

Context

Each page type exposes a main context object called data. In this object you can find other objects that are relevant to the current page. 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 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 indexFor 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 tabs headings and 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"
  • 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: whether there is a previous article
  • has_nextwhether there is a next article

Archive - for lists 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

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

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 default theme 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 the menu is called "Primary". 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>

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 attribute of a document 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.

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 }}

Authors

You can access the list of authors with this syntax:

{{ data.authors }}

Archives

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

{{ data.archives }}

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 }}

© DynaBlogger 2020. All rights reserved.
powered by DynaBlogger