I’ve been trying to figure out how to do this without having a whole bunch of different collections (eg half-marathon-training-plans, 5k-race-guides). We currently have a need for 28 “categories”, and I’d rather not have to manage 28 different collections (and therefore 28 different templates).
Another requirement is to display all the articles that are within that “category” in a sidebar on an article page. So all the articles from the “5k-training-plans” category will be listed on that page for quick access.
I know it would be possible with a url structure like /blog/{article_slug}?category={category_slug} as we could use the Finsweet CMS Filter for that based on the url query, however they are after something more like /{category_slug}/{article_slug}.
Can you think of a way to do this without creating a collection (and therefore each page) for each category? I’ve tried:
Pulling in a single article based on url components (eg /{category_slug}/[article_slug} but I can’t figure out how to filter based on url path components
Looking into changing permalinks or adjusting url-rewrite settings like we could do with nginx or a custom solution. We recently moved from Wordpress to Webflow, hence the permalink language.
I was hoping CMS Element might be able to help, but I don’t think so
Looking at using the Attribute API directly to pull in data from /{category_slug/{article_slug}, however we’d need that page to not throw a 404 error.
Using a single collection template for multiple collections, but I don’t think this is possible in Webflow.
Perhaps there’s a different solution out there that I haven’t thought of. Or, maybe I’ll just need to bite the bullet and manage 28 different collections.
Hey @taren! I am not sure if this setup is possible with CMS Filter and I’ve not seen a setup like this yet.
I did ask ChatGPT for a suggestion on how to do this and the suggested solution seems to be what you are looking for. Here is the answer
Set Up a Single Collection for Blog Articles: You can keep your existing Blog Articles collection as it is. This collection will hold all your blog articles, regardless of their categories.
Create a New Collection for Categories: Create a new collection called “Categories” where you define the categories you want to group your articles into. Each category item should have a name, a slug (used in the URL), and any other relevant information.
Add a Reference Field: In your Blog Articles collection, add a reference field called “Category” that links each article to a category from the “Categories” collection.
Update Template Pages: You will need to create a template page for your Blog Articles. In this template, you can display the article content and use custom code to fetch and display related articles in the same category.
URL Structure: To achieve the desired URL structure (/category-slug/article-slug), you’ll need to use Webflow’s URL rewrites. You can set up URL rewrites to direct requests for /{category-slug}/{article-slug} to the template page for your blog articles. This can be done in the Hosting settings of your project.
Custom Code for Filtering Articles: In the template page for your blog articles, you can use custom code (JavaScript) to filter and display articles that belong to the same category. You would extract the category slug from the URL and use it to filter articles in the same category from the CMS.
Here’s a simplified example of how the JavaScript code in your template page might look:
htmlCopy code
<script>
// Get the category slug from the URL
const categorySlug = window.location.pathname.split('/')[1];
// Use the category slug to filter articles
const articlesInCategory = {{ collectionName.filter(item => item.Category.slug === categorySlug) }};
// Loop through articles and display them in the sidebar
articlesInCategory.forEach(article => {
// Create HTML elements to display article links
const articleLink = document.createElement('a');
articleLink.href = `/${categorySlug}/${article.slug}`; // Create the URL for the article
articleLink.textContent = article.title; // Use your actual field name here
// Append the link to the sidebar
document.getElementById('sidebar').appendChild(articleLink);
});
</script>
In the above code, replace collectionName, Category.slug, article.slug, and article.title with your actual collection and field names.
By following this approach, you can maintain a single collection for articles while still achieving the desired URL structure and category-based filtering. It requires some custom coding, but it’s a flexible solution that avoids creating a collection for each category.
That all sounds pretty good except for the URL Structure part. I can’t find rewrites anywhere within Webflow settings, I can only find redirects which doesn’t really solve the issue as it redirects to a different url, rather than rewriting it
Hey Taren! I believe the correct term for rewrites is actually the redirects, ChatGPT might have confused terms there. You’d need to manually add the redirect to each blog and then use JS to rewrite the URL without redirecting the user.
So /{category_slug}/{article_slug} will redirect to /blog/{article_slug} then with JS you can change the URL back to /{category_slug}/{article_slug} without reloading the page. I’ve found some resources on how to rewrite the URL without reloading page/redirecting the user:
Thanks Luis. That seems to be a bit of a hack (and meaning the user will have to tap back twice to go back), so looks like this is a Webflow limitation we’ll have to deal with.
