Custom Homepage

After Dark provides a configurable way to customize the content shown on your homepage without the need for creating a Custom Layout. Use it to hide the blog and display recent content from various sections of your site.

 1[params.layout.home]
 2  hide_blog = true
 3
 4[[params.layout.home.section]]
 5  type = "about"
 6  weight = 1
 7
 8[[params.layout.home.section]]
 9  type = "code" # Required, name of section to show on homepage
10  limit = 4 # Optional, set number of items to show from section
11  weight = 2 # Optional, choose layout order for section
12  thumbs = ["fill", "400x400"] # Optional, thumbnail image processing
13
14[[params.layout.home.section]]
15  type = "site"
16  limit = 2
17  weight = 3
18
19[[params.layout.home.section]]
20  type = "post"
21  limit = 3
22  weight = 4

Start by adding a section to display:

[[params.layout.home.section]]
  type = "post"

Limit the number of items shown:

[[params.layout.home.section]]
  type = "post"
  limit = 3

Then hide the blog if you like:

[params.layout.home]
  hide_blog = true

And use the space to add more sections:

[[params.layout.home.section]]
  type = "post"

[[params.layout.home.section]]
  type = "podcast"

Or add stand-alone pages too:

[[params.layout.home.section]]
  type = "about"

And display them in order by weight:

[[params.layout.home.section]]
  type = "about"
  weight = 1

[[params.layout.home.section]]
  type = "podcast"
  weight = 2

With each section containing generic Structured Data:

Homepage
├── Thing
└── ItemList
    ├── Thing
    ├── Thing
    └── Thing

Which may be enhanced using front matter:

├── archetypes
├── content
│   └── about.md
│   └── podcast
│       ├── _index.md
│       ├── secrets-of-silicon-valley
│       ├── the-5g-dragnet
│       └── language-is-a-weapon
├── layouts

title = "About"
description = "Information about the site."
[schema]
  type = "AboutPage" # inside about.md

title = "Podcasts"
description = "Live on the Web. Fresh to your head."
[schema]
  type = "Audiobook" # inside _index.md

Resulting in machine-readable structure:

Homepage
├── AboutPage
└── ItemList
    ├── Audiobook
    ├── Audiobook
    └── Audiobook

Including name and description properties consistent between what’s shown to users and what will appear in SERPs.

Item lists may include thumbnail images generated automatically for any ItemList element using a Post Images-formatted resource bundle and containing thumbnail in the name:

[[resources]]
  src = "**hyperdrive-logo.png"
  name = "header thumbnail"

Images include high-performance defaults and may be modified using Hugo Image Processing via config using the thumbs property in site config:

[[params.layout.home.section]]
  type = "code"
  thumbs = ["fill", "400x400"]

Valid image processing options are fit, resize and fill, and image dimensions may be omitted for a 4x3 aspect ratio thumbnail.