How can I display both blog and article titles in breadcrumbs?

[harukajmickey]

Hi I have a question about breadcrumbs.

When I go to any blog page, the breadcrumbs shows:

TOP > blog A

Then when I got to article A, the breadcrumb shows:

TOP > article A

How do you show TOP > blog A > article A ???

The code is as follows. Thank you in advance!

{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
    <nav class="breadcrumb leading-6 max-w-6xl px-4 m-auto" role="navigation" aria-label="breadcrumbs">
    <a href="/" title="Home" class="arrow-right hover:underline text-xs">TOP</a>
    {% if template contains 'page' %}
        <span class="text-gray-400" aria-hidden="true">&rsaquo;</span>
        <span class="text-gray-400 text-xs">{{ page.title }}</span>
    {% elsif template == 'blog' %}
        <span class="text-gray-400" aria-hidden="true">&rsaquo;</span>
        {% if current_tags %}
        {{ blog.title | link_to: blog.url }}
        <span class="text-gray-400" aria-hidden="true">&rsaquo;</span>
        <span>{{ current_tags | join: " + " }}</span>
        {% else %}
        <span class="text-xs text-gray-400">{{ blog.title }}</span>
        {% endif %}
    {% elsif template == 'article' %}
        <span class="text-gray-400" aria-hidden="true">&rsaquo;</span>
        {{ blog.title | link_to: blog.url }}
        <span class="text-gray-400" aria-hidden="true">&rsaquo;</span>
        <span class="text-xs">{{ article.title }}</span>
    {% else %}
    <span class="text-gray-400" aria-hidden="true">&rsaquo;</span>
    <span class="text-xs text-gray-400">{{ page_title }}</span>
    {% endif %}
    </nav>
{% endunless %}