Point: What is Studio CMS?
Studio CMS is a Content Management System (CMS) feature that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can manage frequently updated article content like blogs and news in one place.
For more on how Studio CMS works and how to get started, check out the articles below.
Adding a table of contents to a CMS article item
In items of the Studio CMS Article Type model (CMS article items), you can insert a table of contents anywhere within the body.
The table of contents is generated automatically based on the heading tags set in the body text.
In the CMS dashboard, open the CMS item detail editor for the Article Type model you want to edit.
Place your cursor where you want to insert the table of contents, then click the [+] button that appears on the left side of the body editor.
Select [Table of Contents] from the options that appear.
If you've set H1 to H3 heading tags on text within the body, those headings will appear automatically in the table of contents.
* If there are no heading tags in the body, only the table of contents block will appear without any text.
* H4 to H6 heading tags will not appear in the table of contents.
Adjusting the layout and appearance of your table of contents
Just like other elements, you can adjust the layout and appearance of the table of contents block and its text.
These changes are made in the Design Editor.
In the Design Editor, open the CMS article page (Dynamic Page) where your table of contents is placed.
Select the table of contents block within the Rich Text Box.
Open the [Content] tab in the right panel.
If the panel is closed, open the right panel first.
Under [Typography] in the Content tab, adjust the color, font, size, line height, and other settings.
If you're editing a site that's already live, update the site. Your changes won't appear on the live site until you do.
Things to keep in mind
You can't add other elements like icons or images inside the table of contents block.
By default, a "hover" conditional style (lowered opacity) is applied to the table of contents text.
Any "hover" style set on links (<a> tags) within the body will also apply to the table of contents text.