Hello,
I’m attempting to create a character-bio type page for a web comic. I’ve been able to get this to work using a single .yml file in _data, but I’m trying to incorporate the subfolder concept in the documentation (Data Files → Subfolders). This would let me create an individual .yml file for each character as opposed to having one large file with all of the characters.
I’m able to get the page to iterate through each .yml file in the subfolder, but when I try to access a specific data item inside of one of those .yml files, it comes back empty (screenshot below).
_data folder structure:
├───_data
│ │ something.yml
│ │
│ └───characters
│ slimey.yml
│ uncleultross.yml
Contents of the .yml files in _data/characters:
- name: Slimy
description: Everything needs a cute mascot character, right?
image_path: /assets/images/character-placeholder.png
- name: Uncle L. T. Ross
description: This is his description.
image_path: /assets/images/character-placeholder.png
Here is my .html file (this is a top-level page, not a post or layout).
---
layout: default
---
<div>Character stuff here!</div>
<div>This comes from the folder</div>
<div class="row">
<div class="col">
<p class="phthalo-green">site.data.characters: {{ site.data.characters }}</p>
{% for character_hash in site.data.characters %}
<p>Character_hash: {{ character_hash }}</p>
<p>Character_hash[0]: {{ character_hash[0] }}</p>
<p>Character_hash[1]: {{ character_hash[1] }}</p>
<!-- This is where the issue may be? -->
{% assign character = character_hash[1] %}
<p>char: {{ character }}</p>
<p>Name: {{ character.name }}</p>
{% assign char2 = character_hash[0] %}
{% assign char3 = site.data.characters[char2]%}
<p>char3.name: {{ char3.name }}</p>
<div class="card mb-3 asparagus" >
<div class="row g-0">
<div class="col-md-4">
<img src="{{ character.image_path }}" class="img-fluid rounded-start" alt="Character Placeholder">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ character.name }}</h5>
<p class="card-text">{{ character.description }}</p>
<!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
This is the output that I get:
Do I misunderstand the intent behind the _data subfolders?
Please let me know if I missed any key details for the question.