Hextra – Blog

Hextra v0.12

Fri, 20 Feb 2026 00:00:00 +0000

Hextra v0.12.0 delivers a rich set of new features including page context menus, image zoom, redesigned tabs, and more, plus comprehensive WCAG 2.2 AA accessibility improvements and numerous bug fixes.

Upgrade Guide

No breaking changes are expected for most sites. Update using Hugo Modules:

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

Highlights

Page context menu for copying/viewing Markdown source
Redesigned tabs shortcode with per-tab naming and icon support
Click-to-zoom for Markdown images
GoatCounter analytics support
Option to hide the main sidebar on desktop
Display last modified author via GitInfo
Option to disable prev/next navigation
Built-in archives page for chronological blog post listings
Term glossary shortcode and layout
Exclude pages/sections from llms.txt
Mobile sidebar ordering and labels aligned with menu.main
Stable content width with CSS variable override support
Comprehensive WCAG 2.2 AA accessibility improvements

New Features

Page Context Menu

The page context menu provides a dropdown button that lets you copy the page content as Markdown or view the raw Markdown source. As more users feed documentation into generative AI tools, having quick access to clean Markdown is increasingly useful. Custom links with template variables ({url}, {title}, {markdown_url}) let you wire up “Ask AI” shortcuts or other integrations directly in the menu.

To use the “View as Markdown” and {markdown_url} features, enable the Markdown output format in your site configuration:

hugo.yaml

outputs:
 page: [html, markdown]
 section: [html, rss, markdown]

Then configure the context menu:

hugo.yaml

params:
 page:
 contextMenu:
 enable: true
 links:
 - name: "Ask AI"
 url: "https://example.com?content={markdown_url}"
 icon: "sparkles"

Tabs Revamp and Icon Support

The tabs shortcode has been redesigned. Tab names can now be set directly on each tab shortcode, and an optional icon parameter displays an icon before the tab label. The previous syntax is still supported.

{{< tabs >}}
 {{< tab name="Photos" icon="photograph" >}}Manage and organize your photo library.{{< /tab >}}
 {{< tab name="Music" icon="music-note" >}}Browse and play your favorite tracks.{{< /tab >}}
 {{< tab name="Videos" icon="film" >}}Watch and stream video content.{{< /tab >}}
{{< /tabs >}}

Image Zoom

Enable click-to-zoom on Markdown images with a new configuration option, powered by medium-zoom.

hugo.yaml

params:
 imageZoom:
 enable: true

GoatCounter Analytics

Built-in support for GoatCounter analytics alongside existing Google Analytics, Umami, and Matomo integrations.

Hide Main Sidebar

A new front matter parameter allows hiding the main sidebar on desktop to give content pages the full width.

content/my-page.md

---
title: My Page
sidebar:
 hide: true
---

Last Modified Author

Display the last commit author alongside the “last updated” date using Hugo’s GitInfo.

hugo.yaml

params:
 displayUpdatedAuthor: true

Disable Prev/Next Navigation

Disable the previous/next navigation buttons site-wide:

hugo.yaml

params:
 page:
 displayPagination: false

LLMs.txt Exclusion

Exclude individual pages or entire sections from llms.txt output by setting llms: false in front matter.

content/private-page.md

---
title: "Private Page"
llms: false
---

Archives Page

A new built-in archives layout displays blog posts in a chronological timeline grouped by year, with tags shown inline after each post title.

content/archives/_index.md

---
title: Archives
layout: archives
---

Glossary

A site-wide terminology glossary with a dedicated listing page and a term shortcode for inline definitions.

Accessibility

Comprehensive WCAG 2.2 AA accessibility improvements (#924):

Skip-to-content link and ARIA landmark roles on all pages
ARIA attributes on all interactive widgets (theme toggle, tabs, sidebar, filetree, dropdowns, search, menus)
Keyboard navigation for tabs and theme toggle (arrow keys, Enter, Escape)
prefers-reduced-motion support and global focus-visible styles
15 new i18n accessibility keys with full translations across all 21 locales
Replaced all hardcoded English aria-label strings with i18n lookups

Quality of Life

Improved table readability styles
Markdown attribute support for headers
Better active link detection for multilingual section landing pages
Card shortcode supports optional alt parameter for images
Page bundle images supported in OpenGraph metadata
Content width now stays consistent by default, with CSS variable override support for custom layouts

Fixes

Prevent relref double base-prefix in render-link
Fix tabs rendering when nested inside steps
Align mobile sidebar ordering and labels with menu.main
Respect search.enable in the sidebar
Respect the toc page parameter in mobile dropdown
Enhance FlexSearch match highlighting and safe DOM manipulation
Fix card subtitle positioning
Handle leading slashes in OG image paths for subpath deployments
Fix FlexSearch returning fewer than expected result pages
Change default Umami analytics file to script.js
Fix RSS author lookup for Hugo v0.156.0+ (.Site.Params.Author)

Documentation & i18n

Add Italian localization
Link KaTeX documentation
Update details shortcode docs to angle bracket syntax

Contributors

This release was made possible by contributions from 11 new contributors:

@ghac101 - Umami analytics fix, disable prev/next navigation
@pmarrapese - Markdown attribute support for headers
@Bubbler-4 - Details shortcode documentation
@bloovis - FlexSearch result count fix
@AntoninPvr - Card subtitle positioning fix
@illia-v - Mobile TOC and search toggle fixes
@gallochri - Italian localization
@MatheusFlausino - LLMs.txt exclusion
@daniseijo - Last modified author feature
@confusedkernel - Archives page
@Fenyutanchan - Hugo v0.156.0 RSS author compatibility fix

Additional thanks to returning contributors @KStocky, @ldez, @kowyo, @torbjornbp, @yuri1969, and @PrintN for their continued contributions.

Full Changelog: https://github.com/imfing/hextra/compare/v0.11.1...v0.12.0

Hextra v0.11

Sat, 30 Aug 2025 00:00:00 +0000

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.

Upgrade Guide

No breaking changes are expected for most sites. Update using Hugo Modules:

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.

hugo.yaml

params:
 banner:
 key: "announcement"
 message: Welcome!

Callout Revamp

Callout receive a design refresh for better readability and emphasis across themes.

Analytics: Umami and Matomo

Built-in configuration for analytics providers:

Umami
Matomo

Asciinema Shortcode

Embed terminal recordings from Asciinema using the new Asciinema shortcode.

{{< asciinema id="123456" autoplay=true loop=true >}}

Navbar Enhancements

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

Notably, version 0.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.

hugo.yaml

params:
 externalLinkDecoration: true

Breadcrumbs Enablement

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

content/about.md

---
title: About
breadcrumbs: true
---

Cards and Badges Improvements

Cards: new tagIcon and tagBorder options.
Badges: new colors and border styles.

Quality of Life

Theme toggle: add “System” option
Typography: better task list styles with checkboxes
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

Hextra v0.10

Thu, 14 Aug 2025 00:00:00 +0000

Hextra v0.10.0 is a big release packed with new capabilities, architectural upgrades, and quality-of-life improvements.

It also includes contributions from 10 new contributors and addresses long-standing community requests.

Upgrade Guide

Important

Breaking Changes: This release includes several breaking changes. Please review the checklist and the Migration Guide before upgrading.

Before upgrading to v0.10.0, ensure that you have:

Hugo v0.146.0+ (extended version) installed
Reviewed custom CSS for class name changes (see CSS Class Prefix Changes and Tailwind CSS v4)
Verified that build environment has internet access for asset downloads when LaTeX and/or Mermaid is used

Once ready, update the Hugo module:

hugo mod get -u github.com/imfing/hextra@v0.10.0

New Features

Here is a list of notable new features in this release:

Dropdown Menu Support in Navbar: create hierarchical navigation menus
Enhanced Search Experience: improved search across all headings with better accuracy
llms.txt Support: generate AI-friendly site outline
Table of Contents Scroll Highlighting: automatic heading highlighting during page scroll
Synchronized Tab Switching: synchronize tab selections across multiple tab groups
Blog List Pagination: add pagination controls to blog listing pages
MathJax Support: alternative math rendering engine alongside KaTeX

Dropdown Menu Support in Navbar

Create dropdown menus in your navigation bar for better navigation items organization.

hugo.yaml

menu:
 main:
 - identifier: products
 name: "Products"
 - name: "Product A"
 parent: products
 url: "/product-a"
 - name: "Product B"
 parent: products
 url: "/product-b"

Enhanced Search Experience

Search in all headings: find content across all heading levels, not just page titles
Improved result accuracy: better title handling and linking precision
Fixed result navigation: search results now link to the correct page sections

Huge thanks to @ldez for pushing the search capabilities forward!

llms.txt Support

Hextra now supports llms.txt output format for your site, making your site more accessible to AI tools and language models for context and reference.

hugo.yaml

outputs:
 home: [html, llms]

This will generate an llms.txt file at your site’s root.

Table of Contents Scroll Highlighting

The table of contents now automatically highlights the current section as you scroll through the page, making navigation more intuitive.

Synchronized Tab Switching

Tabs with the same items now synchronize across the page. When sync is enabled, selecting a tab updates all tab groups that share the same items list (and your selection is remembered).

hugo.yaml

params:
 page:
 tabs:
 sync: true

Blog List Pagination

Basic pagination controls have been added to blog listing pages.

hugo.yaml

params:
 blog:
 list:
 pagerSize: 20 # Posts per page

MathJax Support

Render mathematical expressions with MathJax alongside the default KaTeX support. Choose the engine that best fits your needs.

hugo.yaml

params:
 math:
 engine: "mathjax" # default is "katex"

Technical Improvements

Framework and Build System

Tailwind CSS v4 Migration: complete migration to Tailwind CSS v4 with improved customization support.
Hugo Template System: adapted to Hugo’s new template system (v0.146.0+) for future compatibility.
Math Server-Side Rendering: better handling of math equation rendering using Hugo native rendering by default.
FlexSearch 0.8 Upgrade: upgraded search engine FlexSearch for faster, more accurate results with improved CJK (Chinese, Japanese, Korean) content encoding.
Enhanced Asset Management: KaTeX and Mermaid assets support loading from CDN or local

Quality of Life Improvements

Dynamic favicon switching: automatic favicon updates based on color scheme preferences
Reverse pagination: authors can now set reversePagination in page front matter
Google indexing control: new page parameter to block Google indexing when needed
Width handling improvements: better responsive design controls via CSS variables
Styling improvements: modern styles for Markdown table and horizontal line

Bug Fixes and Stability

Giscus theme synchronization: comments now properly follow dark/light mode switches
Search result accuracy: fixed linking issues and title escaping in search results
Tab switching: resolved navigation issues in non-synced tab mode
Phantom scrolling: fixed unwanted scroll behavior when footer is disabled
Image accessibility: prevented duplicate alt text rendering
Link rendering: improved base URL handling for complex site structures

Migration Guide

Hugo Version Requirements: Requires Hugo v0.146.0+ (extended version)
CSS Class Prefix Changes: Component CSS classes now use consistent hextra- prefixing
Asset Management: KaTeX and Mermaid assets now download during build time
Tailwind CSS v4: Internal CSS compilation now uses Tailwind CSS v4.x with hx: prefix

Hugo Version Requirements

Impact: Sites running older Hugo versions

Hextra v0.10.0 requires Hugo v0.146.0 or later (extended version) due to the new template system adoption.

Action required: Update Hugo to v0.146.0+ before upgrading Hextra

CSS Class Prefix Changes

Impact: Sites with custom CSS targeting Hextra component classes

Hextra v0.10.0 introduces consistent hextra- prefixing for majority of component CSS classes to improve maintainability and prevent conflicts with user styles.

Action required: If you have custom CSS targeting Hextra components, update the following class names:

Area	Before	After
Search (container)	`.search-wrapper`	`.hextra-search-wrapper`
Search (input)	`.search-input`	`.hextra-search-input`
Search (results)	`.search-results`	`.hextra-search-results`
Search (title)	`.search-wrapper .title`	`.hextra-search-wrapper .hextra-search-title`
Search (active item)	`.search-wrapper .active`	`.hextra-search-wrapper .hextra-search-active`
Search (no result)	`.search-wrapper .no-result`	`.hextra-search-wrapper .hextra-search-no-result`
Search (prefix)	`.search-wrapper .prefix`	`.hextra-search-wrapper .hextra-search-prefix`
Search (excerpt)	`.search-wrapper .excerpt`	`.hextra-search-wrapper .hextra-search-excerpt`
Search (match)	`.search-wrapper .match`	`.hextra-search-wrapper .hextra-search-match`
Navbar blur	`.nav-container-blur`	`.hextra-nav-container-blur`
Hamburger menu	`.hamburger-menu`	`.hextra-hamburger-menu`
Theme toggle	`.theme-toggle`	`.hextra-theme-toggle`
Language switcher	`.language-switcher`	`.hextra-language-switcher`
Sidebar container	`.sidebar-container`	`.hextra-sidebar-container`
Sidebar active item	`.sidebar-active-item`	`.hextra-sidebar-active-item`
Code filename	`.filename`	`.hextra-code-filename`
Copy icon	`.copy-icon`	`.hextra-copy-icon`
Success icon	`.success-icon`	`.hextra-success-icon`
Steps	`.steps`	`.hextra-steps`

Asset Management for KaTeX and Mermaid

Impact: Sites using KaTeX or Mermaid

Hextra v0.10.0 now downloads KaTeX and Mermaid assets from CDN during build time.

What’s changed:

Build process now requires internet access to download these assets
No more external CDN calls for these assets after build

Action required:

Ensure your build environment has internet access to download assets
Sites in air-gapped environments may need to pre-download these assets and configure Hextra to load them

Tailwind CSS v4

Impact: Sites with extensive custom CSS targeting Hextra Tailwind classes hx-*

While Hextra handles the Tailwind CSS v4 migration internally, sites with heavy customizations may need further adjustments.

What’s changed:

Internal CSS compilation now uses Tailwind CSS v4.x
Utility classes now prefix with hx: rather than hx-

Contributors

This release was made possible by contributions from 10 new contributors:

@oosquare - KaTeX fonts, image render hooks, link handling improvements
@Zabriskije - Phantom scroll fix
@miniwater - Custom footer centering, image alt text improvements
@MattDodsonEnglish - Google indexing controls, OpenGraph documentation
@KStocky - Reverse pagination feature
@PrintN - Documentation showcase additions
@hobobandy - Title spacing improvements
@dlwocks31 - Korean translation updates
@TwoAnts - Giscus theme switching fix
@ldez - Search improvements and bug fixes

Additional thanks to returning contributors @deining and @yuri1969 for their continued support with documentation, translations, and technical improvements.

Full Changelog: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

Markdown Syntax Guide

Wed, 01 Jan 2020 00:00:00 +0000

This article offers a sample of basic Markdown syntax that can be used in Hugo content files.

Basic Syntax

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_

This text will be italic

This will also be italic

This text will be bold

This will also be bold

You can combine them

Lists

Unordered

* Item 1
* Item 2
* Item 2a
* Item 2b

Item 1
Item 2
- Item 2a
- Item 2b

Ordered

1. Item 1
2. Item 2
3. Item 3
1. Item 3a
2. Item 3b

Images

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

Links

[Hugo](https://gohugo.io)

Hugo

Blockquotes

As Newton said:

> If I have seen further it is by standing on the shoulders of Giants.

If I have seen further it is by standing on the shoulders of Giants.

Inline Code

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Code Blocks

Syntax Highlighting

```go
func main() {
 fmt.Println("Hello World")
}
```

func main() {
 fmt.Println("Hello World")
}

Tables

| Syntax | Description |
| --------- | ----------- |
| Header | Title |
| Paragraph | Text |

Syntax	Description
Header	Title
Paragraph	Text

Hextra – Blog

Hextra v0.12

Upgrade Guide

Highlights

New Features

Page Context Menu

Tabs Revamp and Icon Support

Image Zoom

GoatCounter Analytics

Hide Main Sidebar

Last Modified Author

Disable Prev/Next Navigation

LLMs.txt Exclusion

Archives Page

Glossary

Accessibility

Quality of Life

Fixes

Documentation & i18n

Contributors

Hextra v0.11

Upgrade Guide

Highlights

New Features

Top Banner

Callout Revamp

Analytics: Umami and Matomo

Asciinema Shortcode

Navbar Enhancements

External Link Decoration

Breadcrumbs Enablement

Cards and Badges Improvements

Quality of Life

Fixes

Documentation & i18n

Hextra v0.10

Upgrade Guide

New Features

Dropdown Menu Support in Navbar

Enhanced Search Experience

llms.txt Support

Table of Contents Scroll Highlighting

Synchronized Tab Switching

Blog List Pagination

MathJax Support

Technical Improvements

Framework and Build System

Quality of Life Improvements

Bug Fixes and Stability

Migration Guide

Hugo Version Requirements

CSS Class Prefix Changes

Asset Management for KaTeX and Mermaid

Tailwind CSS v4

Contributors

Markdown Syntax Guide

Basic Syntax

Headings

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Emphasis

Lists

Unordered

Ordered

Images

Links

Blockquotes

Inline Code

Code Blocks

Syntax Highlighting

Tables

References