shopify单页面自定义某些文章及进行分页

 

简述: <div id="tab1" class="tab-content active"> <div class="exbox Explore "> {% assign blog_handles = &#39;youtube,tiktok,instagram,facebook,linkedin&#39; | split: &#39;,&#39; %}{% assign all_articles = &#39;&#39; | split: &#39;&#39; %}{% 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...

详情:

            <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>