Tài liệu xStore

Hướng dẫn phát triển giao diện storefront

cms/article-list

Danh sách bài viết, có thể lọc theo chuyên mục.

Ngoài những biến dưới đây, slot này còn nhận toàn bộ biến toàn cục.

Biến của trang

Biến Kiểu Mô tả Từ phiên bản
articles Article[] Bài viết của trang hiện tại. 1.0
article_categories ArticleCategory[] Toàn bộ chuyên mục bài viết, để dựng bộ lọc. 1.0
current_category ArticleCategory | null Chuyên mục đang lọc; null khi xem tất cả. 1.0
has_more boolean Còn trang tiếp theo hay không. 1.0
next_cursor string | null Con trỏ để tải trang kế; null khi đã hết. 1.0
featured_article Article | null Bài viết nổi bật lớn ở đầu trang; chỉ có ở trang tổng (không lọc chuyên mục, không có cursor), ngược lại là null. 1.2
featured_side Article[] Ba bài viết xếp cạnh bài nổi bật; rỗng khi không phải trang tổng. 1.2
grouped_articles ArticleSection[] Các khối bài viết theo chuyên mục; chuyên mục có dưới 3 bài sẽ bị bỏ qua. Rỗng khi lọc chuyên mục hoặc sang trang. 1.2
recent_articles Article[] Bài viết mới nhất, dùng cho cột bên "Tin mới nhất". 1.2
page_title string Tiêu đề SEO của trang. 1.0

Mã đầy đủ

Toàn bộ tệp cms/article-list.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/cms/article-list.html rồi sửa theo ý muốn.

<div class="container page-content">
  <h1 class="page-title">{{ page_title }}</h1>

  {% if article_categories.size > 0 %}
  <nav class="article-category-nav">
    <a href="/bai-viet" class="article-cat-btn {% unless current_category %}article-cat-btn--active{% endunless %}">
      Tất cả
    </a>
    {% for cat in article_categories %}
      <a href="/bai-viet?danh-muc={{ cat.slug }}"
         class="article-cat-btn {% if current_category and current_category.slug == cat.slug %}article-cat-btn--active{% endif %}">
        {% if cat.image_url %}<img src="{{ cat.image_url }}" alt="" width="20" height="20" loading="lazy" class="article-cat-btn__img" style="width:20px;height:20px;border-radius:50%;object-fit:cover;vertical-align:middle">{% endif %}
        {{ cat.title }}
        {% if cat.article_count > 0 %}<span>({{ cat.article_count }})</span>{% endif %}
      </a>
    {% endfor %}
  </nav>
  {% endif %}

  {% if articles.size > 0 %}
  <div class="article-grid">
    {% for article in articles %}
    <article class="article-card">
      {% if article.thumbnail_url %}
        {% if article.url %}<a href="{{ article.url }}" class="article-card__img-wrap">{% else %}<span class="article-card__img-wrap">{% endif %}
          <img src="{{ article.thumbnail_url }}" alt="{{ article.title }}"
               class="article-card__img" loading="lazy">
        {% if article.url %}</a>{% else %}</span>{% endif %}
      {% endif %}
      <div class="article-card__body">
        <h2 class="article-card__title">
          {% if article.url %}
            <a href="{{ article.url }}">{{ article.title }}</a>
          {% else %}
            {{ article.title }}
          {% endif %}
        </h2>
        {% if article.summary %}
          <p class="article-card__summary">{{ article.summary }}</p>
        {% endif %}
        <div class="article-card__meta">
          {% if article.author_name %}
            <span class="article-card__author">{{ article.author_name }}</span>
          {% endif %}
          {% if article.published_at %}
            <time class="article-card__date">{{ article.published_at | slice: 0, 10 }}</time>
          {% endif %}
        </div>
        {% if article.url %}
          <a href="{{ article.url }}" class="btn btn--sm btn--outline">Đọc thêm</a>
        {% endif %}
      </div>
    </article>
    {% endfor %}
  </div>

  {% if has_more %}
  <div class="pagination">
    <a href="?cursor={{ next_cursor }}{% if current_category %}&danh-muc={{ current_category.slug }}{% endif %}"
       class="btn btn--outline">Xem thêm</a>
  </div>
  {% endif %}
  {% else %}
  <p class="empty-state">Chưa có bài viết nào.</p>
  {% endif %}
</div>