How To Setup An Articulate Blog Package To an Existing Umbraco Layout
It is easy to install and powerful to use; upon installation, preinstalled themes are also automatically included. However, further customization for getting blog themes and templates to work with already-existing Umbraco templates may be confusing for first-time users. Therefore, to make life a whole lot easier, here are the steps to successfully make your Articulate blog share your Umbraco website’s exact look and feel.
Install the package.
You will then notice some new folders and files underneath the “\App_Plugins\Articulate\Themes\” directory. All Articulate theme files will be within that directory and that is where we will be focusing on.
Creating A Theme
Under that same “Themes” directory, create a new folder with the name of your theme and then create a “Views” folder under that newly created folder. As the end result, you should have “\App_Plugins\Articulate\Themes\ExampleTheme\Views\”, assuming the theme name is “ExampleTheme” in this demonstration.
Then, create two view files under that “Views” directory, called “List.cshtml” and “Post.cshtml”.
Lastly, we need to use this new theme within the Blog node, from Umbraco’s “Content” tab. To do this, select the top-level “Blog” content and navigate to the “Style” tab. You should see the newly created theme automatically added as an option. Then save and publish with the appropriate “Theme” property to use.
Allowing Compatibility With Umbraco Views
In order to have an Articulate view successfully reference an existing shared layout, the “Model” object (across all Umbraco and Articulate views) must be used correctly and have the proper type. Ensure all referenced Umbraco views (shared, partials, etc.) utilize this new inheritance:
Rather than the usual inheritance (replace as needed):
Connecting Articulate Theme With A Shared Umbraco Layout
Similarly, Articulate views will need the proper inheritance and types.
This is how the List.cshtml view should look like:
This is how the Post.cshtml view should look like:
Notice the explicitly typed inheritance statement and also the casted “articulateModel” object. “articulateModel” is casted respective of the type of Articulate view model. From here on, that object would be used as the “Model” from within each of the Articulate views.
Based on what we have already, this is the syntax for retrieving the blog post’s name within the Post.cshtml view:
Here is an example for retrieving a list of blog post names within the List.cshtml view:
Now your blog should successfully share your Umbraco website’s layout! Also, don’t be afraid to utilize partials as needed. Blog post away!