hextra_mirror/exampleSite/content/blog/v0.11.md

---
title: "Hextra v0.11"
date: 2025-08-30
authors:
  - name: imfing
    link: https://github.com/imfing
    image: https://github.com/imfing.png
tags:
  - Release
---

Hextra v0.11.0 focuses on UX polish and useful new components: site-wide banner, improved callouts and badges, richer cards, analytics integrations, and several navigation refinements. It also ships stability fixes and documentation updates.

<!--more-->

## Upgrade Guide

No breaking changes are expected for most sites. Update using [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/):

```bash
hugo mod get -u github.com/imfing/hextra
```

## Highlights

- Top banner component for announcements
- Revamped callouts with clearer styles
- Umami and Matomo analytics support
- Asciinema shortcode for terminal recordings
- External link decoration option
- Breadcrumbs for single pages (non-docs, non-blogs)
- Navbar enhancements: icon link item and improved positions
- Improved badges and cards customization
- Theme toggle supports "System"

## New Features

### Top Banner

Add a site-wide, dismissible banner for announcements, launches, or status messages.

```yaml {filename="hugo.yaml"}
params:
  banner:
    key: "announcement"
    message: Welcome!
```

![Top Banner](https://github.com/user-attachments/assets/33a08c9b-db84-4200-b37c-1a53c1bef08d)

### Callout Revamp

[Callout]({{% relref "docs/guide/shortcodes/callout" %}}) receive a design refresh for better readability and emphasis across themes.

![Callout refresh](https://github.com/user-attachments/assets/b3154dbb-e582-4c84-a8b8-1ecb02c3464d)

### Analytics: Umami and Matomo

Built-in configuration for analytics providers:
- [Umami]({{% relref "docs/guide/configuration.md#umami-analytics" %}})
- [Matomo]({{% relref "docs/guide/configuration.md#matomo-analytics" %}})

### Asciinema Shortcode

Embed terminal recordings from [Asciinema](https://www.asciinema.org/) using the new [Asciinema shortcode]({{% relref "docs/guide/shortcodes/asciinema.md" %}}).

```md
{{</* asciinema id="123456" autoplay=true loop=true */>}}
```

![Asciinema](https://github.com/user-attachments/assets/3c33a8ef-3c01-4e30-9832-3ccb784ec538)

### Navbar Enhancements

- Support icons for link items in the navbar
- Refine menu positions to play nicely with the language switcher and other items

![Navbar with icon item](https://github.com/user-attachments/assets/6c035eee-cd7d-44d8-bcf7-9cbd7f92ab42)

Notably, version [0.10.2](https://github.com/imfing/hextra/releases/tag/v0.10.2) enables the addition of language switchers and theme toggles to the navbar.

### External Link Decoration

Optionally add a subtle external-link decoration to outbound links.

```yaml {filename="hugo.yaml"}
params:
  externalLinkDecoration: true
```

### Breadcrumbs Enablement

Enable breadcrumbs on single pages (non-docs, non-blogs) by setting `breadcrumbs: true` in front matter.

```yaml {filename="content/about.md"}
---
title: About
breadcrumbs: true
---
```

### Cards and Badges Improvements

- [Cards]({{% relref "docs/guide/shortcodes/cards.md" %}}): new `tagIcon` and `tagBorder` options.
- [Badges]({{% relref "docs/guide/shortcodes/others.md" %}}): new colors and border styles.

## Quality of Life

- Theme toggle: add "System" option
  ![Theme toggle](https://github.com/user-attachments/assets/54a1d315-9243-4814-9154-6e63af9ea2e8)
- Typography: better task list styles with checkboxes
  ![Task list](https://github.com/user-attachments/assets/53722651-63b6-4469-95e7-326849a30306)
- Language switcher: improved ordering with icon menu items

## Fixes

- Giscus: sync theme and language properly
- Cards: fix badge rendering with RTL
- Navbar: refine menu positions and interactions

## Documentation & i18n

- Docs: new page covering Hextra shortcodes
- i18n: add `copyCode` and `system` translations to `zh-cn`

---

**Full Changelog**: https://github.com/imfing/hextra/compare/v0.10.2...v0.11.0