12.2 Blog index content loop - Video Tutorials & Practice Problems

<v Speaker 1>Now that we've got a good start</v> on the styling for these blog posts, let's replace this stub content with actual blog content. So we're going to make a couple of real posts or at least real sample posts, and then we'll pull them into this page and build the index dynamically based on the posts that live in the directory. So the way we do that is using a special convention in Jekyll. Remember we said that Jekyll is blog aware, so part of what that means is that Jekyll knows to look for a directory called underscore posts. Recall that several of the special directories used by Jekyll have preceding underscores, so we'll make the directory _posts. And then what we're going to do is make a file with a date in the name, and that represents at least in theory, the date of the post, but you can actually override that using a variable, which we'll mention later. As usual, I'll use the touch command, and let's just use the date from the text. This is in the standard format of the year, then the month, then the day, and then the name of the post separated by hyphens. <v Lee>And not spaces,</v> it needs to be hyphens. <v Speaker 1>Yeah if you put in spaces,</v> that'll mess this up. <v Lee>And I'm pretty sure if you put in like an</v> underscore of something else, it actually changes it to hyphen. <v Speaker 1>Hmm Interesting.</v> And what we'll be doing is using markdown files. This is something supported natively by Jekyll and in order to do that we just use the .md extension. And let's take a look at it. Here it is. It's empty of course, initially. So we're just gonna copy and paste from tutorial again. <v Lee>Yeah. There's a lot of front matter on this.</v> <v Speaker 1>And let's just take a look at</v> the structure of this. So this here is the markdown and it's got the usual sort of formatting like you can do italicizing there. Now this is kind of an old school style formatting here for the image. I'm just gonna get rid of that slash and I'm gonna give it an alt. But you'll notice here that we've got some raw HTML and this is something it's important to know about markdown, which is that it's technically a super set of HTML, which means that every valid HTML page is also a valid markdown page and then markdown adds extra formatting to HTML. So that means we can just put in an image here, taken from placekitten and just use it the way we would a normal HTML element. But then the really unusual stuff here is this large amount of front matter. So this is the usual sort of thing that we've seen in other context. Say here we've got the layout default, well now we've got a lot more, we've got a post layout which doesn't exist yet, we'll be making that later in this chapter, and then we've got a bunch of other content. So the title, the hero image, some other information about the author and so on. By the way don't worry about this highlighting, so this stuff here is technically YAML, but this is being highlighted as markdown. So it looks a little weird in the highlighting, but it's not any cause for concern. Okay well let's do something with this post. Let's go back to our blog index. And this is where the magic of Jekyll really shines. So what we're gonna do here just to get started is demonstrate an important concept in programming called a loop. One of the things Jekyll does for us when we're building a site like this is that it automatically creates a variable which is just a box with some content called site.posts like this. Actually, what happens if we just insert it? Do you happen to know? <v Lee>I don't know if it,</v> no I've never tried that. <v Speaker 1>Let's check it out.</v> <v Lee>That's probably an array of posts, right?</v> <v Speaker 1>Yeah.</v> <v Lee>So it might spit out,</v> Oh, <v Speaker 1>Oh look at that.</v> <v Lee>There you go just throws out the whole thing.</v> <v Speaker 1>It actually just dumps it out.</v> <v Lee>Yeah interesting.</v> <v Speaker 1>Now in this case,</v> it's just one post because if we look here, right it's just one post. But what we wanna be able to do is put all of the posts here, and the way to do that is to use what's called a for loop. And this is now no longer the interpolations syntax, that inserts things, we use this syntax from liquid and we'll use what's called a for loop. In some languages also called a for each loop. And we'll say for post in site.posts. And what this does is it creates a variable called post that we can then use inside of here. But as a simple demo, we're gonna do something with just plain text. The way you end this in liquid is with endfor. So you say for post in site.post, and then you can do something every time that there's a post. And so this was <v Lee >Put a little break after that too.</v> <v Speaker 1>Okay.</v> This is a suggestion Lee made, let's take a look at this. So there's only one post, So what we should do is create, in this case just a single line with a break. So that's this here I'm a post Of course that doesn't do us very much good by itself, but it illustrates the concept. And so let's copy this post and make a second one. <v Lee>We're gonna change the date on it too.</v> Yeah we're gonna change the date to the fourth. And so just by doing that, we have changed the number of posts. If we go here, now there are two posts. And so when we look at site.posts, that's being created automatically by Jekyll remember. So now there are two posts. So this loop will execute twice and we should see I'm a post twice. There it is. But you may be wondering, well why are we doing this? Like what does this post variable do? So it's important to understand that this here is a variable that exists inside of Jekyll and this is just plain text. So how do we actually do something useful with this post? And the answer is we use this double brace syntax that we've seen before. Here it puts in the content. So we can just do something with the post, say the post dot, let's look at the front matter here. <v Lee>Title.</v> <v Speaker 1>We can look at the post.title.</v> Sure. See their, right next to each other but there are two of them. And we can say post.date, actually don't know what the default format is offhand. So now the date should be different because they're being pulled right out of the name of the file. Okay so time <v Lee>Those are the</v> kinda ugly machine language looking one. <v Speaker 1>Yeah so there's that one.</v> This is 1104 and then this one's 1103. Notice that they're coming out in reverse order. So like the most recent first, which is the normal convention for blogs. Okay so what we're gonna do now, as you may have already inferred, is we're going to use this idea to build up the post dynamically. So I just realized that I put this in the wrong place. This needs to be here. Outside. Yeah 'cause this is a blog posts class, but it is actually being applied to each individual post, so here we go. It won't really change anything now. Okay right. So this, but now this is in the right place. So basically what we wanna do is inside of this syntax, this for loop, we are going to put HTML for each individual post. And that way instead of repeating things like we did here, we'll just have this HTML for each post, and then every aspect of this will be filled in automatically by Jekyll. For each of these pieces of front matter, layout title all this sort of stuff, there is a corresponding variable on post. So post.date is created automatically, but post.title is something we gave it. post.author we'll be accessing using this syntax here. So I think the best way to do this is maybe just to grab one of these. <v Lee>Yep.</v> And delete the other one. <v Speaker 1>Put it in.</v> Now what's your preference for indentation? Should I have it indented like this? Do you think. <v Lee>I usually include the loop in my indentation,</v> so I'd move the whole thing in one. <v Speaker 1>Like this?</v> <v Lee>Yeah.</v> And then I would delete the other one just so that <v Speaker 1>Right.</v> Yeah. <v Lee>Get it out of the way.</v> And I realized why this looks a little weird by the way. <v Speaker 1>Why is that?</v> <v Lee>The background image,</v> post image is actually dedented one, makes it hard to scan down and see the end of the blog post. So if we That's <v Speaker 1>Oh, okay.</v> I should fix that. <v Lee>'Cause I was trying to figure out</v> where the end of that blog post div was too, and I kept running into the end tag for the post image. <v Speaker 1>Okay so this is matched up now, right?</v> <v Lee>Yeah.</v> Okay. <v Lee>So</v> <v Speaker 1>Okay so now if we refresh this,</v> this should be executed twice now, right? <v Lee>Yeah,</v> so we'll still have two blog posts of our stub ones. <v Speaker 1>But now it's literally just like</v> the exact same blog post, right? 'Cause it's just all static content. But what we can do now is start filling it in using the variables from the front matter and variables that are automatically created by Jekyll. <v Lee>And since you have this open,</v> go back to the post, why don't we change the title there? So this is the title of the first post. <v Speaker 1>Yeah.</v> <v Lee>There we go.</v> This'll make things a little clearer. <v Speaker 1>Yeah.</v> We can even do this. Okay well let's just start going down and we'll fill it in systematically. <v Lee>So the first thing would be</v> the title and we're gonna replace that with post.title with inside of the double curly braces. <v Speaker 1>It's here,</v> Right so this is the magic of Jekyll and this is using the liquid language. So what this is doing is just taking this title, it automatically makes a post for each post in the post directory and puts it in this variable site.posts. And then, it's important to understand that we can change this name, site.post is something that is created by Jekyll we could say for foo in site.post, and this will work. We choose this name. It's completely up to us. But that's not a good name 'cause it's kind of confusing. So see that's exactly the same. <v Lee>And since we now see that that works,</v> we can also change where the link points to. <v Speaker 1>Right.</v> So there's href and this is automatically given us by Jekyll right. There's a post.url. <v Lee>Exactly.</v> Built in. <v Speaker 1>Don't worry too much about what</v> this post thing is, right? It's something where if you call post.url, it gives you the URL and this is the sort of thing you can find out from the Jekyll documentation. So we can look at this here refresh it and inspect it. You can see here the directory now is, this is actually see if we can make it bigger. Yeah. So it's an href to /2016/11/04/title-of-post.html. So what that means is that Jekyll has created a hierarchy of directories matching the usual convention for blog posts. So if we go here, we should see that it's in the site directory. Yeah so you can see, this is another part of what it means to be blog aware. Jekyll automatically creates these directories in a way that has a nice hierarchy based on date. So that's the URL and title This gravatar we have here, So this is gonna be source equals post.gravatar should still work, right? So we're just refactoring this. Everything should look the same now, from here on out pretty much. Well except things might change. It's not technically refactoring I guess, because what we're doing is making things dynamic. So the title will change. If it were only one post, it would be a formal refactoring. So what else have we got <v Lee>social link.</v> <v Speaker 1>The social link,</v> post dot and what do we call it Twitter? It's author Twitter. Like this and then instead of month to year, we want it to actually be the date we saw that the date was kind of weirdly formatted. Let's take a look at this. Right so there's the author title, which doesn't change. But now we've got this here and this is the sort of situation where if you look around in the documentation for Jekyll or if you just Google around for nice date formatting, you'll come across something that you like. And you'll find a page that says, here are some ways to format dates in Jekyll so this is not the kind of thing I know off the top of my head. I don't know about you Lee, but I always have to look this up. <v Lee>Always.</v> <v Speaker 1>Yeah.</v> And so this is going to use the pipe character. So this is shift back slash and what this does, it's not that important to understand the details here, but what this does is it's going to essentially run this post.date which is just a string, it's just this string here or this one through a formatter. And again this syntax, I don't even know very much about it. I just know that if you look up on the Jekyll documentation, it says do something like this. And then there are a bunch of different possibilities. The one that corresponds what we want is this. Again I would have to look this up every time. <v Speaker 1>Like literally.</v> <v Lee>Yes.</v> I would not know it off the top of my head. All right. So that is the format, November and then so I guess %d this is the month %d apparently is the day with a zero if it's under 10 and then the year %y. So that's just one possible way of formatting it, but there are lots of others. And that's the kind of thing that you would always defer to the documentation for the static site builder. And then I guess there's one more thing, right? There's the URL is that right? <v Lee>Yeah for the background image.</v> <v Speaker 1>Right.</v> So we wanna just replace this. In this case we actually do have the same one, but we're just going to put this in here and it's gonna be, I guess it's like this here post dot what do we call it? Hero. <v Lee>postHero.</v> <v Speaker 1>postHero.</v> Here it is postHero. And this can get a little hairy. I mean there's a lot of opening your yeah. Parentheses and curly braces. So this is the kind of thing you might, you know leave one off accidentally and you're like, I don't even know what happened there, What did happen there? Why did that work? Oh probably just broke It probably just, yeah. <v Lee>Yep.</v> <v Speaker 1>So it just said,</v> oh that didn't work at all. So, <v Lee>So it did nothing.</v> <v Speaker 1>So it did nothing.</v> It just served up what it already had before. But now it's working, I believe. Oh there is one thing. This is interesting. It's building it. We don't have a post layout yet. <v Lee>Oh yeah.</v> <v Speaker 1>So that's actually interesting</v> that it was working anyway. Basically what's going on here is that we're not actually rendering this yet. 'cause we haven't visited an individual post we're working on the index. So there is an error message their, which is a reminder to us that we need to make a post layout. But this is basically working now. I think this is right. So are we missing anything? <v Lee>No.</v> Oh we're missing the blurb. <v Speaker 1>Oh the blurb that's the content.</v> <v Lee>Yeah.</v> <v Speaker 1>Right.</v> So this here, this paragraph should be replaced with the content of the post. <v Lee>So if we were to add just post like that.</v> <v Speaker 1>Yeah.</v> <v Lee>Delete the period.</v> <v Speaker 1>Oh just that?</v> <v Lee>This would be the whole post.</v> So if you save this and refresh, this would be like having the blog post on the homepage. <v Speaker 1>Yeah.</v> <v Lee>But there's actually something built into Jekyll</v> that let's us show just a little bit of it. <v Speaker 1>Okay.</v> <v Lee>And so we can do post.excerpt.</v> <v Speaker 1>Okay that</v> <v Lee>And there you go.</v> And we can actually add in a read more link as well. <v Speaker 1>Oh yeah that would be good.</v> So where should we put that? <v Lee>We can just make sure that there's a space after</v> the post excerpt. So that's there and then add a new line and just add a, and it's gonna be the exact same as the URL that's in the title. Oops. <v Speaker 1>Okay.</v> And now actually we don't need this space here because the new line does the job for that right? <v Lee>I'm only worried about the white space.</v> What happens when Jekyll goes through and puts something in there? <v Speaker 1>Well I can tell you that when I save this,</v> my editor is gonna get rid of that white space anyway. So we're about to find out. <v Lee>There you go.</v> <v Speaker 1>It does.</v> <v Speaker 1>You'll see this 'cause</v> I have my sublime tech configure to <v Lee>Oh, okay.</v> Yeah I was trying to, I was hoping that that Jekyll doesn't crunch all the white space down and then the link could end up right next to excerpt but <v Speaker 1>Yeah we'll find out.</v> <v Lee>This is an experiment.</v> <v Speaker 1>Yeah let's look.</v> <v Lee>Yep there we go.</v> <v Speaker 1>That's interesting.</v> <v Lee>It's outside of the p</v> <v Speaker 1>It's on a new line.</v> Oh yeah right. There's a paragraph. So basically what's happening here, by the way just in case you're wondering like how did that work? Jekyll knows that this is Markdown because we called it .md. And so it's automatically processing. It comes with a markdown processor. It's building the HTML automatically. And so what's happening here is there's a paragraph at the end of this and the read more link is coming after that paragraph tag. So that's good. And you'll note that it's actually building it dynamically from both of them. So it's got the date here and then the date here, and you can see how this generalizes to a large number of posts the kind of thing that if you've got a hundred posts, well they're all gonna be here on the page and you don't have to do anything by hand. There's one thing you might have noticed though, that in this recent post list, it doesn't actually have anything useful, it's just these stubs. So our final step in this section is to replace that with another loop. Let's take a look at that. So this is really a natural case for a loop, right? 'cause you've got a list element for every one of these posts. So it's basically the same thing. Let's just copy it for each one of these. for each post in posts in site.posts, we're going to make one of these. Actually we can just indent it, You can see how useful it is to stub things out, get our design working and then add the dynamic stuff later. Now once you get better at this sort of thing, you can probably start with a loop. <v Lee>Yeah, exactly.</v> <v Speaker 1>But this is a really gentle way</v> to build it up. Okay so this is the post. So this is exactly the same thing here right? We can in fact can we just copy this? Yeah. <v Lee>Yeah.</v> And just copy exact exact <v Speaker 1>Exactly same thing</v> and posted month, day, year. And we'll just do the same formatting for simplicity, but this is the kind of thing where you could actually change it up if you wanted a different format in the sidebar. <v Lee>Oh, leave the post.date yeah.</v> <v Speaker 1>Yeah.</v> Yeah you could see that I was tempted. I like that but now I got it. Okay and there's one more little detail, we'll mention in a second. So you can see here it's the title of the second post, the first post and the label here says recent posts. So let's actually limit this to just the last five posts. And this is a little bit of Jekyll syntax, actually it's liquid syntax and it looks like this, again this is the kind of thing that you look up in the documentation. I might not have known how to do this. I would just go to Google and say, Jekyll liquid limit number displayed or something like that. And what you can do is just say limit:5. In this case there are only two posts, So this won't actually change anything. But if this gets to 10 or 20 or 50 posts, it'll just be the first five. And it wouldn't actually be a terrible idea to have a limit on this. If you wanted to get fancier and then have like a link to the full archives or something like that. <v Lee>All so true.</v> <v Speaker 1>All right, this has come</v> together pretty nicely. We've got a couple of these sample posts that are being pulled out of the post directory automatically by Jekyll, and we've now assembled a page based on what's in that directory with everything being filled in automatically using these liquid variables and the double brace syntax. So you can see how it would be practically impossible to make a big blog with lots of posts, without something like a static site builder to do this sort of automation for you. But with Jekyll you have the power to make a full website that you control every aspect of while also having a blog that has content where you are in total control, where it's versioned and where no matter what happens, you're going to be able to put your blog up on the internet. You're not at the mercy of some third party service. <v Lee>And speaking of total control,</v> there's one little thing that we noticed. One little error that crept in. <v Speaker 1>Oh yeah we'll fix this in the text,</v> but this is something that came up, right. This <v Lee>So the social link.</v> <v Speaker 1>Yeah.</v> <v Lee>The style that we have should have the social link,</v> be the size as that little avatar right there. But when we originally made the styles for the social link, we used one rem instead of one em so that means it was basing it off of the HTML size. <v Speaker 1>That's here.</v> <v Lee>Right and this is the kind of thing where,</v> you know you can make little mistakes like this and realize it was not the right choice and just, you know change it but ideally what you'd want is your social links to look about the same size as the content that's around them you don't want to have like this giant social links and then like normal size regular links. <v Speaker 1>Right.</v> <v Lee>So we're gonna make it one em so that it fits better</v> into the content that it sits inside. <v Speaker 1>Right So here the multiplicative nature of</v> the em is actually helping us. <v Lee>Right.</v> <v Speaker 1>So if I refresh this,</v> it should be the same size. <v Lee>Yeah.</v> <v Speaker 1>Oh great.</v> I see yeah so this was smaller. So this was too big and now we've made it the same size as the little gravatar. Cool all right. Well, this is coming together pretty well. All we've got left now is to take a look at these individual posts. Oops and we just noticed that we forgot to use the author here, which is so hard coded. It's probably a good idea to change the names of some of these things, just to make sure that they're really different, but here we go. So it's gonna be post post.author. And now so far as I can tell everything is being generated dynamically as desired. Okay now we're ready to move on.