Tài liệu xStore

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

xStore.articles

Bài viết (blog): danh sách, chi tiết theo slug, bài liên quan, chuyên mục và thẻ.

Phương thức

Phương thức Cú pháp Mô tả Từ phiên bản
list xStore.articles.list({ limit, cursor, category, tag }): Promise<CursorPaginatedResponse<ArticleCard>> Bài viết đã xuất bản, mới nhất trước. Con trỏ keyset dạng "<published_at>|". 2.1
getBySlug xStore.articles.getBySlug(slug): Promise<ArticleDetail> Nội dung đầy đủ của bài viết, kèm HTML thân bài, chuyên mục và thẻ. 2.1
related xStore.articles.related(articleId, { limit }): Promise<CursorPaginatedResponse<ArticleCard>> Bài viết liên quan — cùng chuyên mục. 2.1
categories xStore.articles.categories(): Promise<CursorPaginatedResponse<ArticleCategory>> Chuyên mục bài viết. Dữ liệu tham chiếu có giới hạn: next_cursor null, has_more false. 2.1
tags xStore.articles.tags(): Promise<CursorPaginatedResponse<string>> Mọi thẻ đang dùng. items là mảng CHUỖI trần, không phải đối tượng. 2.1

Ví dụ đầy đủ

<script>
  // Danh sách bài viết, mới nhất trước. Con trỏ là keyset thật
  // ("<published_at>|<id>") nên vẫn đúng khi có bài mới xuất bản giữa chừng.
  async function renderArticles(cursor = null) {
    const trang = await xStore.articles.list({ limit: 10, cursor });

    document.getElementById('posts').insertAdjacentHTML('beforeend', trang.items.map((bv) => `
      <article>
        <a href="${bv.url ?? '#'}"><img src="${bv.thumbnail_url ?? ''}" alt="${bv.title}"></a>
        <h3><a href="${bv.url ?? '#'}">${bv.title}</a></h3>
        <time>${xStore.utils.formatDate(bv.published_at ?? '')}</time>
        <p>${bv.summary ?? ''}</p>
      </article>
    `).join(''));

    return trang.has_more ? trang.next_cursor : null;
  }

  // Chuyên mục và thẻ là dữ liệu tham chiếu có giới hạn — gọi một lần.
  async function renderSidebar() {
    const cm = await xStore.articles.categories();
    const th = await xStore.articles.tags();

    document.getElementById('cats').innerHTML =
      cm.items.map((c) => `<li>${c.title} (${c.article_count ?? 0})</li>`).join('');
    // items của tags là CHUỖI trần, không phải đối tượng.
    document.getElementById('tags').innerHTML =
      th.items.map((t) => `<li>${t}</li>`).join('');
  }

  renderArticles();
  renderSidebar();
</script>

Thư viện gọi tới /api/... trên chính tên miền cửa hàng, nên không cần khai báo địa chỉ máy chủ ở bất kỳ đâu.

Xem thêm Sự kiện để giao diện tự cập nhật sau mỗi thao tác.