Скачать или смотреть Accessing Liquid Object Properties in Jekyll

Learn how to effectively access properties from objects in Jekyll using Liquid. This guide will guide you through a common issue faced by Jekyll users.
---
This video is based on the question https://stackoverflow.com/q/62239014/ asked by the user 'Maxim' ( https://stackoverflow.com/u/13501679/ ) and on the answer https://stackoverflow.com/a/62243875/ provided by the user 'David Jacquel' ( https://stackoverflow.com/u/1548376/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Cannot access liquid object properties (Jekyll)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Accessing Liquid Object Properties in Jekyll

If you are working with Jekyll, a popular static site generator, you may encounter some obstacles when trying to access properties of objects using Liquid, its templating engine. A common issue many newcomers face is how to properly extract and utilize data from YAML files in their Jekyll projects. In this post, we will dig deeper into a problem where users cannot access liquid object properties, particularly when trying to display documentation structures on their site. Let's break this down step by step.

The Problem

You might have structured your documentation in a YAML file, creating a separate file in the _data folder. For example, your subsections.yml might look something like this:

[[See Video to Reveal this Text or Code Snippet]]

While creating a sidebar that dynamically displays the current page of your documentation, you might attempt to filter the data and create a variable in your Liquid template. An extract of your template code may appear as follows:

[[See Video to Reveal this Text or Code Snippet]]

Upon trying to output one of the properties of the resulting subsecs, such as title, you might find that it returns an empty string:

[[See Video to Reveal this Text or Code Snippet]]

Why Is This Happening?

The confusion arises from the behavior of the where filter in Liquid. When you use this filter to search through your data, it doesn’t return a single object; rather, it returns an array of objects that match your criteria — even if your filter criteria matches only one object.

For example, using the inspect filter:

[[See Video to Reveal this Text or Code Snippet]]

This will output something like:

[[See Video to Reveal this Text or Code Snippet]]

The brackets indicate that the variable subsecs is indeed an array, not an individual object. Hence, trying to access {{ subsecs.title }} results in nothing being displayed.

The Solution

To resolve this, you need to extract the first element of the array that the where filter returns. You can accomplish this by chaining the first filter to your original statement:

[[See Video to Reveal this Text or Code Snippet]]

With this modification, the subsecs variable will now reference the first (and in this case, only) object in the array.

Updated Output

Once you have made this change, you can effortlessly access the properties of your object. For example:

[[See Video to Reveal this Text or Code Snippet]]

This will correctly output:

[[See Video to Reveal this Text or Code Snippet]]

Summary

When dealing with Liquid in Jekyll:

Remember that filters like where return arrays, so you need to account for that in your code.

When accessing properties, make sure to extract the first element of the array using the first filter.

Use the inspect filter to help debug and understand the structure of your objects.

By following these guidelines, you can effectively navigate the challenges of accessing object properties in Liquid and enhance your Jekyll documentation site without frustration. Happy coding!