> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog Object

> Display blog posts and articles using the basic blog functionality

The `blog` object contains basic information about blog posts and articles. It's available on blog pages and provides access to post listings, individual posts, and basic blog functionality.

<Info>
  **Usage**: Available on blog pages - use to display blog posts and basic blog functionality
</Info>

## Blog Context Detection

Check what type of blog page is being displayed:

<CodeGroup>
  ```mustache Blog Context Detection theme={null}
  {{#is_list}}
      <!-- Blog overview/list page -->
      <div class="blog-list-page">
          <h1>{{blog.title_current}}</h1>
          
          {{#isBlogTag}}
              <p class="blog-tag-info">{{#lang}}Posts tagged with{{/lang}}: {{current_tag}}</p>
          {{/isBlogTag}}
          
          <!-- Blog posts loop -->
          {{#posts}}
              <!-- Individual post content -->
          {{/posts}}
      </div>
  {{/is_list}}

  {{#is_post}}
      <!-- Individual blog post page -->
      <article class="blog-post-single">
          <h1>{{post.title}}</h1>
          <!-- Single post content -->
      </article>
  {{/is_post}}
  ```
</CodeGroup>

## Blog Posts Listing

Display multiple blog posts using the posts loop:

<CodeGroup>
  ```mustache Blog Posts Grid theme={null}
  {{#is_list}}
  <div class="blog-page">
      <header class="blog-header">
          <h1>{{blog.title_current}}</h1>
          
          <div class="blog-meta">
              <a href="{{blog.rss}}" class="rss-link">
                  <i class="icon-rss"></i>
                  {{#lang}}RSS Feed{{/lang}}
              </a>
          </div>
      </header>
      
      {{#isBlogTag}}
          <div class="blog-tag-notice">
              <p>{{#lang}}Showing posts with selected tag{{/lang}}</p>
          </div>
      {{/isBlogTag}}
      
      <div class="blog-posts-grid">
          {{#posts}}
          <article class="blog-post-card">
              {{#hasImage}}
                  <div class="post-image">
                      <a href="{{url}}">
                          <img src="{{#img}}{{image}}_400x250{{/img}}" 
                               alt="{{title}}"
                               loading="lazy">
                      </a>
                  </div>
              {{/hasImage}}
              
              <div class="post-content">
                  <h3 class="post-title">
                      <a href="{{url}}">{{title}}</a>
                  </h3>
                  
                  <div class="post-meta">
                      <time class="post-date">{{date_pretty}}</time>
                      {{#author}}
                          <span class="post-author">{{#lang}}By{{/lang}} {{author}}</span>
                      {{/author}}
                  </div>
                  
                  {{#content_short}}
                      <div class="post-excerpt">
                          {{&content_short}}
                      </div>
                  {{/content_short}}
                  
                  <a href="{{url}}" class="read-more">
                      {{#lang}}Read More{{/lang}}
                  </a>
              </div>
          </article>
          {{/posts}}
      </div>
  </div>
  {{/is_list}}
  ```

  ```mustache Blog Posts List theme={null}
  {{#is_list}}
  <div class="blog-list-layout">
      <header class="blog-header">
          <h1>{{blog.title_current}}</h1>
          
          {{#blog.rss}}
              <a href="{{blog.rss}}" class="rss-feed">
                  {{#lang}}Subscribe to RSS{{/lang}}
              </a>
          {{/blog.rss}}
      </header>
      
      <div class="blog-posts">
          {{#posts}}
          <article class="blog-post-item">
              <header class="post-header">
                  <h2 class="post-title">
                      <a href="{{url}}">{{title}}</a>
                  </h2>
                  
                  <div class="post-meta">
                      <time datetime="{{date_pretty}}">{{date_pretty}}</time>
                      {{#author}}
                          <span class="author">{{#lang}}By{{/lang}} {{author}}</span>
                      {{/author}}
                  </div>
              </header>
              
              <div class="post-body">
                  {{#hasImage}}
                      <div class="post-thumbnail">
                          <a href="{{url}}">
                              <img src="{{#img}}{{image}}_300x200{{/img}}" alt="{{title}}">
                          </a>
                      </div>
                  {{/hasImage}}
                  
                  <div class="post-content">
                      {{#content_short}}
                          <div class="post-excerpt">
                              {{&content_short}}
                          </div>
                      {{/content_short}}
                      
                      <a href="{{url}}" class="read-more-btn">
                          {{#lang}}Read Full Article{{/lang}}
                      </a>
                  </div>
              </div>
          </article>
          {{/posts}}
      </div>
  </div>
  {{/is_list}}
  ```
</CodeGroup>

## Single Blog Post

Display individual blog post content:

<CodeGroup>
  ```mustache Single Blog Post theme={null}
  {{#is_post}}
  <article class="blog-post-single">
      <!-- Breadcrumbs -->
      <nav class="breadcrumbs">
          {{#breadcrumbs}}
              <a href="{{url}}">{{title}}</a>
              {{^last}} > {{/last}}
          {{/breadcrumbs}}
      </nav>
      
      <!-- Post Header -->
      <header class="post-header">
          <h1 class="post-title">{{post.title}}</h1>
          
          <div class="post-meta">
              <time class="post-date">{{post.date_pretty}}</time>
              {{#post.author}}
                  <span class="post-author">
                      {{#lang}}By{{/lang}} {{post.author}}
                  </span>
              {{/post.author}}
          </div>
      </header>
      
      <!-- Featured Image -->
      {{#post.hasImage}}
      <div class="post-featured-image">
          <img src="{{#img}}{{post.image}}_1200x600{{/img}}" 
               alt="{{post.title}}"
               loading="lazy">
      </div>
      {{/post.hasImage}}
      
      <!-- Post Content -->
      <div class="post-content">
          {{&post.content}}
      </div>
      
      <!-- Post Footer -->
      <footer class="post-footer">
          <div class="post-navigation">
              <a href="{{blog.url}}" class="back-to-blog">
                  <i class="icon-arrow-left"></i>
                  {{#lang}}Back to Blog{{/lang}}
              </a>
          </div>
      </footer>
  </article>
  {{/is_post}}
  ```
</CodeGroup>

## Blog Tags

Display available blog tags when tag filtering is active:

<CodeGroup>
  ```mustache Blog Tags theme={null}
  {{#blog.filter_tags}}
  <div class="blog-tags-section">
      <h3>{{#lang}}Browse by Tags{{/lang}}</h3>
      
      {{#available_tags}}
      <div class="blog-tags">
          {{#available_tags}}
          <a href="{{url}}" class="tag-link" rel="tag">
              {{title}}
          </a>
          {{/available_tags}}
      </div>
      {{/available_tags}}
  </div>
  {{/blog.filter_tags}}
  ```

  ```mustache Blog Tags Navigation theme={null}
  {{#blog.filter_tags}}
  <nav class="blog-tags-nav">
      <h4>{{#lang}}Filter by Tags{{/lang}}</h4>
      <ul class="tags-list">
          {{#available_tags}}
          <li class="tag-item">
              <a href="{{url}}" class="tag-link">
                  #{{title}}
              </a>
          </li>
          {{/available_tags}}
      </ul>
  </nav>
  {{/blog.filter_tags}}
  ```
</CodeGroup>

## Available Properties

### Blog Context Properties

| Property    | Type    | Description                                |
| ----------- | ------- | ------------------------------------------ |
| `is_list`   | Boolean | Check if blog overview is being shown      |
| `is_post`   | Boolean | Check if specific blog post is being shown |
| `isBlogTag` | Boolean | Is blog overview shown based on a tag      |

### Blog Properties

| Property              | Type    | Description                      |
| --------------------- | ------- | -------------------------------- |
| `blog.url`            | String  | Blog link address                |
| `blog.title_current`  | String  | Blog title                       |
| `blog.rss`            | String  | Blog RSS link address            |
| `blog.filter_tags`    | Boolean | Check if tags are active         |
| `blog.available_tags` | Array   | Object with blog tags            |
| `blog.posts`          | Array   | Object containing all blog posts |

### Available Tags Properties (within available\_tags loop)

| Property | Type   | Description     |
| -------- | ------ | --------------- |
| `title`  | String | Tag designation |
| `url`    | String | Tag URL         |

### Posts Properties (within posts loop)

| Property        | Type    | Description                     |
| --------------- | ------- | ------------------------------- |
| `hasImage`      | Boolean | Check if blog post has an image |
| `image`         | String  | Blog post image                 |
| `title`         | String  | Blog post title                 |
| `content_short` | String  | Short preview of blog post      |
| `content`       | String  | Blog post content               |
| `author`        | String  | Blog post author                |
| `date_pretty`   | String  | Blog post date                  |
| `url`           | String  | Blog post link address          |

### Post Properties (single post context)

| Property             | Type    | Description                     |
| -------------------- | ------- | ------------------------------- |
| `post.hasImage`      | Boolean | Check if blog post has an image |
| `post.image`         | String  | Blog post image                 |
| `post.title`         | String  | Blog post title                 |
| `post.content_short` | String  | Short preview of blog post      |
| `post.content`       | String  | Blog post content               |
| `post.author`        | String  | Blog post author                |
| `post.date_pretty`   | String  | Blog post date                  |
| `post.url`           | String  | Blog post link address          |

## Complete Blog Template

<CodeGroup>
  ```mustache Complete Blog Template theme={null}
  <div class="blog-container">
      {{#is_list}}
          <!-- Blog List Page -->
          <div class="blog-list-page">
              <header class="blog-header">
                  <h1>{{blog.title_current}}</h1>
                  
                  <div class="blog-actions">
                      {{#blog.rss}}
                          <a href="{{blog.rss}}" class="rss-link">
                              <i class="icon-rss"></i>
                              {{#lang}}RSS Feed{{/lang}}
                          </a>
                      {{/blog.rss}}
                  </div>
              </header>
              
              {{#isBlogTag}}
                  <div class="tag-filter-notice">
                      <p>{{#lang}}Filtered by tag{{/lang}}</p>
                  </div>
              {{/isBlogTag}}
              
              <!-- Tags Navigation -->
              {{#blog.filter_tags}}
              <nav class="blog-tags">
                  <h3>{{#lang}}Browse Tags{{/lang}}</h3>
                  <div class="tags-container">
                      {{#available_tags}}
                      <a href="{{url}}" class="tag-button">{{title}}</a>
                      {{/available_tags}}
                  </div>
              </nav>
              {{/blog.filter_tags}}
              
              <!-- Posts Grid -->
              <main class="blog-posts">
                  {{#posts}}
                  <article class="post-card">
                      {{#hasImage}}
                          <div class="post-image">
                              <a href="{{url}}">
                                  <img src="{{#img}}{{image}}_400x250{{/img}}" alt="{{title}}">
                              </a>
                          </div>
                      {{/hasImage}}
                      
                      <div class="post-info">
                          <h2 class="post-title">
                              <a href="{{url}}">{{title}}</a>
                          </h2>
                          
                          <div class="post-meta">
                              <time>{{date_pretty}}</time>
                              {{#author}}<span>{{#lang}}By{{/lang}} {{author}}</span>{{/author}}
                          </div>
                          
                          {{#content_short}}
                              <div class="post-excerpt">{{&content_short}}</div>
                          {{/content_short}}
                          
                          <a href="{{url}}" class="read-more">{{#lang}}Read More{{/lang}}</a>
                      </div>
                  </article>
                  {{/posts}}
              </main>
          </div>
      {{/is_list}}
      
      {{#is_post}}
          <!-- Single Post Page -->
          <article class="single-post">
              <header class="post-header">
                  <h1>{{post.title}}</h1>
                  <div class="post-meta">
                      <time>{{post.date_pretty}}</time>
                      {{#post.author}}<span>{{#lang}}By{{/lang}} {{post.author}}</span>{{/post.author}}
                  </div>
              </header>
              
              {{#post.hasImage}}
                  <div class="post-image">
                      <img src="{{#img}}{{post.image}}_1200x600{{/img}}" alt="{{post.title}}">
                  </div>
              {{/post.hasImage}}
              
              <div class="post-content">
                  {{&post.content}}
              </div>
              
              <footer class="post-footer">
                  <a href="{{blog.url}}" class="back-link">
                      {{#lang}}← Back to Blog{{/lang}}
                  </a>
              </footer>
          </article>
      {{/is_post}}
  </div>
  ```
</CodeGroup>

## Usage Notes

<Warning>
  **Limited Blog Object**: The blog object only provides basic functionality (post listings, individual posts, and simple tag filtering). Advanced features like categories, related posts, pagination, SEO properties, and complex metadata are not available.
</Warning>

## Best Practices

<CardGroup cols={2}>
  <Card title="Context Detection" icon="eye">
    Always use is\_list and is\_post to determine the correct template structure
  </Card>

  <Card title="Image Handling" icon="image">
    Check hasImage before displaying images and use proper image optimization
  </Card>

  <Card title="Content Display" icon="file-text">
    Use content\_short for excerpts and full content for complete posts
  </Card>

  <Card title="Tag Filtering" icon="tag">
    Implement tag filtering when blog.filter\_tags is available
  </Card>
</CardGroup>

## Common Blog Layouts

| Layout Type  | Context   | Key Elements                         |
| ------------ | --------- | ------------------------------------ |
| Blog List    | is\_list  | Posts loop, title\_current, RSS link |
| Single Post  | is\_post  | Individual post content, navigation  |
| Tagged Posts | isBlogTag | Filtered posts, tag navigation       |

## Next Steps

<CardGroup cols={2}>
  <Card title="Navigation Object" icon="bars" href="/theme-development/global/navigation">
    Build blog navigation and breadcrumbs
  </Card>

  <Card title="SEO Object" icon="search" href="/theme-development/global/seo">
    Basic SEO optimization for blog pages
  </Card>

  <Card title="Static Pages" icon="file-text" href="/theme-development/pages/static">
    Learn about creating static content pages
  </Card>

  <Card title="Product Object" icon="box" href="/theme-development/pages/product">
    Learn about product page implementation
  </Card>
</CardGroup>