I’m trying to insert a table of contents on my blog post: AI Recruiting: A Guide for People People
Originally, I’ve took the code from here: Add a dynamic Table of Contents to a Ghost blog
Code:
<script>
var contentsTitle = "Contents"; // Set your title here, to avoid making a heading for it later
var ToC = "<h2>"+contentsTitle+"</h2>";
ToC += '<nav role="navigation" class="table-of-contents"><ul>';
var first = false;
document.querySelectorAll('h2,h3').forEach(function(el,index) {
if (first === false) {
first = true;
var newSpan = document.createElement("SPAN");
newSpan.id='dynamictocnative';
el.parentNode.insertBefore(newSpan, el);
}
var title = el.textContent;
var link = '#' + el.id;
if (el.nodeName === 'H2') {
ToC += '<li><a href="' + link + '">' + title + '</a></li>';
} else if (el.nodeName === "H3"){
ToC += '<li style="margin-left:2em"><a href="' + link + '">' + title + '</a></li>';
}
});
ToC += '</ul></nav>';
ToC += '<style>#dynamictocnative { width: 100%; }</style>';
var tocDiv = document.getElementById('dynamictocnative');
tocDiv.innerHTML = ToC;
</script>
This worked well. However, I wanted to change some minor design stuff (inserting dots after the toc, and highlighting the text in blue) so I got this code from our dev:
var links = $('<div/>').append($('<h2/>').text('Contents')).append($('<ul/>'));
$("h2.toc-index").each(function(index) {
$(this).attr('id', index)
$('<li/>').append($('<a/>').text($(this).text()).attr('href', '#'+$(this).attr('id')).css('color','blue')).appendTo(links)
})
$('.toc-index').first().append(links.append($('<hr/>').addClass('dot')))
Which I tried inserting onto my blog post via code insert in the footer. But now 5 days later, I can still find the old code when inspecting my page and the new code doesn’t seem to be there at all.
Anyone have any ideas?
