layout: default


{% assign t = site.data.language.t %} <div class=“page-post”>

{% include catalogue.html list_id="structure-sm" %}
<div class="content m-auto">
    <div class="d-flex">
        <section class="left flex-sm-none flex-auto">
            <div class="status-bar d-flex position-sm-sticky bg-base">
                <div class="h-100 flex-grow-1 d-flex flex-column justify-content-center">
                    {% assign post_up = t.post_up | default: 'Post' %}
                    {% assign paths = page.date | date: ' %Y %m %d' | prepend: post_up %}
                    {% include bread-bar.html paths=paths  %}
                </div>
                <div class="structure-menu d-flex flex-column justify-content-center">
                    <div>
                        <button type="button" class="bg-primary color-secondary" id="scroll-top">
                            <i class="fas fa-angle-up"></i>
                        </button>
                        <button type="button" class="bg-primary color-secondary" id="structure-button">
                            <i class="far fa-caret-square-down"></i>
                        </button>
                    </div>
                </div>
            </div>
            <header>
                <h1 class="title fw-normal">{{ page.title }}</h1>
                <p class="color-secondary-light">
                    {{ t.update_time | default: 'Update time' }}:
                    <time datetime="{{ site.time }}">{{ page.date | date: '%Y-%m-%d %H:%M' }}</time>
                </p>
            </header>
            <article class="text">
                {{ content }}
            </article>
        </section>
        <aside class="right flex-sm-none flex-none d-sm-none component catalogue">
            <ul class="body bg-base position-sticky-top" id="structure">
                <!-- document structure list -->
            </ul>
            <button class="bg-primary-dark color-secondary-dark text-center cursor-pointer" title="to top" id="scroll-top-lg">
                <i class="fas fa-caret-up"></i>
            </button>
        </aside>
    </div>
</div>

</div>

<script>

var postPage = new PostPage('{{ page.title }}')
var structure = document.getElementById('structure')
var structureSm = document.getElementById('structure-sm')
var structureButton = document.getElementById('structure-button')
var scrollTop = document.getElementById('scroll-top')
var scrollTopLg = document.getElementById('scroll-top-lg')
postPage.initStructure(structure)
postPage.initStructure(structureSm)
postPage.addAnchorToHeaders()

structureButton.onclick = function () {
    window.comShowCatalogue()
}

scrollTop.onclick = function () {
    window.scrollTo({top: 0, behavior: "smooth"})
}
scrollTopLg.onclick = scrollTop.onclick

function handleScrollTop() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop >= 200) {
        if (scrollTopLg.style.display !== 'block') {
            scrollTopLg.style.display = 'block'
        }
    } else {
        if (scrollTopLg.style.display === 'block') {
            scrollTopLg.style.display = 'none'
        }
    }
}
window.onscroll = handleScrollTop;
handleScrollTop();

</script>