Skep's Place

 

Midweek Musings


I don't have a lot of spare time in the middle of the week so I'm going to keep this brief, but after spending a little bit of time thinking about and looking into some of the problems I still had left to tackle I actually have some pretty promising solutions on deck.

My first... let's call it less of a "problem" and more of a "begrudging acceptance" was in relation to the directory data file, which I wanted to use to apply the same front matter to all of the files in a folder (think all of the chapters in Pride & Prejudice). My problem was, I had the chapters in the same folder as the index/contents for the book, which I didn't want the data file to mess with, so I would have to move all the chapters to a subfolder and break all my hyperlinks.

Um....... no. This was a fake problem. Due to Eleventy's "data cascade" which decides what data supercedes others, if I plug information into the front matter of the index, it won't get overwritten by the data file. Because obviously the stuff in the actual template is more important in that case. Works as-is. Nice!

The second thing I wanted to figure out was how to break up the content and place it into different portions of the page. "This is main content" vs. "this needs to go into the middle of the three side boxes" vs. "actually the main content is split up into sections". If I'm passing the content to the layout in one big chunk... how do I put it all where I want it?

Boy was I overthinking this problem. To show you why, let's say I have the main content and two side boxes. In the HTML, I have the bigger space on the left wrapped in <div> and <main>; the sidebar is wrapped in another <div> and each side box is wrapped in its own <aside>. In the code, they're all one right after the other, nothing funky going on in between.

So, rather than figure out how to do "this chunk of text goes here, that one there", would it not be easier to say "I know where I want <main> to end and <aside> to begin, why don't I just pass over those tags from my template?" In other words, I'm not telling the content where to go, I'm telling the separations between the content where to go.

But I think I can even do one better here. Eleventy has a feature called shortcodes, which... well, to be honest, I think I understand what shortcodes are. However, despite all my bellyaching about the documentation thus far, this page might just be the worst I've seen. The code examples seem to be throwing in variables from left field, entirely undefined, mentioned nowhere else on the page, and with zero other explanation.

a screenshot of the documentation. One sentence of the introductory paragraph to the Shortcodes article reads 'This is sugar around Template Language Custom Tags'. The word sugar is highlighted.

I'm pretty sure this has to be a typo. Still, shows you what I'm working with here.

But I think the idea here is that you can define shortcodes sort of like functions if you have any programming knowledge. If you don't, I might go into this more in-depth later, but the idea is you write code to do something, and whenever you need to do that thing, you just call the shortcode/function rather than repeating all the code.

So if I really wanted to, I'm guessing I could even set up a shortcode to replace the tags. Then instead of inserting </main> </div> <div class="side-content"> <aside> into my template every time I want to make that transition, I could just call a custom shortcode {% MainToSide %} or something like that. The right code gets inserted into the layout; and even better, if I need to update that in the future for whatever reason, I just update the shortcode rather than updating all my templates.

Anyway, now that I figured that out, I'm actually kind of excited to jump back into this, since I believe those were my last major hurdles. I suppose we'll see what the weekend brings.

< Prev | Top