fr1nge.xyz/themes/after-dark/docs/content/feature/custom-homepage.md

+++ title = "Custom Homepage" description = "Hide the blog and specify how content is shown." categories = ["customizing"] tags = ["layout", "templating", "style", "metadata", "semantics", "robots"] features = ["code highlighter", "snippets", "related content"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

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.

{{< hackcss-alert >}} {{< figure src="/images/screenshots/feature-homepage-fs8.png"

}} {{< /hackcss-alert >}}

{{< hackcss-card header="Quick Example" >}} {{< highlight toml "linenos=inline" >}} [params.layout.home] hide_blog = true

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

params.layout.home.section type = "code" # Required, name of section to show on homepage limit = 4 # Optional, set number of items to show from section weight = 2 # Optional, choose layout order for section thumbs = ["fill", "400x400"] # Optional, thumbnail image processing

params.layout.home.section type = "site" limit = 2 weight = 3

params.layout.home.section type = "post" limit = 3 weight = 4 {{< /highlight >}} {{< /hackcss-card >}}

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 {{< external "https://gohugo.io/content-management/image-processing/#readout" "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.