در حال بارگذاری ...

Create News Collection0:42

We'll call it news, news and press, save and publish that, and let's go back to the collections. You'll see why we did that in a second. Next let's create a new collection, we'll call it news, and press I guess, we'll just call it news on the handle though. Actually newsArticles, and we'll have a simpler handle, how about that. Next we'll configure the collection, we're going to enable publish dates because every article should have a date that it's published. If the date is set into the future it'll schedule it, and then once it becomes that date, that entry automatically publishes. All right, past date should be public, future date should be private, that's how that works,

Mount Collection Routes1:25

entry automatically publishes. All right, past date should be public, future date should be private, that's how that works, that's default. Ordering, we don't need to worry about any of this stuff, we're gonna come all the way down here to the bottom, and we're going to go to this mount setting. Now mounting lets you take a collection and essentially bolt it onto another entry, and so that those URLs or any all the entries inside that collection hang off of that parent. Since we just created one, this news and press page, we're gonna mount it to that URL. We're gonna create a route rule, we're gonna use the mount variable and then the slug. So this way if we ever rename that parent page from news to let's say press or to blog,

Scaffold Views and Blueprint1:53

We're gonna create a route rule, we're gonna use the mount variable and then the slug. So this way if we ever rename that parent page from news to let's say press or to blog, all of the entries in this collection will automatically rename as well. Helps your content be a little bit more portable and future proof. Let's save, go back to the news articles collection, and we're gonna scaffold out our views. All right, so this will automatically create a news index and a news show template, so those stub files will exist now, and we can move on to configuring our blueprint. We'll keep this pretty simple. Let's create an author field, and for that we're gonna use the user field type.

We'll keep this pretty simple. Let's create an author field, and for that we're gonna use the user field type. Okay, we'll call this author, and we're gonna set maxItems to one because in this particular site, let's just assume you can only have one author. Next we're gonna have a big image, you know, at the top of a blog post, so we'll use the assets field. We'll call this featuredImage, maxFiles one, and this content we have a markdown field right now. Let's take this one step further and set up a barred field. This is our rich content field type, and we will come back to this later and spice it.

We'll set that to the main asset container. We'll enable the show read time, and that looks pretty good. We'll save this, and then we'll head back to the news articles area and create a new entry. So let's just do something really simple to make sure we get some output. There will be me. We'll skip the image for now and just put a little bit of text. Now let's go to our code editor and wire this up. You'll see we have this new news subfolder inside of reviews directory. We'll go to the index.

Build News Index Template4:23

You'll see we have this new news subfolder inside of reviews directory. We'll go to the index. This is where we're going to loop through and show all of the entries inside the blog. We'll start with just rendering anything. This is the first time fetching content using Statamic, and so let's keep it simple. We're going to use a tag, the collection tag, and we'll pass it the name, which is news. We're going to loop through the entries. Next, let's just add a div in the title field. Let's go back to the home page, go to /news, and we got a 404, and that's because we didn't tell the news page to use that template.

Let's go back to the home page, go to /news, and we got a 404, and that's because we didn't tell the news page to use that template. Let's go back to pages, go to news and press, go down here, template, news index, make sure the slug is news, save, and refresh. There we go. Hello world. We want to make that an anchor link. We can link to the individual URL using the URL variable. Now this should be a link, which will link to hello world. This should 404 basically be, it's going to use this show antlers template.

Now this should be a link, which will link to hello world. This should 404 basically be, it's going to use this show antlers template. If we put the title tag in here, hello world. There we go. So technically we've built the blog. That was only a couple of minutes, but it's kind of a terrible blog and it doesn't pull in any of the content, so let's take that to the next step. Going back to our code editor, I'm going to grab the static blog index template that I've built and let's drop it right here. Let's just comment this out for now so you can see what we're building.

built and let's drop it right here. Let's just comment this out for now so you can see what we're building. All right, we've got some blog cards here, we've got a header. Let's wire that up. First let's use the title of the page that we're on in case I ever need to change that. Next we're going to take this collection tag and we're going to wrap it around the list of entries. So let's take a look here. Looks like that is the wrapper. We can get rid of instanceTwo and instanceThree.

Looks like that is the wrapper. We can get rid of instance two and three. We're going to close our collection loop. We're going to update our URL. Here's the title. Here's the author. Here's the date. Here's the category. We're just going to leave that static for now. Let's refresh.

Hook Up Article Show7:39

Ta-da! All right, let's keep going. We have a really nice looking blog index. It's dynamic. It pulls in the date. It's everything we need to launch a site with. That's not the end. Now we need to hook up the single article view. Back to our code editor. All right, so now we need to do the show view which is basically empty except for the title.

Back to our code editor. All right, so now we need to do the show view which is basically empty except for the title tag. I have a static version of this page. We'll look at that real quick. Click on any one of these and we'll see a fully static article. So let's hook it up. By now you probably have a pretty good idea what I'm about to do next, but let's just keep going. Here's the H1.

This is the author image. So let's move this down here and we'll set this to authorAvatar and authorAvatarAlt. So probably break because I don't think we have an avatar set for our User. Do that in a minute. Add the alt tag here. And then replace this with articleContent. Refresh and see how well we did. Broken as expected. Image looks good. Content looks good.

Creating CollectionsManaging Blueprint fieldsScaffolding Front-End ResourcesTemplating

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟