Adding Aside in ghost blog

Developer help
#1

Hey, I found this tutorial:

And I have a question. Is there possibilty of adding aside without editing files just with Settings → Code injection??

Code added on post page:
<section class="post-full-content"> <aside class="toc-container"> <div class="toc"></div> </aside> <div class="post-content"> {{content}} </div> </section>

I used code in this tutorial and effect does not satisfy me :smiley:

image
image907×778 17.9 KB

Code used in Site header:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.css">
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    {{ghost_head}}
    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
<script>
    tocbot.init({
        tocSelector: '.toc',
        contentSelector: '.post-content',
        hasInnerContainers: true
    });
</script>
{{{block "scripts"}}}
{{ghost_foot}}

Code used in Site Footer:

<!-- script tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"></script>

<script>
    tocbot.init({
        tocSelector: '.toc',
        contentSelector: '.post-content',
        hasInnerContainers: true
    });
</script>

<style>
.post-content h2,
.post-content h3 {
    outline: none;
}
body {
    overflow: visible;
}
.post-full-content {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    padding: 0 0 6vw;
    margin: 0;
}
.toc-container {
    order: 1;
}
.toc-container .toc {
    position: sticky;
    top: 70px;
    min-width: 260px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 1.6rem;
    line-height: 1.6em;
    padding: 0 0.8em;
}
.is-active-link::before {
    background-color: #3eb0ef;
}
ol.toc-list {
    margin: 0;
}

</style>
1 Like