shopify 主题 blog 列表调用

shopify建站运营

简述：{% assign blog_handle = request.path | split: '/' | last %}{% assign blog = blogs[blog_handle] %}{% paginate blog.articles by 2 %} {% if blog.articles.size > 0 %} {% for article in blog.articles %} <div class="ds-flex jc-c ai-c"> <a href="{{ article.url }}">{{ article.title }}</a> </div> {% endfor %} {% else %} <p>No related blogs found!</p> {% endif %} <div class="pagination"> {{ paginate | default_pagination }} </div>{% endpaginate %}

详情：

{% assign blog_handle = request.path | split: '/' | last %}

{% assign blog = blogs[blog_handle] %}

{% paginate blog.articles by 2 %}

{% if blog.articles.size > 0 %}

{% for article in blog.articles %}

<a href="{{ article.url }}">{{ article.title }}</a>

</div>

{% endfor %}

{% else %}

<p>No related blogs found!</p>

{% endif %}

</div>

{% endpaginate %}

自定义

blog 列表调用+分页调用

<style>

.header-wrapper{position: fixed;background: rgba(0, 0, 0, 0);backdrop-filter: unset;}

.mega-menu[open] .mega-menu__content{background: rgba(0, 0, 0, .5)!important}

.navbar-fixed {background: rgba(0, 0, 0, .5) !important;}

h2{font-size: 98px;margin: 2rem 0;}

h3{font-size: 72px;margin: 2rem 0;}

h4{font-size: 28px;margin: 1rem 0;}

/* .HeaderImageContent { justify-content: left;}

.HeaderImageContent h2 {text-align: left;} */

.Reviews>div>img{width: 100%;;}

.Installation-Guide-nav-box{padding: 2rem;background: linear-gradient(#000, #EB6100);}

.IGN-list span{top: -10px;}

.IGN-list{color: #fff;}

.Installation-Guide-blog-box .Installation-Guide-blog-list{padding: 1% 0;}

.Installation-Guide-blog-box .Installation-Guide-blog-list:not(:nth-child(-n+1)){margin-top: 3%;padding-top: 0;}

.Installation-Guide-blog-box .Installation-Guide-blog-list:nth-of-type(1){border-bottom: 1px solid #363636;}

.Installation-Guide-blog-box .Installation-Guide-blog-list>div{width: 20%;text-align: center;}

.Installation-Guide-blog-box .Installation-Guide-blog-list:not(:nth-child(-n+1))>div{height: 120px;}

.Installation-Guide-blog-box .Installation-Guide-blog-list>div:nth-of-type(2){width: 40%;}

.Installation-Guide-blog-box .Installation-Guide-blog-list>div img{height: 100%;}

.Installation-Guide-blog-box .Installation-Guide-blog-list a{color: #fff;}

</style>

Guide Your<br><span class="cl-orange">Installation</span>

</h2>

</div>

</div>

{% assign menu_handle = 'installation-guide-nav' %}

{% for link in linklists[menu_handle].links %}

{% assign blog_handle = link.title | handleize %}

{% assign blog = blogs[blog_handle] %}

{% if blog and blog.articles.size > 0 %}

<span class="p-a color-s22">{{ blog.articles.size }}</span>

</a>

{% else %}

</a>

{% endif %}

{% endfor %}

</div>

{% assign blog_handle = request.path | split: '/' | last %}

{% assign blog = blogs[blog_handle] %}

<div>Illustration</div>

<div>Installation Drawing</div>

<div>Installation Video</div>

</div>

{% paginate blog.articles by 2 %}

{% if blog.articles.size > 0 %}

{% for article in blog.articles %}

<div class="ds-flex jc-c ai-c"><a href="{{ article.url }}"> {{ article.title }}</a></div>

</div>

{% endfor %}

{% else %}

<p>No related blogs found!</p>

{% endif %}

{% if paginate.pages > 1 %}

{% if paginate.previous %}

<li>

</svg>

</a>

</li>

{% endif %}

{% assign total_pages = paginate.pages %}

{% for page_number in (1..total_pages) %}

{% if page_number == paginate.current_page %}

<li>

<a href="?page={{ page_number }}" class="pagination__item pagination__item--current light" aria-current="page" aria-label="Page {{ page_number }}">{{ page_number }}</a>

</li>

{% else %}

<li>

<a href="?page={{ page_number }}" class="pagination__item link" aria-label="Page {{ page_number }}">{{ page_number }}</a>

</li>

{% endif %}

{% endfor %}

{% if paginate.next %}

<li>

</svg>

</a>

</li>

{% endif %}

</ul>

</nav>

</div>

{% endif %}

{% endpaginate %}

</div>

shopify建站运营

{% endpaginate %}自定义 blog 列表调用+分页调用

{% endpaginate %}

自定义

blog 列表调用+分页调用