FREELessons: 15Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Create the Main ”index.html” Template

With our layout template finished and the back-end set up to accommodate blog posts, we’re ready to start displaying our blog entries on the front page. In this lesson, learn how to code up the main ”index.html” template to make this happen.

2.4 Create the Main ”index.html” Template

Hi and welcome back to build the blog with Craft CMS. You should have now entered a couple of little test posts into your blog. So, I've just done three here. That's all you really need just a little bit to test what you're working on. In the front end, right now, you don't see very much because the index HTML template that's in the main folder is still just the default. So we're gonna need to edit that template to start pulling in our blog entries. So we'll go into our craft folder, the templates folder find the index.html file, and open that up for editing. First, let's just change the syntax, make things more readable. And we're gonna get rid of all of these comments, we don't need those. Now these two lines here are also no longer required. They were bringing in the content from that homepage single entry type. So we'll just get rid of that. And we also don't need this Recent News heading. Now what we're gonna do is work with this for loop that's here. In the default installation, this was pulling in just the headlines of the entries in the news channel. So we're gonna tweak that a little bit. Here, it's specifying that it wants entries out of this news channel which we changed into the blog channel. So we'll change that to blog, we do still wanna show the entry title and we do still want to link through to the entry itself, but we don't wanna do this in a bullet list any longer. We wanna have this as a heading. So we're gonna change these allied tags here to h2 tags, and we're gonna give it a class, Of entry_title. Now we also don't need these ul elements. We'll just tidy these up a little. And then under that we're gonna output our entry.body. Now, let's see what that looks like on the front end. So here is the foundation of our blog front end. We've got the title coming in and we've got the post body for each one of the entries that we have in our blog right now. This is not exactly where we need it to be yet, because we still have some mock up to add and a couple of extra features. But that's the basic functionality up and running. Right now we have the whole entry body showing up on the front page. But sometimes you have very long posts and you definitely don't want to have all the content of long posts loading up on the front page and slowing down your whole site. So what we're gonna do is set it up so that just the first paragraph of each entry shows up on this front page. So we'll jump back into our template. And we're gonna start creating in entry teaser, and we're actually gonna use this entry teaser or in multiple places. We're gonna be using it on our index page here but later on we're also gonna be using an entry teaser on our category listing pages. Now rather than writing all the same code out twice, what we're gonna do is create a partial template file and then we're gonna load that in wherever it's required. So what we'll do is just cut this code that we have here. We're going to head into our templates folder, and we're gonna create a new folder called partials. And this is where we're gonna store any partial template file that's designed to be used more than once. So now, we'll create a new file, an HTML document. We're gonna add an underscore at the start which is a standard way of indicating that something is a partial file, that's not to be loaded directly. And we're gonna call this entry_teaser and we'll open that up for editing. And then we'll paste in the code that we just took out of our index page. Now to load this partial in to our index template, we're just gonna add, include. And then all we need to do is specify the path to the template that we just created. So we'll add _partials/_entry_teaser.html. And then while we're at it, we still need to have a main element. So we're just gonna include that. And now if everything is working, we should be able to go to the front end and refresh, and see absolutely no change. So now we know that our entry_teaser partial template is being included correctly. So now we can finish coding this up so that it does show just that first paragraph as a teaser. So first, let's just turn on our syntax highlighting. And now we're just gonna add a little bit of mock up before we move into coding up the teaser functionality. We need to wrap this in an article element, and we want it to have the class blog_entry And then inside that, we also need a div with the class entry_content. We won't be using this straight entry.body expression anymore, so we'll get rid of that. Now, we're gonna get all of the paragraphs in the body individually and we're gonna store them in a variable called paragraphs. So say set paragraphs. And then we're gonna use the split function that comes from Twig to split our entry body into paragraphs. So say entry.body split, and then in between the brackets, we're gonna put where we want to split that body. So we're gonna put a closing paragraph tag. Now whenever it finds that closing paragraph tag in the body, it's gonna make a separation, storing each paragraph individually in an array, under this variable named paragraphs. So now for a teaser we want the first of those paragraphs. So we're gonna create another variable this time we're gonna call it teaser. So say set teaser. We wanna get the first paragraph from our paragraphs variable. So we're gonna say paragraphs, First, and now when we split up a body into paragraphs it was split before our closing paragraph tags so we're gonna need to add that closing paragraph tag back on to the end. So do that, with ~, and then we're gonna add our same closing paragraph tag. Now we have the first paragraph stored in this teaser variable, and we wanna output it. So we're gonna output teaser|raw. Now let's have a look. And we should just see this first paragraph only. There we go, so now we've just got the first paragraph of each one of our posts acting as a teaser. The next thing that we're gonna wanna add is a read more link. We need to make it easy for a person who sees a teaser that they're interested in to click through and read the rest of the post. So below our teaser, we're gonna add a div for the class read_more. Inside that we're gonna have a link through to our entry URL, and we're gonna give this link the class underline_from_left. And that's gonna give it a little fancy underline effect that's in the style sheet that you're using. We want the URL that this links to, to be our entry URL. And then as far as the text for our link, we're gonna say Read More. And then we're gonna put a little right arrow. Okay, so let's see how that looks now. Right, so there's a Read More link with our little underline. And we're also going to apply that on the line to our heading. So just copy and paste that class into your heading link. And then finally we also just need to display the date of this post. So up above the title, we're gonna have div for the class .entry_date. Then inside that, we're gonna grab the .entry.postDate. That's just a default field that is available in all entries in a channel. Then we're gonna set its formatting with function date. So in here we're gonna put M d, Y. Now, let's see how our date looks. All right so there is a date and you can also see now that we've added the extra mark up that each post is sitting in its own little white box. So we've got our links coming through, we've got our teaser paragraphs, and everything is starting to shape up pretty nicely. But at the moment things are still looking a little bit plain, it looks nice but a little plain. And one thing that you can always look to to add more life to your site is images. So what we're gonna do in the next lesson, is add a featured image to each one of our posts. This is a functionality that's very common in blogs, and you're gonna learn how to add it in in the next lesson. I'll see you there.

Back to the top