Use convertToToc.js to parse blog post to toc then generate toc html file with table_of_content_template.html.
What must be changed?
H2 Heading
id, innerText
H3 Heading
id, href, innerText
var toc = []; | |
var h2 = document.getElementsByTagName('h2'); | |
for (var i = 0; i < h2.length; i++) { | |
if (h2[i].innerText !== 'Comments') { | |
var tocEl = {h2: h2[i], h3: []} | |
var element = h2[i].nextSibling; | |
while (element !== null && element.tagName !== 'H2') { | |
if (element.tagName === 'H3' && element.innerText.trim() !== '') { | |
tocEl.h3.push(element) | |
} | |
element = element.nextSibling; | |
} | |
toc.push(tocEl) | |
} | |
} |
f |
<!-- Root Toc --> | |
<!-- Change id, index --> | |
<div id="wq9h742hw" index="0"> | |
<div class="Z0Us8" style=""> | |
<div role="button" tabindex="-1" class="Qgcxu" data-hook="ExpandCollapseButton_0"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="button" | |
tabindex="0" aria-label="Item is expanded" class="Rh1Jd phmA7"> | |
<g fill-rule="evenodd"> | |
<g> | |
<g> | |
<g> | |
<g> | |
<path d="M11.999 9L6 14.241 6.657 15 11.999 10.334 17.343 15 18 14.241z" | |
transform="translate(-129 -185) translate(97 105) translate(23 71) rotate(-90 21 12) matrix(1 0 0 -1 0 24)"> | |
</path> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</svg> | |
</div> | |
<div class="_7zRv0"> | |
<div class="itVXy _8a1b4" dir="ltr"> | |
<div class="mhGZq"> | |
<!-- H2 Heading --> | |
<!-- Change id, innerText --> | |
<p id="viewer-km1q" | |
class="xVISr Y9Dpf OZy-3 lnyWN public-DraftStyleDefault-block-depth0 fixed-tab-size public-DraftStyleDefault-text-ltr"> | |
<span class="B2EFF public-DraftStyleDefault-ltr"> | |
<span>H2 HEADING</span> | |
</span> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="fsX5d"> | |
<div class="itVXy _8a1b4" dir="ltr"> | |
<div class="mhGZq"> | |
<!-- H3 Heading --> | |
<!-- Change id, href, and innerText --> | |
<p id="viewer-1hjth" | |
class="xVISr Y9Dpf OZy-3 lnyWN public-DraftStyleDefault-block-depth0 fixed-tab-size public-DraftStyleDefault-text-ltr"> | |
<span class="B2EFF public-DraftStyleDefault-ltr"> | |
<span> | |
<a data-hook="anchorViewer" href="#viewer-7d9eh" target="_self" rel="noopener noreferrer" | |
class="TWoY9 itht3"> | |
<span style="color: rgb(42, 42, 42);"> | |
<u class="D-jZk">H3 HEADING 1</u> | |
</span> | |
</a> | |
</span> | |
</span> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> |