 Today, you're going to learn some of the pure power of Hugo to be able to create via scripting very complex sites without any real effort, without any kind of dynamic site-side crap. It's we're going to do, here's what we're going to do in this video. I actually have my personal website pulled up here as an example, and we're going to use this just because I already have pages created for this. What we're going to do here is something that a lot of sites have. Let's say I want on my main page, of all the blog articles I have, let's say on my main page, I want to have a kind of a list, but really like a bunch of previews of all of the blog posts I have that have the title, they have the date, the link, they have a summary of whatever, you know, what the blog post is about, and maybe some other metadata and stuff like that. Because we want that on our front page, that people can kind of look at things, browse it and follow them if they want. We're going to show you how easy that is to do in Hugo, and we'll learn some other stuff in the meantime. So here I actually have, notice I have here, I should probably be clear, we are in my website's directory in this folder right here. I'm going to go into the layouts folder, and you'll see that in the layouts folder there is a short codes subdirectory, and of course if it doesn't exist in your website you can go ahead and make that short codes directory, and in that we are going to create a file that we are going to create the rules, the script to generate all of this. And it's not difficult at all because we're going to look at Hugo variables. So here's what we're going to do, I'm going to create a file, and I'm just going to say, we'll call it 4video.html, and this again is in the short codes directory, and at the same time I'm going to go ahead and get rid of all the stuff that's on my website. So I'm just going to delete all this just for the example. So I'm going to just put some random stuff, random text in this 4video short code, and I'm going to call it here by saying 4video, the name of the file, notice that it's inside two curly brackets, and one carat bracket thing, whatever they're called, greater than or less than sign, and I'm going to save that and you'll see that now my main site has this lolol thing here, lololol, and that of course is it just printing out the content of this short code. I'm actually going to go ahead and we don't need to modify that terminal at all whatsoever. So a couple things about short codes, right off the bat. Even if you're not putting any kind of programming into them or any kind of like for loops or anything like that, short codes can function as macros, right? If you want to just, if you have text that you're repeating on a bunch of different pages, like that you need to put in different places, a short code is a good way of just abbreviating that. So if you just have some information like this highly important information, you don't need anything else, you can just like put this content in your Hugo page without any trouble, right? And of course this is supposed to be an HTML just to be absolutely clear. I know it's technically not right now, but you know, okay, now it's HTML text, right? Well, either way. So, but let's actually start doing what I said we were going to do. So I want to loop through, I basically want to have all the pages on my website and we're going to want to, again, have a little preview of each of them. Now I'm going to go ahead and write some stuff and then I'll explain what this is doing. We are going to say range, site, pages, okay? Then we're going to say in and then we're going to say in the middle here, we'll say title, okay? So actually I'm going to put in some line break there. So let's save and look at that and we'll see now it's printing out actually the names of all the pages on my website. So what this thing is doing on the right, what range does, is you give it something more or less to loop over. Range is basically like a for loop. So it takes all of the elements in site pages and for each of those things it does this. It prints out title in our case and then it prints out a line break, right? If we got rid of this line break just to be clear, it would print everything just without breaking a line. So that's why I put that in. Or we can do something more, I don't know, syntactically correct. We could do something like this. We could say, let's say open a list, close a list and for each of these elements in the range, we're going to have that in a list item, hypothetically, right? So we could do something like that. So that's all this is doing. But let's explain what, so what is this site stop pages for? What is this dot title for? Just to be specific, notice I pulled two pages up, web pages up in the Hugo documentation. And I will go ahead and say this. I recommend if you're on a desktop especially, go ahead and pull these pages up because you're going to want to play around with these. Hugo actually has pretty decent web documentation, which is very rare among a lot of projects. They actually list things out like economically, simply and like tell you basically all the stuff you can do. Now this first thing here is a site variable. It's prefaced by dot site. And this is something that is basically site-wide. So dot site dot pages is going to be all the pages in your website, right? And then this thing here, which does not have site in front of it, this is as we're looping through those pages, we can also call one of these page variables. In fact, we can call all of these page variables if we want. This is all the stuff we have to work with or we can use while we're going through those pages, okay? So site variables and page variables, you can check these out. We'll be using some in this video, okay? All right, so let me save this again. Actually, let's put the line break in. Actually, you know what we're actually going to do? Here's what I'm going to do. I'm going to put the title. I'm going to put that in a, you know, give it kind of a heading or whatever. So notice a couple things about this. Firstly, there's some weird page titles here. So there's like crypto software that isn't capitalized. There's tags. These are not actually pages that I've created on my website. Really what we want, if we look at site variables, there's pages, there's, I'm going to be searching a lot of pages, but there's also a site variable called regular pages, okay? And what that is is, well actually, let's just look what it is. Why find it in the documentation when I know the answer anyway? So if you put in regular pages, you'll see that all those other little tag titles and stuff, they disappeared. So just to be clear about what the difference is, pages is all the sites on your, all the pages on your website that you've created, plus the ones that Hugo auto-generates. So it auto-generates tags and stuff based on the, or pages based on the tags that I've created. The dot pages variable includes all of those, but dot regular pages does not. It is just the files that you have created. So that's really what we want here, just to be clear, okay? So now we're using this, but I'm going to show you some things that you can do in addition to this. So you can pipe this content and you're going to guess what this does. If you pipe this into first five, what do you think that does? Wow, you're so smart. It actually takes that for loop and only takes the first five elements in it, right? So it only takes the first, if you only want a preview of the first five or the most recent five, it goes through those. Or if you want 10, it goes through those, right? Notice also you can do other things. By default, I think, I don't think it lists it here, but let's say list Hugo page by date or something like that. So one thing you'll notice here, well you might not notice because you don't know how my website works. But by default, it's actually looping through these kind of in a date order, right? So this is, these are like the most recent articles that I've made. And if you go back further here, these are like the oldest ones, okay? So by default, it's actually looping through these kind of by dates. But if you look at the Hugo documentation, I want to say, I think it's in this page. I think it's in this page. What it's actually, oh yeah, here. So it's actually looping through by these variables. It's looping through by weight in all my pages. You can set custom weights for pages in Hugo. I don't have any custom weights, so it's kind of ignoring that. Then it sorts it by date, then link, title, then file path, right? But you can change this by putting in things by like by weight or by date specifically. So let's actually do this. Let's say by date at the end of regular pages. And you'll now see what it's actually done is it's now linking them, well now it's looping through them. But it has the things that are most original at the very top, whereas most recent down here. And we can reverse that. We can reverse that saying reverse. We got a kind of long command here. But so that's just, if you want to customize, you can put by date, you can put by publish date, a bunch of other things, length, oh that's an option. Let's do that. So let's say by length. So you have a couple of different options, even before we get into the kind of stuff that you can do. What exact way you want to go through these by, right? So this is by length. These are the shortest. These are the longest. You can flip those around if you want by putting reverse, blah, blah, blah, blah. So I'm going to leave that as it is right now. I'm actually going to make more changes to this, I think, at the end of the video. But let's just get to the content, the meat of the page variables, really. So as I said, now that we've dealt with our range, we're going to say we're happy with this right now, we can use these different page variables to refer to stuff in the page. So for example, title, we already have here, title prints the title. We can also, if we wanted, we can include the entire content of the article with content. And that will list out literally everything. But really, I'm going to put summary. Now what summary is, I talked about this in the previous video. It takes kind of the most, the first content of that page and estimates where you want it to end, basically just gives you a snippet of it. So that's what we're going to use for our preview. So actually already it looks okay, but we need a couple things. Actually we don't have any links to the actual pages, so we got to put those in. So I'm going to probably want, you might want two kinds of links. And we're just using normal HTML syntax here. So I'm going to want to put a link, let's say we're going to make our titles a link here. And what we'll need here is there's a link here that's like permalink, okay, rel permalink, right? Actually we can go ahead and put it in whatever. I don't need to show it to you in the documentation. Rel permalink. And that is going to refer, we can key over these, right? Or we can click on them and see that they're actually working. This is the actual link, the relative link within the site. You can actually see it in the source, let's see. I think if you just put permalink, it's including like the domain name, which is kind of funky or whatever. Actually let me just double check that. It won't make a different in function, but it's kind of ugly on this site. Yeah, so it puts like the full domain link. But so I prefer to link things with rel permalink because honestly it looks trashy if you do otherwise. And I don't know, maybe it depends. I don't know how like browsers or whatever call it, but it might be less efficient. Like in turn, it might be making more DNS queries. I don't actually know about that. Someone who knows more about how that stuff works could probably say. Either way, so we have links here. But let's say we want something at the end that's like read more. That's a pretty common way to have a little link here. So I'm actually going to copy this. Let's put it at the end of the summary. Let's put in read more. So now we have two little links per article. And of course we notice that you can style this in whatever way that you want. So I could put this in article tags. I'm a big fan of semantic tagging. I know I said this. I know it's totally soy dev, but I like it. Or you could put in line breaks, horizontal line, horizontal rules or whatever they are. So you can style this in however, whatever way you want. It doesn't matter. I'll actually get rid of these so it's not left in the way. But here's the tricky thing about the read more thing. Here's something to think about. If we scroll down, here's a really small post. And this is just, now technically speaking, if we click on read more, we're not reading more. We're only looking at the content that is already here. There's no extra information. So if you want to be a perfectionist about this, one nice thing about the page variables is there's this cool little variable called truncated. So what truncated does is, in the page, if the summary is a truncated version of the article, that is if it doesn't contain all of the stuff, this variable returns true, otherwise it returns false. So let's actually use this. So what we can do here, what we can do before this read more thing, we can say if truncated and then after it, we can say end. And what that is going to do is for each article, instead of just printing that stuff, notice that the read more has now disappeared from this page. It was a liar anyway, right? Because we're not actually reading more. But what this is doing here is it's saying for each of these pages, if the summary is a truncated version of the full article, we will have the little read more link, otherwise just end, right? We don't need to go through it. So that's a nice little feature to have as well. So let's start putting some more metadata in other stuff in here. There are a couple of things we can have, for example, a word count. That's kind of nice. People like having those sometimes. I don't know if they're a low attention span and they don't want to read 1,000, 2,000 words or something. At the end of this, we could put another break here and say, let's just say word count. Word count, maybe I should put it in some kind of, I don't know, heading or something. I think it's kind of ill-advised to put that in a heading. Who cares? We're just not gonna say. So we're gonna say word count words. Okay? Oops, what did I do to, oops. It's not two words silly. And it's, yeah, okay. So now you'll see in each case, Hugo, because it's so smart, it has put a preview of all of the different words. However, many words you have in each article. So you can say, oh, this is nearly 1,000 words. This is over 1,000 words. This is five words. Right, nice and simple. Okay? And I wanna say, I know nowadays people, a lot of sites will have like that minutes estimator. I mean, do they have something like that? Oh, reading time. Okay, I didn't even think. I was gonna suggest like, oh, you could probably script this in. But I guess, let's see. I guess Hugo has this. Let's see what that looks like. So one, I guess that's minute. Yeah, okay, so yeah, we can, okay. I didn't even know that. See, I'm learning stuff in this video. Wow, this is fantastic. So if you don't like that, you can say, reading time, minutes, read. Okay, so now one minute read. One minute read. 10 minute, oh, that's cool. Wow, that's cool. 13 minute read. That's, oh, okay. I'm happy that I found that. I'm glad that I thought of that in this video. Let's see what else. Let's see what else. So anyway, let's put dates. Dates are pretty common as well. Obviously, especially if you have time-sensitive stuff, you wanna have some kind of date. So we can actually go up here. Let's go, let's put date at the beginning. Why not? I don't know. Notice that I'm not like, people complained in the last video, well, this site looks bad. Why aren't you styling this? Because this isn't a video about CSS. You're a big boy. You know how to use CSS. Same thing applies here. Don't complain about how, I'm showing you how to do things within a script. I'm not telling you, you know, whatever. How to beautify it, because I don't care about that. That's your job. You're supposed to be a professional developer, aren't you? So anyway, if you put in date, you will now see that it actually prints out this massive date thing that actually includes the exact time. And specifically, I wanna say this is the exact time that when you first create the article and it puts that date in the metadata. But here's the thing is, you know, this is ugly, obviously. So we'll probably wanna format this in a different way. Actually, let's just make it bigger just for this video. Instead of having VR, yeah, let's bite the bullet and put it in like a heading tag. I don't endorse doing that in real life, but in whatever. For the video, it makes sense. So what you can do with date, actually, is date has this sub command called format. And then you can provide a format for what it looks like. And Hugo is nice and intuitive. I know that when people are using date on the command line, dude, I have to look up what all of these symbols mean. Oh my goodness. I totally forget. Oh, is M like, is lowercase M month? Or is it, you know, whatever. Who cares? You know, who cares? But in this case, what you can do, Hugo. So the thing you have to remember about the date format command is that there's a very special date. And that is January 2nd, 2006. I don't know why they chose that, but what you do is you take that date, let's say January 2nd, 2006, and put it in the format command. And based on how you format that date, it will format all the other dates. So for example, I said Jan, therefore all of these months will be abbreviated. Next I have the day, and it's gonna be after that in the year. I mean, we can move this around if you're in one of the many countries where the day's in front. You can put that in front. Or notice also, so on days that are one digit, if we get rid of this initial zero, they will disappear there. We can say, you know, January, write out the full thing, and it should write out the full date here as well. Notice also, if you use any other date, if you say December, that's not gonna work. It's just gonna interpret that. It's not gonna parse that as a date. It's gonna just put December in there, right? So that is one tricky thing about it. But yeah, that's just how it works. And yeah, I think there's probably some official time to put in there as well, if you wanna include time in there as well. But you know, just know the important thing is like, if you change it to some other number, it's not gonna work. So like in this case, you know, if we change the two to something else, the like days, what looks like the days of the month is actually using the final, you know, of the 2006. Like it's using like the years of the day. So either way, January 6th, or January 2nd, now I'm confusing you, January 2nd, 2006. That is the right date. All right, so now we have actually, like if we look at this file, okay, look how simple this file is, okay? Look at it, all right? We just got a couple of lines, and we have a lot of content. We can already include reading time, word count, the name of the article, what it kinda looks like, give people a preview of it. And I think you can also put, you should, I'm not entirely sure how to call these, actually, you should be able to put tag names as well. Let me actually try. You might have to say params tags, because I think that's how tags work. Yeah, I don't know. There's definitely a way to, oh yeah, okay, yeah, yeah. Okay, here they are, yeah. Let me move them above that line. So you can put params tags, and that can include the tags as well, so we can say like, let me add in some more breaks, tagged with blah, blah, blah. And I know there's a way to change, let's see, how do you get rid of the, there's some like delimiter function, maybe like delim comma, I'm making things up if things break. Okay, I'm gonna look this up, I'll be back in one second. Okay, I see how to do it. I did it in my header file, or I think someone else like PR'd this, because originally it was just like using the ugly format. All right, let me explain what this is doing. I'm just gonna like paste it in, because we haven't talked about with yet, but I guess, again, it's a learning moment. Let me get rid of this, tagged with blah, blah, blah. Okay, so now you'll see it says tagged with technology comma, software comma, crypto. Okay, so what it is doing here, actually what we should do, well, I'll explain what's happening first. So what it's doing here, so with how with works is it gets a variable, and it can be anything, it can be a parameter, it can be like, it can be truncated or something like that. And then it performs the stuff that is before the end. Okay, so it puts this delimited by, there's, you can look up the delimiter command, but it puts those with commas delimiting them. So with how that works is if there is no content there, it just like doesn't print it out, right? So when I, I'm gonna do a video on like giving arguments to a short code, probably the next video, and that is gonna, it's gonna have with all over the place, but it just know that that works. Actually, okay, let me think about this. So this is like looping through, let me think. So in this case, if we don't have a tag, we still have tagged with. So what we wanna do, I think, is let's get rid of this and put it in here. I think, was that gonna work? Yeah, okay, yeah, yeah. So in this case, in the articles that don't have tags, you're not gonna have this because it's gonna do with parameters tags, and if there's no tags, like it's not gonna input this text, in input this text tagged with. I'm running out of juice to say words at this point. Either way, computationally, okay. So our site, if we look at our site, it's actually very ugly right now in terms of like, again, I haven't done any styling, but look at this stuff we're doing. Look at this stuff with this little file that's basically 20 lines, less than 20 lines, and could be slimmed down. We already have this pretty, we have article previews, we have words, we have read counts, all of this stuff that is built in that you go and we can so easily add and extend. Oh, actually, you know what I should do. I'm not gonna do, I'm gonna draw this article to a close, but what you could do is each of these tags has a link to the tag itself. So you just put that, that's another thing for you. Try that yourself, try that at home, kids. So yeah, this is the kind of stuff you can do and you can customize it to your own liking. Like this is, you know, a lot of, if someone is using like some dynamic WordPress site that's taking a million years to load, this is the kind of stuff they're using WordPress with and you don't even need it. Like this is something that Hugo does absolutely automatically, absolutely fantastic. So, oh, I need to fit it. I haven't finished and put up this article. I need to finish that. So yeah, I'm gonna draw this article to a close. I think in the next video, I'm going to talk about short codes again because you can script them, but as I said, let me give you a preview. I kind of gave you a preview actually in the last video. Well, I may have said what I was gonna do, but I might, we might either use this or we might use another one, but I'm gonna talk about how to create, not just have short codes, but have short codes take arguments so that you can do really complex stuff, like make very complex HTML without any kind of effort. You know, you just, when you're writing text, you don't have to worry about it. So that's about it. Hopefully, that's given you a view of the kind of stuff that you can do in Hugo, and I'll see you guys next time.