can't sort shopify all blog page - shopify

Question

I have created a template and under that, I am assigning 5 categories of blogs but it isn't sorting them all, it is sorting them one by one. can anyone help me with this?
{% assign blog_handles = "skin-care,hair-care,foot-care,sun-care,learn" | split: ","| sort:'published_at' %}
{% for handle in blog_handles %}
{% for article in blogs[handle].articles limit: %}
<div class="blog-articles__article article">
<div class="card-wrapper underline-links-hover">
<div class="card article-card card--card article-card__image--medium card--media color-background-1" style="--ratio-percent: 52.33333333333333%;">
<div class="card__inner ratio" style="--ratio-percent: 52.33333333333333%;">
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect">
<img
srcset="{{ article.image.src | img_url: '533x' }}"
src="{{ article.image.src | img_url: '533x' }}"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
loading="lazy">
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading h2">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
<div class="article-card__info caption-with-letter-spacing h5">
<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
</div>
<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
Thanks in Advance!

Answer 1

The sort filter should be applied to your loop object which contains the published_at info (your handle list doesn't).
Something like that (not tested) should work:
{% assign articles = blogs[handle].articles | sort:'published_at' %}
{% for article in articles %}
Do something
{% endfor %}