leilukin-site/src/_includes/global/content.njk

<header class="main__header">
    {% if isArticle or hasBreadcrumbs %}
        <nav aria-labelledby="breadcrumbs-title">
            <h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
            <ol class="breadcrumbs">
                {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle or pageTitle or title) %}
                {%- for entry in breadcrumbNavPages %}
                <li>
                    <a href="{{ entry.url }}">{{ entry.title }}</a>
                </li>
                {%- endfor %}
            </ol>
        </nav>
    {% endif %}

    <h1>{{ articleTitle or pageTitle or title }}</h1>

    {% if isArticle %}
        <div class="article__info">
            <p>Posted on {{ date | formatDate }} by {{ sitemeta.siteAuthor.name }}
            {% if updated %}
                • Last updated on {{ updated | formatDate }}</p>
            {% endif %}
            {% if categories %}
                <p>Categories:
                    {% for cat in categories %}
                        <a href="/categories/{{ cat | slugify }}">{{ cat }}</a>{% if not loop.last %}, {% endif %}
                    {% endfor %}
                </p>
            {% endif %}
            <p>{{ content | emojiReadTime }}</p>
        </div>
    {% else %}
        {% if desc %}
            <p>{{ desc }}</p>
        {% endif %}
    {% endif %}
</header>

<content-wrapper>
    {% if toc %}
        {% include "global/toc.njk" %}
    {% endif %}

    {% set contentEl = "article" if isArticle or articleElement else "div" %}

    <{{contentEl}} class="content{{' content--divided' if isContentDivided }}">
        {{ content | safe }}

    {% if tags and tags.includes("posts") %}
        <nav class="blog__post--pagination" aria-labelledby="nextprev-title">
            <h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
            {%- if collections.posts %}
                {%- set previousPost = collections.posts | getPreviousCollectionItem %}
                {%- set nextPost = collections.posts | getNextCollectionItem %}
                {%- if nextPost or previousPost %}
                    <ul class="blog__post--nextprev">
                    {%- if previousPost %}
                        <li class="blog__post--prev">
                            <p>Previous Post:</p>
                            <a href="{{ previousPost.url }}">{{ previousPost.data.articleTitle }}</a>
                        </li>
                    {% endif %}
                    {%- if nextPost %}
                        <li class="blog__post--next">
                            <p>Next Post:</p>
                            <a href="{{ nextPost.url }}">{{ nextPost.data.articleTitle }}</a>
                        </li>
                    {% endif %}
                    </ul>
                {%- endif %}
            {%- endif %}
        </nav>
    {% endif %}
    </{{contentEl}}>

    {% if
        tags and tags.includes("articles")
        or tags and tags.includes("posts")
        or page.url === "/articles/"
        or tags and tags.includes("blog pages")
    %}
        {% include "main/content-nav.njk" %}
    {% endif %}

    {% block shrineInfo %}{% endblock %}
</content-wrapper>

<style>
    .breadcrumbs {
        list-style-type: "";
        padding: 0;
        margin: 0 0 0.7em 0;
        display: flex;
        gap: 0.5em;
        flex-wrap: wrap;
        justify-content: center;
    }

    .breadcrumbs li::after {
        content: '➔';
        padding-left: 0.3em;
    }

    .blog__post--pagination {
        padding-top: 1em;
        margin-top: 2.5em;
        border-top: 0.1em solid var(--clr-title-border);
    }

    .blog__post--nextprev {
        list-style-type: "";
        padding: 0;
        margin: 0;
        display: grid;
        gap: 0.7em;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 'prev next';
    }

    .blog__post--prev {
        grid-area: prev;
    }

    .blog__post--next {
        grid-area: next;
    }
</style>