aawebcreate

liquid(c)テンプレート言語備忘録

■カテゴリー一覧テンプレート

{% assign articles = category.articles | to_array %}
{% if articles.size > 0 %}
  <div class="articleList">
    {% paginate articles per 9 %}
      <div class="articleList__items">
        {% for article in paginate.collection %}
          {% render 'components/article' article=article %}
        {% endfor %}
      </div>
      {% render 'components/pagination' %}
    {% endpaginate %}
  </div>
{% endif %}

■サイト内記事一覧

{% assign articles = site.articles | limit: 10 | to_array %}
{% if articles.size > 0 %}
  <div class="articleList">
    <div class="articleList__items">
      {% for article in articles %}
        {% render 'components/article' article=article %}
      {% endfor %}
    </div>
  </div>
{% endif %}

■一覧用記事テンプレート

<div class="articleList__item"><a class="articleList__item-content" href="{{ article.path }}">
    <div class="articleList__item-figure">
      {% assign time_3days_ago = 'now' | date: '%s' | minus:259200 | plus:0 %}
      {% assign time_published = article.published_at | date: '%s' | plus:0 %}
      {% if time_published > time_3days_ago %}
        <p class="icon-new">NEW</p>
      {% endif %}
      <picture class="articleList__item-picture">
        {% if article.image_is_empty == blank %}
        <img class="articleList__item-img" src="{{ article.image_large_url }}" alt="画像"/>
        {% else %}
        <img class="articleList__item-img" src="{% file "/theme/original/noimage.png" %}" alt="画像"/>
        {% endif %}
      </picture>
    </div>
    <div class="articleList__item-detail">
      <div class="articleList__item-meta">
        <p class="articleList__item-cat">{{ article.category.name }}</p>
        <time class="articleList__item-date" itemprop="datePublished" datetime="{{ article.published_at | date: '%Y.%m.%d' }}">{{ article.published_at | date: '%Y.%m.%d' }}</time>
      </div>
      <p class="articleList__item-title">{{ article.title }}</p>

      {% assign tags = article.ordered_tags %}
      {% if tags.size > 0 %}
      <p class="articleList__item-tags">
        {% for tag in tags %}
          <span class="articleList__item-tag">#{{ tag.name}}</span>
        {% endfor %}
      </p>
      {% endif %}
    </div></a></div>

■特定カテゴリ　かつ　特定記事種別　かつ　拡張項目の昇順並び

{% assign articles  = site.articles | search: 'category:"live" article_kind:"3"' | order_by_attribute: "リハカツLIVE_配信開始_backend", "ASC" | limit: 2 %}

■カテゴリの除外（複数）

{% assign articles = site.articles | search: '-category:"first" -category:"communication/kokokite" -category:"company/locations"' | limit: 6 | to_array %}

■特定タグ記事一覧

{% assign articles = site.articles | search: 'tag:"アンケート"' | limit: 3 %}

■週刊ランキング記事一覧

{% assign articles = site.weekly_popular_articles | search: '-category:"en"' | limit: 5 | to_array %}

■カテゴリ内記事ランキング

{% assign articles = category.daily_popular_articles | limit: 5 %}

■記事種別指定記事一覧

{% assign articles = site.articles | where: "article_kinds.code='3'" | to_array %}
{% assign articles = site.articles | search: 'article_kind:"2"' | to_array %}

■記事種別の除外

{% assign articles = site.articles | search: '-article_kind:"2"' | to_array %}

■記事内の関連記事一覧

{% assign articles = article.relevance_articles | limit: 4 %}

■関連記事（参照している記事の1つ目のタグと合致する記事を取得）

{% assign tag = article.ordered_tags | limit: 1 | to_a | first %}
{% assign related_articles_size = 0 %}
{% if tag != blank %}
  {% assign articles = tag.articles | where: "articles.key <> ?", article.permalink | limit: 3 %}
  {% assign articles_size = articles | limit: 1 | to_a | size %}
{% endif %}

■記事の所属しているカテゴリの記事一覧

{% assign articles = article.category.articles | limit: 2 | to_array %}

■コレクション記事一覧テンプレート

{% assign items = collection.items | to_array %}
{% if items.size > 0 %}
<div class="mv">
  <div class="mv__slider swiper">
    <div class="swiper-wrapper">
      {% for item in items %}
        {% if item.type == 'CollectionItemArticle' %}
        {% assign article = item.article %}
          <div class="mv__slide swiper-slide">
            {% render 'components/article' article=article %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

■ページネーション毎の特定箇所に特定の記事種別の記事を出力

<div class="articleList">
  {% assign articles = site.articles | search: '-article_kind:"2"' | to_array %}
  {% assign articleCount = 0 %}
  {% assign checkArticleCount = 0 %}
  {% assign checkArticleOffset = 0 %}
  {% assign checkArticlesIndex = 0 %}
  {% if articles.size > 0 %}
    {% paginate articles per 14 %}
      {% assign checkArticleOffset = paginate.current_page | minus: 1 %}
      {% assign checkArticleOffset = checkArticleOffset | times: 2 %}
      <div class="articleList__items">
        {% for article in paginate.collection %}
          {% assign articleCount = articleCount | plus: 1 %}
          {% render 'components/article' %}
          {% comment %}
          <div class="articleList__item">
            <p>count：{{ articleCount }}</p>
            <p>title：{{ article.title }}</p>
            <p>kinds：{{ article.kinds }}</p>
          </div>
          {% endcomment %}

          {% assign check_articles = site.articles | search: 'article_kind:"2"' | to_array %}
          {% if check_articles.size > 0 %}
            {% if forloop.index == 7 or forloop.index == 14 %}
              {% assign check_articles = site.articles | search: 'article_kind:"2"' | to_array %}
              {% for check_article in check_articles | offset:checkArticleOffset | limit: 1 %}
                {% assign checkArticleCount = checkArticleCount | plus: 1 %}
                {% assign check_article = check_articles[checkArticlesIndex] %}
                {% render 'components/article', article: check_article %}
                {% comment %}
                <div class="articleList__item --check">
                  <p>count：{{ checkArticleCount }}</p>
                  <p>index：{{ forloop.index }}</p>
                  <p>title：{{ check_article.title }}</p>
                  <p>kinds：{{ check_article.kinds }}</p>
                </div>
                {% endcomment %}
              {% endfor %}
              {% assign checkArticleOffset = checkArticleOffset | plus: 1 %}
              {% assign checkArticlesIndex = checkArticlesIndex | plus: 1 %}
            {% else %}
            {% endif %}
          {% endif %}

        {% endfor %}
      </div>
      {% render 'components/pagination' %}
    {% endpaginate %}
  {% else %}
    <p>現在、記事はありません。</p>
  {% endif %}
</div>

Page Top