This post introduces the concept of templating languages and the Liquid templating language used in Jekyll. We also introduce how to define templating variables in the front matter to control the page layout.

Templating Language

A templating language basically is a language which allows defining placeholders that should later on be replaced for the purpose of implementing designs. Obviously modern template languages not only support placeholders, but also loops and conditions which are often necessary for designing a web page.

—From Stack Overflow: What is a templating language?

Jekyll uses the Liquid templating language to process templates. The templating language can be thought of as a “scripting language” in HTML files. It defines how jekyll processes the HTML files and generates the final version.

Note: The templating language is different from other real scripting languages, such as JavaScript and Python. The browser cannot read it. After jekyll processes the template statements, all the template statements will be replaced with HTML. So, in the final versions of the generated HTML file, there is no templating Language.

Liquid has ample functions, such as the include function and other string processing functions, which facilitate the writing of static web pages.

Front Matter and Variables

The front matter is specified by the --- block at the front of each file. If we add the front matter to a file, we want jekyll to process it. The process can include other HTML snippets or replace template statements.

The front matter specifies variables for processing. For example, in the post.html layout, we add the layout variable. So Jekyll will first substitute the HTML snippets and then return everything to the default.html template to generate the final HTML file.

Some global variables are reserved by Jekyll, such as layout, content, site, and page. For more information, see Jekyll Variables. These variables are useful when we write the template HTML files.

We can also define and reference local variables (user-defined variables) in the front matter. For example, we define mylogo-link variable in the following post file:

---
mylogo_link: https://path/to/image/.png
---

Then we can reference this variable in the file by writing {{ mylogo_link }}.

We can also define variables in _config.yml. The variables are in the site domain and can be accessed by {{site.my_variable}}.

Summary

We have introduced the general framework of Jekyll and the idea of how Jekyll works. In the future posts, I will write more details about Jekyll usage and the problems I have met when I use Jekyll.