shopify单页面自定义某些文章及进行分页
<div id="tab1" class="tab-content active">
<div class="exbox Explore ">
{% assign blog_handles = 'youtube,tiktok,instagram,facebook,linkedin' | split: ',' %}
{% assign all_articles = '' | split: '' %}
{% for blog_handle in blog_handles %}
{% assign blog = blogs[blog_handle] %}
{% if blog and blog.articles.size > 0 %}
{% assign all_articles = all_articles | concat: blog.articles %}
{% endif %}
{% endfor %}
{% assign sorted_articles = all_articles | sort: 'published_at' | reverse %}
{% assign current_page = current_page | default: 1 %}
{% assign articles_per_page = 48 %}
{% assign total_articles = sorted_articles.size %}
{% assign total_pages = total_articles | divided_by: articles_per_page %}
{% assign remainder = total_articles | modulo: articles_per_page %}
{% if remainder != 0 %}
{% assign total_pages = total_pages | plus: 1 %}
{% endif %}
{% assign start_index = articles_per_page | times: current_page | minus: articles_per_page %}
{% assign end_index = articles_per_page | times: current_page %}
{% if sorted_articles.size > 0 %}
{% for article in sorted_articles %}
{% assign current_index = forloop.index0 %}
{% if current_index >= start_index and current_index < end_index %}
<!-- 输出文章内容 -->
<div class="exlist">
{% assign article_handle_first_part = article.handle | split: '/' | first %}
{% if article_handle_first_part == 'youtube' %}
<div class="ex-v">
<iframe class="elementor-video" src="{{ article.metafields.custom.video_url }}" frameborder="0" allowfullscreen></iframe>
</div>
{% elsif article_handle_first_part == 'facebook' %}
<div class="ex-v Facebook-border">
<div class="Facebook-box">
<iframe src="{{ article.metafields.custom.video_url }}" width="267" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</div>
</div>
{% else %}
<div class="ex-v">
<a href="{{ article.metafields.custom.external_links }}" target="_blank">
<img src="{{ article.image.src | img_url: 'large' }}" alt="{{ article.title }}">
</a>
</div>
{% endif %}
<div class="ex-lb">
<span class="icon-explorelist">
{% if article_handle_first_part == 'youtube' %}
<img src="{{ 'ltter-youtube-icon.svg' | asset_url }}" alt="Youtube Icon">
{% elsif article_handle_first_part == 'instagram' %}
<img src="{{ 'ltter-instagram-icon.svg' | asset_url }}" alt="Instagram Icon">
{% elsif article_handle_first_part == 'tiktok' %}
<img src="{{ 'ltter-tiktok-icon.svg' | asset_url }}" alt="Tiktok Icon">
{% elsif article_handle_first_part == 'facebook' %}
<img src="{{ 'ltter-facebook-icon.svg' | asset_url }}" alt="Facebook Icon">
{% elsif article_handle_first_part == 'linkedin' %}
<img src="{{ 'ltter-linkedin-icon.svg' | asset_url }}" alt="Linkedin Icon">
{% endif %}
</span>
<h4 class="card__heading">
<a href="{{ article.metafields.custom.external_links }}" title="{{ article.excerpt }}" target="_blank">
{{ article.title }}
</a>
</h4>
</div>
<div class="ex-bt">
<div>
{% if article_handle_first_part != 'linkedin' %}
<img src="{{ 'ex-video-bt.svg ' | asset_url }}" alt="">
{% else %}
<img src="{{ 'ex-actile-bt.svg ' | asset_url }}" alt="">
{% endif %}
</div>
<div class="ex-bt-time">
<span><img src="{{ 'ex-time-bx.svg' | asset_url }}" alt="Lcsign Youtube"></span>
<span>{{ article.published_at | date: '%Y-%m-%d' }}</span>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<!-- 分页导航 -->
<div class="pagination cplist-feny">
{% if total_pages > 1 %}
<ul>
{% if current_page > 1 %}
<li><a href="?page={{ current_page | minus: 1 }}">❮</a></li>
{% endif %}
{% for page_number in (1..total_pages) %}
{% if page_number == current_page %}
<li class="current"><a>{{ page_number }}</a></li>
{% else %}
<li><a href="?page={{ page_number }}">{{ page_number }}</a></li>
{% endif %}
{% endfor %}
{% if current_page < total_pages %}
<li><a href="?page={{ current_page | plus: 1 }}">❯</a></li>
{% endif %}
</ul>
{% endif %}
</div>
{% else %}
<p>没有可显示的文章。</p>
{% endif %}
</div>