Shopifyのsnippetsを活用! 独自デザインでブログを表示する【ECサイト制作ビギナー】

{%- paginate blog.articles by 6 -%}
  <div class="main-blog page-width section-{{ section.id }}-padding">
    <h1 class="title--primary">{{ blog.title | escape }}</h1>
    <ul class="list-style-none">
      {%- for article in blog.articles -%}
        <li class="textlist-2col articles">
          {%- render 'article-slimlist',
            article: article,
            show_date: section.settings.show_date,
            show_author: section.settings.show_author,
            show_excerpt: section.settings.show_desc 
          -%}
        </li>
      {%- endfor -%}
    </ul>

    {%- if paginate.pages > 1 -%}
      {%- render 'pagination', paginate: paginate -%}
    {%- endif -%}
  </div>
{%- endpaginate -%}

{%- if article and article != empty -%}

  {%- if show_date -%}
    <p class="col2list_heading">
      {{ article.published_at | time_tag: format: 'date' }}
    </p>
  {%- endif -%}

  <div class="col2list_text">
    <h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
      <a href="{{ article.url }}" class="full-unstyled-link">
        {{ article.title | truncate: 50 | escape }}
      </a>
    </h3>

    {%- if show_excerpt -%}
      {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
        <p class="col2list_text_excerpt">
          {%- if article.excerpt.size > 0 -%}
            {{ article.excerpt | strip_html | truncatewords: 30 }}
          {%- else -%}
            {{ article.content | strip_html | truncatewords: 30 }}
          {%- endif -%}
        </p>
      {%- endif -%}
    {%- endif -%}
    {%- if show_author -%}
      <p class="right">{{ article.author }}</p>
    {%- endif -%}
  </div>

{%- endif -%}

.col2list{
  padding: 1.25rem 0;
  border-top: 1px #bbb solid;
}
.col2list:last-child{
  border-bottom: 1px #bbb solid;
}

/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) {
  .col2list {
    display: flex;
  }
  .col2list_heading{
    flex: 0 0 25%;
  }
  .col2list_text{
    flex: 1;
  }
}
/* =============================================
/ Blog - slim
/============================================ */
.list-style-none{
  list-style: none;
  padding-left: initial;
}

.col2list_text_excerpt{
  font-size: 1.4rem;
}

/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) {
  .col2list.articles {
    padding: 3rem 1.5rem;
    align-items: baseline;
  }

  .articles .col2list_heading{
    flex-basis: 10em;
  }
}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign posts_displayed = section.settings.blog.articles_count
  if section.settings.post_limit <= section.settings.blog.articles_count
    assign posts_exceed_limit = true
    assign posts_displayed = section.settings.post_limit
  endif
-%}
<div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
  <div class="page-width section-{{ section.id }}-padding">
    {%- unless section.settings.heading == blank -%}
      <div class="title-wrapper-with-link title-wrapper--no-top-margin">
        <h2 id="SectionHeading-{{ section.id }}" class="blog__title {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>

        {%- if section.settings.blog != blank and section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
          <a href="{{ section.settings.blog.url }}"
            class="link underlined-link large-up-hide"
          >
            {{ 'sections.featured_blog.view_all' | t }}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}
    {%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
      <ul class="list-style-none">
        {%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
          <li class="col2list articles">
            {% render 'article-slimlist',
              blog: section.settings.blog,
              article: article,
              show_date: section.settings.show_date,
              show_author: section.settings.show_author,
              show_excerpt: section.settings.show_desc 
            %}
          </li>
        {%- endfor -%}
      </ul>

      {%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
        <div class="blog__view-all center small-hide medium-hide">
          <a href="{{ section.settings.blog.url }}" id="ViewAll-{{ section.id }}" class="blog__button button" aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}">
            {{ 'sections.featured_blog.view_all' | t }}
          </a>
        </div>
      {%- endif -%}
    {%- else -%}
      <ul class="list-style-none">
        <li class="col2list articles">
          <p class="col2list_heading">
            ブログ投稿日
          </p>
          <div class="col2list_text">
            <h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
               {{ 'sections.featured_blog.onboarding_title' | t }}
            </h3>
            <p class="col2list_text_excerpt">
              このブログにはまだ記事がありません。<br>
              抜粋を表示を選択すると、この場所に記事の抜粋が表示されます。
            </p>
            <p class="right">ブログ執筆者名</p>
          </div>
        </li>
      </ul>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "checkbox",
      "id": "show_desc",
      "default": false,
      "label": "抜粋文を表示する"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "ブログ記事(テキストのみ)",
      "settings": {
        "blog": "info"
      }
    }
  ]
}
{% endschema %}

{{ article.published_at | time_tag: format: 'date' }}

 {{ article.published_at | time_tag: '%Y年%m月%d日' }}