post

Boxed Post with Sidebar Guide

Boxed Post with Sidebar Guide

Overview

This guide explains how to create a boxed blog post with a sidebar using the Snowlake Jekyll theme.

Front Matter Configuration

Layout and Basic Information

layout: posts/post-boxed-sidebar   # Required layout for boxed sidebar post
title: "Post Title"                # Main title of the blog post
date: YYYY-MM-DD HH:MM:SS +TIMEZONE  # Publication date and time

Categorization and Metadata

categories: [category1, category2]  # Post categories
tags: [tag1, tag2]                  # Post tags
author: "Author Name"               # Post author
post_image: "/path/to/image.webp"   # Featured post image

Advanced Metadata

badge_color: "bg-leaf"              # Optional badge color
slider_post: true/false             # Include in slider
meta_title: "SEO Title"             # SEO-optimized title
meta_description: |                 # SEO description
  Detailed description of the post
boxed-sidebar: true                 # Enable boxed sidebar

Code Highlighting Configuration

code_samples:                       # Optional code samples
  - language: python                # Programming language
    code: |                         # Code block
      def example_function():
          return "Hello, World!"

  - language: javascript
    code: |
      const exampleFunction = () => {
          console.log("Example");
      };      

gallery:                            # Optional image gallery
  - img: "/path/to/thumbnail.webp"  # Thumbnail image
    full_src: "/path/to/full-image.webp"  # Full-size image
    alt: "Image Description"        # Alt text
    caption: "Image Caption"        # Optional caption

Boxed Sidebar Features

  • Distinct visual container for post content
  • Integrated sidebar with related content
  • Supports code highlighting
  • Flexible image gallery
  • Responsive design

Best Practices

Content Writing

  1. Use clear, engaging headings
  2. Break content into digestible sections
  3. Utilize code samples effectively
  4. Include relevant images
  5. Maintain a consistent writing style

Code Highlighting

  • Use meaningful variable and function names
  • Add comments to explain complex code
  • Keep code samples concise
  • Demonstrate practical use cases
  • Use high-quality images
  • Provide descriptive alt text
  • Include informative captions
  • Maintain consistent image styles

Customization Options

  • Modify boxed sidebar content
  • Customize badge colors
  • Add multiple code samples
  • Create image galleries
  • Control slider and trending flags

SEO and Performance

  • Optimize meta title and description
  • Use relevant categories and tags
  • Compress images
  • Implement lazy loading
  • Use semantic HTML

Accessibility Considerations

  • Provide alt text for images
  • Ensure color contrast
  • Use semantic heading structure
  • Support screen readers
  • Add ARIA labels

Troubleshooting

  • Verify front matter syntax
  • Check image and code sample paths
  • Validate Markdown formatting
  • Test sidebar functionality
  • Ensure responsive design

Example Workflow

  1. Choose a compelling topic
  2. Prepare code samples
  3. Select gallery images
  4. Configure front matter
  5. Write engaging content
  6. Review and refine
  7. Publish