fr1nge.xyz/themes/after-dark/docs/content/feature/featured-posts.md

+++ title = "Featured Posts" description = "Display your favorite blog posts front-and-center." categories = ["navigation"] tags = ["seo", "retention", "layout", "templating", "style"] features = ["code highlighter", "snippets", "related content"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

After Dark helps you showcase your favorite blog posts by allowing you to easily specify a set of pages to appear first in post listings using only site config.

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

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

Use featured posts to drive more traffic to your highest value pages, increase the visibility of niche content or target pages for additional inbound links.

Adjust featured posts from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} by adding:

[params.layout.post.featured]
  limit = 3
  items = [
    "borg-backup-minio-scaleway",
    "dual-boot-manjaro-mojave-macbook-pro",
    "surfing-uncensorable-web",
    "encrypted-internet-wireguard-manjaro-linux"
  ]

Modify items using the {{< external "https://gohugo.io/content-management/organization#slug" "page slugs" />}} from your posts and adjust the featured limit to the total number of items you wish to display. Like Custom Homepage and Related Content performance-optimized thumbnail images will appear automatically when a post contains a Post Image with thumbnail in the name.

Optionally, customize thumbnail styling using Custom Styles:

ul.thumbnail.grid li a:hover figure {
  filter: initial;
}
ul.thumbnail.grid li a figure {
  position: relative;
  line-height: 0;
  margin-bottom: 8px;
}
ul.thumbnail.grid li a:hover figure::after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(0,0,0,0.1) 0,
    rgba(0,0,0,0.3) 100%
  );
}