All themes

Sandbox Jekyll documentation

Blog Posts Guide

Comprehensive guide to creating and customizing blog posts, including layouts, styles, and components

Post Structure

Basic Post Structure

---
layout: post
title: "Your Post Title"
date: 2024-01-01
last_modified: 2024-01-02
author: John Doe
category: Category Name
header_style: standard  # or overlay
header_image: /assets/img/photos/header.webp
featured_image: /assets/img/photos/featured.webp
sidebar_position: right  # or left / false
excerpt: Your post excerpt for SEO and previews
tags:
  - Tag 1
  - Tag 2
comments: true  # or false
likes: 5  # optional
---

Post Layouts

1. Standard Layout

---
layout: post
header_style: standard
sidebar_position: false
---

2. Overlay Layout

---
layout: post
header_style: overlay
header_image: /assets/img/photos/bg.webp
---

3. Sidebar Variations

# Right Sidebar
sidebar_position: right

# Left Sidebar
sidebar_position: left

# No Sidebar
sidebar_position: false

Post Components

1. Header Components

{% include components/header/header-post.html 
  header_style=page.header_style
  background_image=page.header_image
  category=page.category
  title=page.title
  meta_date=page.date
  meta_author=page.author
  meta_comments=page.comments
  meta_likes=page.likes
%}
{% include components/blog/post/featured-image.html 
  image_url=page.featured_image 
  image_alt=page.title 
%}

3. Post Meta Information

date: 2024-01-01
last_modified: 2024-01-02
author: John Doe
comments: true
likes: 5

Post Features

1. Comments System

{% if site.data.theme.disqus.enabled and page.comments != false %}
  {% include components/blog/disqus-comments.html %}
{% endif %}

2. Post Navigation

{% include components/blog/post/post-navigation.html 
  previous_url=page.previous.url 
  next_url=page.next.url 
%}
{% include components/blog/related-posts.html %}

1. Available Widgets

widgets:
  - name: search
  - name: categories
  - name: popular-posts
  - name: tags
  - name: archive

Best Practices

1. Image Guidelines

  • Use optimized images in WebP format
  • Recommended header image dimensions: 1920x1080px
  • Featured image dimensions: 800x600px
  • Compress images for web performance

2. SEO Optimization

  • Write descriptive titles
  • Include meaningful excerpts
  • Use relevant categories and tags
  • Optimize image alt text
  • Include meta description

3. Content Structure

  • Use proper heading hierarchy
  • Break content into sections
  • Include relevant images and media
  • Format code blocks properly
  • Add internal and external links

Examples

1. Standard Post Example

---
layout: post
title: "Standard Post Layout Example"
date: 2024-01-01
author: John Doe
category: Development
header_style: standard
featured_image: /assets/img/photos/post1.webp
sidebar_position: false
excerpt: A comprehensive example of standard post layout
tags: 
  - Tutorial
  - Guide
comments: true
---

## Introduction
Your post content here...

2. Overlay Post Example

---
layout: post
title: "Overlay Post Layout Example"
date: 2024-01-02
author: Jane Smith
category: Design
header_style: overlay
header_image: /assets/img/photos/header1.webp
featured_image: /assets/img/photos/featured1.webp
sidebar_position: right
excerpt: A showcase of overlay post layout with right sidebar
tags: 
  - Design
  - UI/UX
comments: true
likes: 10
---

## Introduction
Your post content here...