Post Configuration

This document provides a comprehensive guide for post configuration in the Litos theme, including front matter settings and image display options.

Create a New Posth2

To create a new Markdown file, follow these steps:

1. Navigate to the src/content/posts directory.
2. Create a new Markdown file with a .md extension.

Front Matter Configurationh2

The front matter in Markdown files is managed through Astro Content Collections, which enforces a consistent structure across all posts. Below is a detailed specification of available front matter properties:

---
title: 'Your Post Title'
description: 'A brief description of your post'
pubDate: 2025-05-01
updatedDate: 2025-05-01
author: 'Dnzzk2'
recommend: false
heroImage: 'image-filename.png'
ogImage: 'og-image-filename.png'
heroImageLayout: 'left'
heroImageAspectRatio: '16/9'
tags: ['tag1', 'tag2']
---

Property Specificationsh3

Image Display Configurationh2

When the post list type is set to image, the theme provides flexible image handling:

• If heroImage is not specified, the system uses defaultHeroImage from POSTS_CONFIG in config.ts
• If ogImage is omitted, the site’s default ogimage is applied

Display Variationsh3

The theme supports three distinct image display styles based on the heroImage configuration:

1. Without Hero Image:

2. With Hero Image (Default 16/9 Ratio):

3. With Hero Image (3/4 Ratio):

Image Processing Toolsh2

Litos includes built-in image optimization tools to help reduce website loading times and improve performance. The project provides two main scripts for image processing:

Optimize Images Scripth3

The optimize script is a powerful tool for batch processing images, offering various optimization options:

pnpm run optimize -- [options]

Available Optionsh4

Examplesh4

1. Basic optimization with default settings:

pnpm run optimize -- -i public/images

2. Convert images to WebP with 85% quality:

pnpm run optimize -- -i public/images -f webp -q 85

3. Resize images to maximum width of 1200px:

pnpm run optimize -- -i public/images -w 1200

4. Save optimized images to a different directory:

pnpm run optimize -- -i public/images -o public/optimized

Alternative Toolsh3

While the built-in tools are recommended for seamless integration, you can also use external services for image optimization:

• TinyPNG - Excellent compression for PNG and JPEG files
• Squoosh - Browser-based image optimization with various formats support
• ImageOptim - Desktop application for lossless image optimization

Hero image and OG imageh3

Hero images and OG images play crucial roles in enhancing your content’s visual appeal and social media presence. Here are some recommended tools and guidelines for creating effective images:

Recommended Toolsh4

1. OG Image Generators:

   • Free OG Image Generator - Simple and quick OG image creation

2. OG Preview Tools:

   • Social Share Preview - Test OG images across platforms
   • Metatags.io - Preview and debug social media cards

Size Recommendationsh4

• Hero Images:

  • Landscape (16/9): 1200×675px or 1920×1080px
  • Portrait (3/4): 800×1067px or 1200×1600px

• OG Images:

  • Optimal size: 1200×630px (Facebook, Twitter, LinkedIn)
  • Minimum size: 600×315px
  • Aspect ratio: 1.91:1

Snippetsh2

The .vscode/litos.code-snippets file provides three code snippets for quickly generating Markdown frontmatter. These snippets help you create different types of blog post templates efficiently.

Basic Template (No Image)h3

• Trigger: postfm or postnoimg
• Purpose: Creates a basic blog post template without images
• Placeholders:
  • ${1:Your Post Title}: Article title
  • ${2:A brief description}: Article description
  • ${3-4:YYYY-MM-DD}: Publication and update dates (auto-filled with current date)
  • ${5:Author}: Author name (defaults to filename)
  • ${6|false,true|}: Featured post toggle
  • ${7-8:tag}: Article tags

Example Output:

---
title: 'Getting Started with TypeScript'
description: 'A comprehensive guide to TypeScript fundamentals'
pubDate: 2024-01-15
updatedDate: 2024-01-15
author: 'John Doe'
recommend: false
tags: ['TypeScript', 'Programming']
---

16/9 Image Templateh3

• Trigger: postfm16 or post169
• Purpose: Creates a template with 16/9 landscape image support
• Additional Fields:
  • heroImage: Cover image filename
  • ogImage: Social media preview image
  • heroImageAspectRatio: Fixed to ‘16/9’

Example Output:

---
title: 'Modern Web Design Trends'
description: 'Exploring the latest trends in web design for 2024'
pubDate: 2024-01-15
updatedDate: 2024-01-15
author: 'Jane Smith'
recommend: true
heroImage: 'web-design-trends.png'
ogImage: 'web-design-trends.png'
heroImageAspectRatio: '16/9'
tags: ['Design', 'Web Development']
---

3/4 Image Templateh3

• Trigger: postfm34 or post34
• Purpose: Creates a template with 3/4 portrait image support
• Additional Fields:
  • Same as 16/9 template, but heroImageAspectRatio is fixed to ‘3/4’

Example Output:

---
title: 'Portrait Photography Tips'
description: 'Essential tips for capturing stunning portrait photos'
pubDate: 2024-01-15
updatedDate: 2024-01-15
author: 'Alex Johnson'
recommend: false
heroImage: 'portrait-tips.png'
ogImage: 'portrait-tips.png'
heroImageAspectRatio: '3/4'
tags: ['Photography', 'Tutorial']
---

Usage Instructionsh3

1. Create a new .md file in VS Code
2. Type the trigger prefix (e.g., postfm) and press Tab
3. Use Tab to navigate between placeholders and fill in content
4. After completing all placeholders, the cursor will position at the article body