Articulate is a free Umbraco package, using it will be quicker and easier than building something custom. Out of the box, Articulate comes with a few themes, however, if like me you want the style of your blog to mirror that of the rest of your website, you will likely want to create a custom theme. In this tutorial, you will learn how to do that.
If you are new to Articulate, I suggest you read this tutorial first. After you have it installed, we are ready to get cracking:
How To Create A Custom Theme With Articulate
Provided you have installed Articulate in your webroot you should see the following directory '\App_Plugins\Articulate\Themes\'. This folder, as you can probably guess, contains all the Articulate themes.
To create a custom theme, create a folder. The name of the folder will be your theme name, so you will want to make it meaningful. Within here create another folder called 'Views'. In here you need to create two views, 'list.cshtml' and 'Post.cshtml'. List.cshtml view will be the file that will render out the listing page. Post.cshtml will be used to render out the posting page, as you can see below:
The purpose of this guide is to get you up and running with a custom theme and not to teach you how to write a template from scratch. Instead, I'll quickly share with you the basic HTML to get you up and running.
In the template, you convert the IPublishedContent into a ListModel object. After that, you can access the various properties how you see fit.
The HTML for a blog post page is usually a lot simpler:
Here we do a similar thing as we do in the list view. Convert the IPublishedContent to a PostModel and then access the properties as needed.
Applying Your Theme
Within the Umbraco backend, create/open a new page using the 'Blog' document type.
In the 'Tab' section, you'll see a 'Theme' section. In this list, you should see your theme (based on the folder name). Select that and save the page and your theme will now be applied. Simples!