Is there a way to automatically show all CMS items as links on one page?

Hi everybody,

Does Webflow offer a way to automatically show short summaries and links to CMS items on a page (simialr to an RSS feed but as an actualy page)?

the goal would be that this page also auto updates as new CMS items get added.

Thanks!

Apart from the limitation to have a maximum of 100 items listed in a collection list, what you describe is a static page with a Collection List set to your collection, showing the info you chose to show, and linking to items pages. Isn’t it?

You can also type in the adress of your collection (that’s the URL of an item minus the item part) and add /rss.xml to it, you’ll get a XML of everything you’ve set up to show up in the RSS feed of your Template page.

1 Like

Hi Vincent,

Thanks for your help, really appreciate it.

The goal would be to show 1,500 or so items - it;'s a big CMS collection. All of them would just be shown as headline + link on a page.

Is there any way to expand the collection list beyond 100 items or auto-embed the RSS feed? Thanks

I know it doesn’t solve your problem but I just want to mention that you can easily manually craft such a list. (won’t be dynamic though)

The URL of you items is predictable, it’s www.yourdomain.com/collection/slug.

And you can export a CSV from your collection.

So load the CSV into Excel or anything like it, keep only the column for the slug, add the other part of the url in the column before, find a way to merge columns, forming the complete url, then you have your list of URLs.

From there, use the same method to build a complete HTML list of your posts, and use this HTMl on a static page in Webflow, with one or several custom code boxes.

You can embed the RSS XML but the results are very sad

http://candyshop-80fa55c7789a7d80c131d6385cedc.webflow.io/embed

If it’s really an important feature for your website, you can hire a coder to see if a javascript can read the XML on the fly, process it and populate the page with a nice and user friendly list.

You can also find all the links to the pages of your website in the Sitemap. Url is: http://candyshop.webflow.io/sitemap.xml you have to activate the sitemap in the SEO tab of your site’s settings.

1 Like

I did something with this actually - I call it “Dynamic table of contents”

The ToC will auto-update when I add a new page to this project: http://sandbox-666666.webflow.io

Could be modified to only show links matching a subfolder/template page.

3 Likes

Haha, here you go @webdes.

@samliew, this is cool, very useful, good job and thank you for sharing. I’m actually going to use it too.

This is a really smart solution, thank you.

Quick question: How do you style the result links? they always appear as white text on white background. Thank you!

PS: How did you get the code to show full, clean headlines as the anchor text? Thank you!

I merely stripped the hyphens from the links, and uppercased the first character of each word. Unfortunately this is the only drawback, as the sitemap xml does not contain the page title.

This is the part that does it:
var UC = function(v) { return v.toUpperCase(); };
and
v.replace(/-/g, ' ').replace(/\b([a-z])/g, UC)

If you need the sitemap xml does not contain the page title, probably create a wishlist request.

1 Like

Thanks, how do you style the results - the text just seems to be white (example page Unique Geek & Science Gifts - Cool Stuff to Buy 🎁).

I couldn’t find a fix for this in your Webflow example link. Thanks for your help!

@samliew If you have a second could you please help me with the question above? Thank you so much!

Your links are white by default.

Since all the links are within a div with class toc,

  1. Create a new temporary page

  2. Add a rich text component to the blank page

  3. Give it the same class toc.

  4. Double click to edit the richtext element

  5. Insert a link in the richtext element. The link URL doesn’t matter.

  6. Unfocus the richtext component

  7. Focus the link, select ALL links within richtext element toc.

  8. Style the link