The Sans theme offers three distinct homepage layouts to accommodate various website styles and content presentation preferences. This guide provides detailed configuration instructions for each layout type.

Available Homepage Layouts

The theme supports three homepage variations, each designed for specific use cases:

1. Only Posts Layout

This streamlined layout presents a chronological list of posts with titles and publication dates, ideal for content-focused websites.

2. Logo Page Layout

A centered avatar-based layout featuring minimal biographical information, suitable for personal portfolios and professional profiles.

3. Blog Page Layout

A comprehensive blog homepage featuring a hero section, newsletter integration, and enhanced post previews with metadata and cover images.

Hero Section

Newsletter Section

Posts Display

❮ ❯

Blog Page Homepage Layout

Configuration Instructions

Only Posts Layout

This layout provides a minimalist approach, displaying only post titles and publication dates.

Configuration Parameters

Navigate to config/params.toml and apply the following configuration:

1
2
3

[homepage]
  onlyPostsInHomePage = true
  dateFormat = "2 Jan 2006"

Additional Notes

• Unused homepage parameters in the [homepage] section may be removed, commented out, or left unchanged—they will not interfere with this configuration
• Introductory content displayed above the post list is sourced from content/_index.md and can be customized using standard Markdown syntax

Logo Page Layout

This layout features a centered avatar with essential biographical information and optional social media links.

Configuration Parameters

1
2
3
4
5
6
7
8
9

[homepage]
  onlyPostsInHomePage = false
  homePageLogo = true
  homePageTitle = "JOHN DOE"
  homePageTagLine = "Welcome to my website"
  homePageLogoPath = 'images/avatar.png'
  homePageAbout = "Hi! I'm John Doe, a passionate blogger and portfolio creator. Explore my latest posts and projects here."
  dateFormat = "2 Jan 2006"
  showSocialLinksHome = true

Image Asset Location

Place your avatar image in the following directory structure:

1
2
3
4

your-hugo-site/
└── assets/
    └── images/
        └── avatar.png

Reference the image using the relative path: images/avatar.png

Social Media Integration

Social media link visibility is controlled by the showSocialLinksHome parameter:

• When true: Configured social links are displayed on the homepage
• When false: Social links are hidden from the homepage

Configuring Social Links

Add your social media profiles in hugo.toml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

[social]
  facebook = "https://facebook.com/yourpage"
  x = "https://x.com/yourhandle"
  instagram = "https://instagram.com/yourhandle"
  linkedin = "https://linkedin.com/in/yourprofile"
  youtube = "https://youtube.com/@yourchannel"
  tiktok = "https://tiktok.com/@yourhandle"
  github = "https://github.com/yourusername"
  reddit = "https://reddit.com/u/yourusername"
  pinterest = "https://pinterest.com/yourhandle"
  snapchat = "https://snapchat.com/add/yourhandle"
  discord = "https://discord.gg/yourinvite"
  twitch = "https://twitch.tv/yourchannel"
  telegram = "https://t.me/yourhandle"
  whatsapp = "https://wa.me/yourphonenumber"
  mastodon = "https://mastodon.social/@yourhandle"
  bluesky = "https://bsky.app/profile/yourhandle"
  threads = "https://threads.net/@yourhandle"
  medium = "https://medium.com/@yourhandle"

Note: Only parameters with assigned values will be displayed. To hide specific platforms, remove or comment out the corresponding lines.

Blog Page Layout

The most feature-rich homepage layout, incorporating a hero section with welcome message, newsletter subscription functionality, and enhanced post previews.

Configuration Parameters

1
2
3
4
5
6
7
8
9

[homepage]
  onlyPostsInHomePage = false
  homePageLogo = false 
  homePageCoverPath = 'images/img_forest.jpg'
  homePageCoverTitle = "Welcome to our blog and portfolio."
  homePageCoverTagLine = "Discover insights, stories, and ideas that inspire. Join our community of readers exploring the latest trends and timeless wisdom."
  homePageSummaryLength = 500
  homePagePostDate = false 
  dateFormat = "2 Jan 2006"

Layout Activation Logic

The Blog Page layout is automatically activated when both onlyPostsInHomePage and homePageLogo are set to false. This hierarchical configuration system ensures only one layout is active at any time.

Post Preview Features

The Blog Page layout enhances post displays with:

• Cover images (if specified in post front matter)
• Author attribution
• Publication dates (when enabled)
• Category and tag listings
• Post summaries with configurable length
• Boxed card-style presentation

Layout Selection Guide

Choose the appropriate homepage layout based on your website’s primary purpose:

Date Format Reference

The dateFormat parameter uses Go’s time formatting syntax. Common formats: