As we all know, Squarespace does not have a table of contents block. However, there is a simple solution that is based on what Squarespace uses on its own website. Assuming you are already familiar with most Squarespace settings, I have simplified this article to make it as easy as possible.
Why It Is Important
There are at least two reasons why a table of contents might be important for your website. First of all, it is much easier to navigate through the page. You just can’t deny this fact. Some articles are 3000-5000 words, and if you don’t want to scroll through the whole article to find a piece of specific information, only Command+F may help. With a table of contents, the chances that your visitor would find the needed information is higher. Not even saying that it will be done much faster.
The second reason might not be that obvious as the first one, but still very important from the SEO point of view. When you google about something specific, Google sometimes may give you a link to the exact part of the page where this information is located. One of the reasons Google is able to do that is because the ID you add to your subtitle is one of the requirements for a table of contents. We will talk about that in the Anchor Links paragraph.
How It Works
Essentially, you need to create anchor links, then add custom HTML code that will be converted to a table with links. Squarespace already has everything required for that, so there is no need to write any code from scratch. We will be using the exact same CSS and HTML that Squarespace uses on its own website. For example, let’s open the Creating anchor links page. There is a table of contents with a simple and clean design that would work for many websites. We will make exactly the same table for our Squarespace website. You, of course, can adjust it to your own needs.
CSS Code
Now, using developer tools, we can find HTML and CSS used on the Squarespace website. CSS code goes to website settings and HTML code goes to a webpage or blog post. CSS is a one-time action and it would work for all the future tables of content you will be creating. To save your time, here is the CSS code I extracted from the Squarespace website:
.table-of-contents {
display: block;
background-color: #f5f5f5;
padding: 22px;
margin: 0 0 1em /*1em*/;
min-width: 30%;
/*max-width: 60%;*/
}
.toc-title {
display: block;
margin-top: 0;
margin-bottom: 1em;
border-top: none;
padding-top: 0;
font-size: 18px;
font-weight: 500;
line-height: 1em;
color: #444;
}
.toc-links {
list-style-position: outside;
list-style-type: none;
margin: 0;
color: #b8b8b8;
margin-bottom: 0;
padding: 0;
font-weight: lighter;
font-size: 15px;
}
.toc-links li {
line-height: 1.4em;
padding-bottom: 0.6em;
margin-left: 0;
}
.toc-links a {
text-decoration: none;
color: #737373;
}Anchor Links
The table of contents needs to know where it must send you to, and the anchor links would help with that. If you don’t know what an anchor link is, then the simplest answer is that regular links move you between pages, but anchor links move you inside the specific page.
In our case, we would need to “attach” an ID to specific parts of a page. For example, a subtitle would work best for it. So, instead of adding a regular heading title in Squarespace, you would need to add a code or markdown block and insert this line:
<h3 id="important">1. Why It Is Important</h3>Replace h4 at the beginning and the end to accommodate your needs.
One important thing – this ID must be unique across a page.
HTML Code
The final part is inserting HTML code that would be converted to a table and would be adjusted with the CSS we already inserted.
Basically, you would only need to change the title of your list and add/remove needed lines. The value of the “a href” must match with the Anchor ID we discussed in step 4.
<aside class="table-of-contents">
<span class="toc-title">Sections</span>
<ol class="toc-links">
<li><a href="#important">1. Why It Is Important</a></li>
<li><a href="#how-it-works">2. How It Works</a></li>
<li><a href="#css">3. CSS Code</a></li>
<li><a href="#anchor-links">4. Anchor Links</a></li>
<li><a href="#html">5. HTML Code</a></li>
<li><a href="#automation">6. Automation Solution</a></li>
<li><a href="#updates">7. Updates</a></li>
</ol>
</aside>Automation Solution
Now the most exciting part! What if you need to create a table of contents every day? There are many solutions. For example, you can use plugins or you can write an HTML code as discussed before. Both variants have pros and cons, so that is why I create a simpler solution and it works through Google Spreadsheets.
https://docs.google.com/spreadsheets/d/1tyGP1BQ_6QKVZMLT1M_QKPKu4p-jhucOJIAolvoZKOU/edit?usp=sharing
Essentially, you just need to type your data and this spreadsheet would generate the needed HTML code which you would need to copy on your page or blog post using the Code block.
- Type your link titles (subtitles).
- You may click Auto ID if you want this spreadsheet to automatically generate the link HTML ID based on subtitle.
- Don’t forget to choose the desired text style (h1-h4) in the G4 cell.
- Select or type table title in G3 cell.
- Copy/paste code from the green field into the Code block.
- Copy/paste Subtitle HTML Code instead of your regular subtitle using the Markdown Block.
You are very welcome to copy this spreadsheet and use it for your needs. In my workflow, I keep the “Data” sheet untouched and just create a duplicate of this sheet for every article.
Updates
1.04
- New simplified/improved algorithm. So it would be easier to add new features and options in the future.
- Line numbers. Can be applied to the table, subtitles, or both.
- Same text style for all subtitles. No need to choose it for every single subtitle.
- Option to include or not include table title.
Leave a Reply