I have a basic blog and I would like to be able to display blog articles on different pages based on a category assigned to them. For example, Blogs with the category 'nutrition' would appear on the nutrition page and blogs with the category 'fitness' would appear on the fitness page.

I've created the doc type for the category. The alias is blogCategory

I understand I can accomplish this using a partial view. I already have one for displaying an overview of a list of posts. I'm hoping I can just modify this one to do what I want?

I'm not a developer, I do front end development so this stuff is hard for me to do on my own!

Here is my blog overview partial. Thanks in advance for any help!

@inherits UmbracoTemplatePage
@{
    // Model.Content is the current page that we're on
    // AncestorsOrSelf is all of the ancestors this page has in the tree
    // (1) means: go up to level 1 and stop looking for more ancestors when you get there
    // First() gets the first ancestor found (the home page, on level 1)
    var homePage = CurrentPage.AncestorsOrSelf(1).First();

    // Find all pages with document type alias umbNewsOverview
    // We do that using the plural, umbNewsOverviews (note the extra "s" in the end)
    // Then take the first one, as we know there will only be on news overview page
    var newsOverview = homePage.umbNewsOverviews.First();

    // Similar to above: find all pages with document type umbNewsItem under the news overview page
    // Then order them, first by publishDate (a property the editor can explicitly set on the news item)
    // and then by createDate, which is set by Umbraco automatically when a page gets created.
    // Finally, take the first 5 items to show in the news overview
    var newsItems = newsOverview.umbNewsItems.OrderBy("publishDate desc, createDate desc").Take(5);

    // If the editor has not explicitly provided the "Page title" property page 
    // then just show the name of the page otherwise show the provided title
    var pageTitle = string.IsNullOrWhiteSpace(newsOverview.Title)
        ? newsOverview.Name
        : newsOverview.Title;

    // The newest news item should be featured, so take the first one of the items we found
    var featuredNewsItem = newsItems.First();

    // If the editor has not explicitly provided the "Page title" property page 
    // then just show the name of the page otherwise show the provided title
    var featuredNewsItemTitle = string.IsNullOrWhiteSpace(featuredNewsItem.Title) 
        ? featuredNewsItem.Name 
        : featuredNewsItem.Title;

    // If the editor has not explicitly set the publishDate property then show the create date
    var featuredNewsItemDateTime = featuredNewsItem.PublishDate == default(DateTime) 
        ? featuredNewsItem.CreateDate 
        : featuredNewsItem.PublishDate;
}

<!-- Blog -->
<section>
    <div>
        <div class="row">
            <div class="col s9">
                <div>
                    <!-- Featured Post -->
                    <article>
                        <header>
                            <h3><a href="@featuredNewsItem.Url">@featuredNewsItemTitle</a></h3>
                            <span class="byline">@featuredNewsItem.SubHeader</span>
                            <ul class="meta">
                                <li class="timestamp">@(featuredNewsItemDateTime.ToString("f"))</li>
                            </ul>
                        </header>

                        @if (string.IsNullOrWhiteSpace(featuredNewsItem.Image) == false)
                        {
                            <a href="@featuredNewsItem.Url" class="image image-full"><img src="@featuredNewsItem.Image" alt="" /></a>
                        }

                        @Umbraco.Truncate(featuredNewsItem.BlogContent, 200, true, false)

                        <a href="@featuredNewsItem.Url" class="button">Continue Reading</a>
                    </article>
                    <!-- /Featured Post -->
                </div>
            </div>
            <div class="col s3">
                <div>
                    @{ Html.RenderPartial("umbLatestNewsWidget"); }
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /Blog -->