CMS newbie question regarding list of links

Design help CMS
1

Hi

I’m using the CMS for the first time and just wanted to check the best way to build a list of links on an article. Please see this two minute video below…

Many thanks for any help.

Graham

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

2

If you want to use up available fields then your approach is one option. I would just create one rich text field to represent all the links in an ordered list the problem will be lack of ID
s to target so you would need to use data attributes. You could also use custom code within the new RTF as an embed. Another approach is to create the whole thing with JavaScript making it dynamic. Of course, you would need to write the code or hire someone to do it. Scripts like tocbot basically create a dynamic table of contents so you could review that as an option.

3

Hi @webdev

Thanks for your very helpful feedback. I’ll have a look at using rich text field / data attributes.

Cheers, Graham

4

Hi Jeff,

I’m trying to implement this but a bit stuck about how to link using data attributes. If you could help advise me how to do this, I’d be very grateful. Please see this short video and share link below…

https://preview.webflow.com/preview/semh?utm_medium=preview_link&utm_source=designer&utm_content=semh&preview=40abbf0ec7016c9018e7676b025fdd2d&pageId=6202a8d06a7d7ec40637ea60&itemId=6202a8d06a7d7e6be137ebac&workflow=preview

Many thanks, Graham

5

You can’t link to a data attribute but you can write code that loops through elements that have a certain attribute, then add an ID to each element, which would give you something to link to. Custom code.

6

Oh I see, thanks for explaining Jeff.

In that case, I’ll probably just stick with my original solution for now I think. Many thanks for your help though!

Best wishes, Graham

7

I just double checked CMS bound rich text fields and there is not option to add data attributes like there is on unbound RTF’s. However, you can insert custom HTML as many times as needed, inside a bound RTF. So you could add headings with and ID attribute of one, two, three, etc… and link to them via a manually created list. Probably not editable from the editor. You might be better off using tocbot or similar script for dynamic tables of contents.

This one looks easy to implement - > gadzan/generatoc: Automatically generate table of content from heading of HTML document (github.com)

8

Hi Jeff,

Thanks for your feedback on this. I’m not the most technical so could you confirm if I’ve got this right please…

1 - Add this to code to the <head> of all pages…

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/generatoc/build/generatoc.min.css">

2 - Create a div and give it an id of toc. <div id="toc"></div>. To which part of the page do I add this though?

3 - Add this javascript inside <script> tags to the <head> of all pages, beneath the css in 1 above

// JavaScript
import generatoc from 'generatoc'
const content = '.post-content'
const heading = ['h2', 'h3', 'h4', 'h5']
const selector = '#toc'
generatoc.init({ content, heading, selector })

4 - In 3 above, edit const heading to contain only the headings I want to link to.

Many thanks,

Graham

9

Hi Jeff and anyone interested…

I’ve just found this video by PixelGeek which seems to do what I’m looking for:

Thanks, Graham