custom-post-with-TOC.hbs

{{!< default}}

{{#post}}
<section class="section is-mobile-paddingless">
    <div class="columns">
        <div class="column is-hidden-touch is-1-desktop is-1-widescreen is-2-fullhd"></div>
        <div class="column is-12-tablet is-10-desktop is-10-widescreen is-8-fullhd">
            <article class="single-article">
                {{!-- featured_image --}}
                {{#if feature_image}}
                <div class="box is-paddingless is-shadowless is-full-mobile is-centered">
                    <section class="featured-image">
                        <div class="featured-image" style="background-image:url({{img_url feature_image size="wide"}});">
                            {{!-- featured post label --}}
                            {{#if featured}}
                            <span class="featured-label large is-montserrat" title="Featured Post"><i class="iconfont icon-star"></i> {{t "Featured"}}</span>
                            {{/if}}
                        </div>
                    </section>
                {{else}}
                <div class="box is-shadowless is-full-mobile is-centered">
                {{/if}}

                    <section class="post-wrap is-vpadding-15">
                        <div class="spacing-15 is-hidden-mobile"></div>
                        {{!-- meta --}}
                        <div class="has-2-ends is-montserrat is-uppercase is-size-7">
                            <div class="end date">{{date format=(t "DD MMMM YYYY")}}</div>
                            <div class="end reading_time">{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</div>
                        </div>

                        {{!-- title --}}
                        <h1 class="title is-montserrat">{{title}}</h1>

                        {{!-- tags --}}
                        {{#has tag="count:>0"}}
                        <div class="buttons tags has-text-weight-semibold">
                            <span class="button is-static is-size-7-mobile" style="min-width:2.5em">
                                {{#has tag="count:1"}}<i class="iconfont icon-tag"></i>{{/has}}
                                {{#has tag="count:>1"}}<i class="iconfont icon-tags"></i>{{/has}}
                            </span>
                            {{#foreach tags}}
                            <a href="{{url}}" class="button is-light is-size-7-mobile has-text-weight-semibold">{{name}}</a>
                            {{/foreach}}
                        </div>
                        {{/has}}

                        {{!-- content --}}
                        <div class="content post-content is-size-6-mobile is-georgia">{{content}}</div>

                        {{!-- author box --}}
                        {{> "post/post_author"}}
                        
                    </section>
                </div>
            </article>
        </div>
        <div class="column is-hidden-touch">
            <div id="toc"></div>
        </div>
    </div>
</section>

<script>
    var show_toc = true;
</script>

{{!-- toc --}}
{{> "post/post_toc"}}

{{!-- aside section (related post, prev & next) --}}
{{> "post/post_aside"}}

{{!-- post footer for js --}}
{{> "post/post_footer"}}

{{!-- comment --}}
{{> "post/post_comment"}}

{{/post}}