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

<header class="main__header">
    {% if isArticle %}
        <ul class="breadcrumbs">
            {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle) %}
            {%- for entry in breadcrumbNavPages %}
            <li>
                <a href="{{ entry.url }}" {% if entry.url == page.url %} class="breadcrumbs--active"{% endif %}>{{ entry.title }}</a>
            </li>
            ➔
            {%- endfor %}
        </ul>

        <h1>{{ articleTitle }}</h1>
        <div class="article__info">
            <p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
            {% if updated %}
                • Last updated on {{ updated | niceDate }}</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 %}
        <h1>{{ pageTitle or title }}</h1>
        {% if desc %}
            <p>{{ desc }}</p>
        {% endif %}
    {% endif %}
</header>

<div class="content__wrapper">
    {% if toc %}
        {% include "global/toc.njk" %}
    {% endif %}

    {% if isArticle %}
        <article class="article">
            {{ content | safe }}
        </article>
    {% else %}
		<div class="content {{'content--divided' if isContentDivided }}">
			{{ content | safe }}
		</div>
    {% endif %}

    {% if tags and tags.includes("contents") or title === "Articles" or tags and tags.includes("blog pages") %}
        {% include "main/content-nav.njk" %}
    {% endif %}
</div>

<style>
    .breadcrumbs {
        justify-self: center;
        list-style: none;
        padding: 0;
        margin: 0 0 0.7em 0;
        display: flex;
        gap: 0.5em;
    }
</style>