Creating variables in Liquid for use in a Jekyll-generated page.
30 Jun 2021I wondered how to create variables within a single HTML page. Why? I am working on a refactor of parts of my website, and in the process I want to make it easier to refer to paths in general. For example, I have a directory of images for a page, say, and instead of having to retype or copy-paste that thing again and again, I have one variable declared once. Then, if that path changes, I just change the variable.
Assuming the website is generated with Jekyll, you can declare page-level variables using Liquid docs. To do so, declare the variable in the front matter. So for this page I declared
image_path: /til/2021-06-06-images/
Then, I can reference this path as follows by using the image_path variable, but because it is a page-level variable, is page.image_path:
<img src="{{ page.image_path }}acra-swiss-top.jpg" alt="An acra plate on a super telephoto lens" align = "left" style="width:750px; padding: 0px 10px 10px 0px"/>
Which looks like this:
OR I could use Markdown and do this:
Which looks like this: