cms/article#

Trang chi tiết một bài viết.

• Tệp giao diện: cms/article.html
• Đường dẫn: /bai-viet/{slug}
• Controller: App\Modules\Cms\CmsController::articleDetailPage

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#

Mã đầy đủ#

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

<div class="container page-content">
  <nav class="breadcrumb">
    <a href="/">Trang chủ</a> /
    <a href="/bai-viet">Bài viết</a> /
    {% if article_categories.size > 0 %}
      <a href="/bai-viet?danh-muc={{ article_categories[0].slug }}">{{ article_categories[0].title }}</a> /
    {% endif %}
    <span>{{ article.title }}</span>
  </nav>

  <article class="article-detail">
    <header class="article-detail__header">
      <h1 class="article-detail__title">{{ article.title }}</h1>
      <div class="article-detail__meta">
        {% if article.author_name %}
          <span class="article-detail__author">{{ article.author_name }}</span>
        {% endif %}
        {% if article.published_at %}
          <time class="article-detail__date">{{ article.published_at | slice: 0, 10 }}</time>
        {% endif %}
        {% if article_categories.size > 0 %}
          <span class="article-detail__cats">
            {% for cat in article_categories %}
              <a href="/bai-viet?danh-muc={{ cat.slug }}">{{ cat.title }}</a>{% unless forloop.last %}, {% endunless %}
            {% endfor %}
          </span>
        {% endif %}
      </div>
      {% if article.thumbnail_url %}
        <img src="{{ article.thumbnail_url }}" alt="{{ article.title }}"
             class="article-detail__cover" loading="lazy">
      {% endif %}
    </header>

    {% if article.body %}
    <div class="rich-text article-detail__body">{{ article.body }}</div>
    {% endif %}

    {% if tags.size > 0 %}
    <div class="article-detail__tags">
      <strong>Tags:</strong>
      {% for tag in tags %}
        <span class="tag">{{ tag }}</span>
      {% endfor %}
    </div>
    {% endif %}
  </article>

  {% if reviews.size > 0 %}
  <section class="pdp-reviews">
    <h2 class="section__title">Bình luận ({{ reviews.size }})</h2>
    {% for review in reviews %}
    <div class="review-item">
      <div class="review-item__header">
        <strong>{{ review.reviewer_name | default: 'Ẩn danh' }}</strong>
        <time>{{ review.created_at | slice: 0, 10 }}</time>
      </div>
      {% if review.title %}<p class="review-item__title">{{ review.title }}</p>{% endif %}
      {% if review.body %}<p class="review-item__body">{{ review.body }}</p>{% endif %}
    </div>
    {% endfor %}
  </section>
  {% endif %}

  {% if related_articles.size > 0 %}
  <section class="section section--related">
    <h2 class="section__title">Bài viết liên quan</h2>
    <div class="article-grid article-grid--small">
      {% for art in related_articles %}
      {% if art.url %}<a href="{{ art.url }}" class="article-card article-card--sm">{% else %}<span class="article-card article-card--sm">{% endif %}
        {% if art.thumbnail_url %}
          <img src="{{ art.thumbnail_url }}" alt="{{ art.title }}"
               class="article-card__img" loading="lazy">
        {% endif %}
        <div class="article-card__body">
          <h3 class="article-card__title">{{ art.title }}</h3>
          <time class="article-card__date">{{ art.published_at | slice: 0, 10 }}</time>
        </div>
      {% if art.url %}</a>{% else %}</span>{% endif %}
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>