Screencast Guides: Introduction 2/3

Adding a Blog to your site

Transcript

Hi this is Pascal from cykod and this is the second in a series of three introductory tutorials about the Webiva content management system.

In this tutorial we’re going to pick up where we left off in the last tutorial where we have our little site tree and we’ve got an about us page, blog page and contact page.

Now we’re gonna go in and add a blog page today, in this tutorial.

So the first thing we’re gonna do is reach up in to the options page, go to module setup. Normally if this was a new blank website you’d have activate a couple modules, in this case the blog module and its dependency the feedback module are already activated.

So because the blog module is activated we can jump right into the content page, create a new blog, give it a name, ie Bijou Blog, and click ‘Create Blog’. This will take us into the blog management interface where we can, right away, just post a new entry: Blog post, Interesting. Lets give it a title, lets give it a category or two. Lets give it an image. Lets paste in some lorem ipsum text, just to give ourselves a couple of initial blog posts. We could adjust the publication status on the side, select published and click ‘create entry’.

Now lets add in one more entry. Lets see, another awesome post, give it a different image. Cool category. Just go ahead and post in the same lorem ipsum text. Now I forgot to publish it but I can publish it right here from the page interface.

Alright so we created a couple quick blog posts, some dummy text in there. Actually I want to jump to ‘Website’. Now we’ve added the content model of the blog but that doesn’t necessarily mean we’ve added it into the website. So what we need to do is an in a list page and detail page of our blog and now we’re going to go in and add a couple specific paragraphs to those pages to be able to display our blog.

Now one of the nice things is that because Webiva works with paragraphs we can add whatever we want for static text around the dynamic paragraphs and style that however we want.

So now we add an H1 header and then just jump in and add in a ‘Blog Entry List’ which is going to show a number of different blog posts and see its already got some stuff in there. You need to pick a couple of options. You need to pick a detail page. Now we’ve done it we need to add our blog into our site.

Now if we were to go to the blog and see, you’ll see it’s added in, its got some default styling to it, but you’ll see if you click on a page its going to say ‘Page Not Found’ because we haven’t added in a detail page.

So lets jump into the detail page, get rid of this ‘Basic Paragraph’ because we just don’t need it. And lets add in a ‘Blog Entry Detail’ Once again we’re going to select a couple of options; which blog we want to show, link it back to the list page. And there’s one more thing we need to do, we need to set up page connections. Page connections are a little bit of an advanced feature, but one way to understand them is that you have to know which blog to display and the paragraph needs to know where it should look for the permalink. we’re just telling it to look at the additional page argument. So if we click on save changes and now we click on, blog post, there we go, we’ve got a blog post.

Now lets say you don’t like how the default blog post is styled. You can just create a new style, you’ll see we’ve got a little bit of specialized feature code right here. If you want to see what tags are available you can see all the customized cms tags that you can use.

So what we’re going to do is jut move some information from the bottom to the top. We’ll change this H3 to and H1 tag. You know we’ve got this blog info class right here we can add in some custom css and make it look a little better.

Blog info, maybe make it gray and give it some padding. Then you’ll see when you click ‘Update Paragraph’ back here, its going to update our blog post to a new style.

Our blog post is missing comments, to add those in you can come here and select a comments paragraph. You’ll notice the blog post isn’t actually connected with comments. Comments are something separate. We can add a comments paragraph to a whole bunch of different paragraphs on the site. Add a couple options. All we’ve done so far is add it on the page. Now we need to tell this paragraph what its connected to. So we go here to the comments content id, select the blog entry detail, click ‘Update and Close’, click ‘Save Changes’.

Now if we jump back to our post we’ll see that now we’ve got a comments paragraph down at the bottom. We can click ‘Add comment’ and it will get posted here at the bottom.

All the comments from anything that you add a comment paragraph to will show up here in ‘Content’ -> ‘Feedback’. There it is we can approve it, reject it, whatever you want to do.

Alright well I hope that kind of showed you a little more of what the system can do, the next tutorial will go into how to add a custom contact form to your site using the custom content model system. That next tutorial should be coming up quickly.

Again this is Pascal from http://www.cykod.com and I hope you’ve enjoyed this quick screencast.