TOC

Loading...

Table of Contents is quite tricky on multi devices.

tried liquid only - problem with multi device view
use bootstrap-toc

Enable Toc

To use toc add in the frontmatter

toc: true

Layout changes

The default layout contains a custom body tag:

{% if page.toc %}
<body data-spy="scroll" data-target="#toc">
{% else %}
<body>
{% endif %}

Use for fixed navigation the affix attribute. TOC can happen in page and post layouts.

<div class="container">
    {% if page.toc == true %}
    <div class="col-md-3"><nav id="toc" data-spy="affix" data-toggle="toc"></nav></div>
    <div class="col-md-9">{{ content }}</div>
    {% else %}
    <div class="col-md-12">{{ content }}</div>
    {% endif %}
</div>

Conclusion

Maybe the best solution?