`sections/blog.liquid`

112 lines
<script
  type="application/json"
  data-section-type="static-blog"
  data-section-id="{{ section.id }}"
>
</script>

<section
  {% if section.settings.tag-filter %}data-tag-filter{% endif %}
>

  <h1 class="page-title">{{ blog.title }}</h1>

  {% render 'breadcrumbs' %}

  {% render 'section-blog-sidebar' %}

  <div class="blog-wrapper">
    {% paginate blog.articles by section.settings.articles_per_page %}

      {%- comment -%} DW infinite scroll: wrapper carries the next-page URL; dw-native-infinite.js appends on scroll. {%- endcomment -%}
      <div
        data-dw-infinite
        data-dw-infinite-items=".blog-posts"
        data-dw-infinite-next="{% if paginate.next %}{{ paginate.next.url }}{% endif %}"
        data-dw-infinite-page="{{ paginate.current_page }}"
      >
        <div class="blog-posts">
          {% for article in blog.articles %}
            {% render 'section-blog-post', article: article %}
          {% else %}
            <span class="empty">{{ 'blogs.blog.empty' | t }}</span>
          {% endfor %}
        </div>

        {% if paginate.previous or paginate.next %}
          <div data-dw-infinite-pager>
            {% render 'pagination', paginate: paginate %}
          </div>
        {% endif %}
      </div>

    {% endpaginate %}

    {%- for block in section.blocks -%}
      {%- case block.type -%}
      {%- when 'promotional-image' -%}
        {% render 'block-blog-promo', block: block %}
      {%- endcase -%}
    {%- endfor -%}
  </div>
</section>

<script src="{{ 'dw-native-infinite.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Blog",
  "settings": [
    {
      "type": "range",
      "id": "articles_per_page",
      "label": "Posts per page",
      "min": 2,
      "max": 10,
      "step": 1,
      "default": 4
    },
    {
      "type": "checkbox",
      "id": "tag-filter",
      "label": "Show tag filter"
    },
    {
      "type": "checkbox",
      "id": "rss-icon",
      "label": "Show subscribe link"
    }
  ],
  "blocks": [
    {
      "type": "promotional-image",
      "name": "Promotional image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "Subheading"
        },
        {
          "type": "url",
          "id": "url",
          "label": "Link"
        }
      ],
      "limit": 1
    }
  ]
}

{% endschema %}