How to perfectly structure your blog categories and your blog articles?

Design help CMS
1

Hello everyone,

First, I wish you a happy new year.

I need your help because I think I do not correctly understand how the referencing across collections work.

Let me elaborate :

We have 1 website with a blog. Until now, we were publishing articles on 1 category only.

So we had:

  • Category A
  • Article A.1
  • Article A.2

CMS-side, we have 3 collections:

  • 1 Collection list for authors
  • 1 Collection list for Categories (with only 1 entry as the content we were publishing so far was related only to one category (Category A))
  • 1 Collection list for Articles (this one includes 2 multi-referenced fields (one being the authors, the second one being the categories)). Each Article’s collection page includes a reference to the category and few references to the author.

So, we have the following structure mydomain.com/blog/category-A/article-A.1

Now, we are starting to write on other topics. So, we need to create

  • Category B
  • Articles B.1
  • Articles B.2
  • etc.

So far, I have created an entry for Category B in the Categories Collection list. And I added Articles B.1 and Articles B.2 in my article collection list and link it to the Category B.

But, it looks like I can’t have the collection page of categories displaying only the articles related to the category. Meaning:

  • mydomain.com/blog/category-A → displays articles from category A
  • mydomain.com/blog/category-B → also displays articles from category A
    And, if on the Category Collection Page, I add a filter, it changes for all entries of the Category Collection Page (thus the issue above).

So, how do you make sure that the Category Collection Page of the Category B only pulls out Articles attributed to Category B (from the Article Collection List) on the page mydomain.com/blog/category-B ?

I’m sure I’ve missed something basic somewhere, somehow. But I can’t figure out what…

Cheers!

Here is my public share link: LINK
(how to access public share link)

2

Hi Quentin, a few things to help;

First, always include the readonly link to your project, it’s far more useful to see what you’re talking about and the details of your CMS setup matter a lot.

Second, in general use single-refs rather than multi-refs when you can. Do you really need more than one author per article, and more than one collection per article? If yes, then it’s ok, but you’ll find there are a lot of restrictions in list binding, filtering, and sorting that are difficult to work around.

Third, on the urls, this won’t work;

mydomain.com/blog/category-A/article-A.1

Webflow publishes as /collection-slug/item-slug, always.

And last, on your Category page, place a collection list bound to Articles. Filter it to where the “Article’s Category is Current Category”. That will restrict the articles to those which reference the current category.

I believe that should work for multi-ref fields fine as well, but if it does not, try a single-ref from Article → Category.

3

Hey @memetican,

Thank you for your reply.

Regarding the URL structure, I know. It was just to illustrate the “logical path” :slight_smile:

Anyway, I realized that if I want to have proper URL like mydomain.com/category-A/articleA-1 and mydomain.com/category-B/articleB-2 it won’t work as the Articles have an already determined parent path that can not be dynamic.

So, I will need to have 1 collection list for all categories + 1 collection list of articles per category.

Did I get it right?

4

Two collections, only - Articles and Categories.

How you arrange collection lists depends entirely on the layout you’re trying to achieve. I can’t guess that without your site links and project read-only link.

One of the more common design patterns is;

  • Top menu contains a drop-down CMS collection list of the Categories, pointing to the Category’s collection page.
  • Category collection page contains a collection list of Articles, filtered to the current Category.

You can extend that in all kinds of ways to improve the navigation UX and SEO.