refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
---
2025-08-14 01:43:35 +08:00
title: "Hextra v0.10"
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
date: 2025-08-14
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
tags:
- Release
draft: true
---
2025-08-14 01:48:52 +08:00
Hextra v0.10.0 is a big release packed with new capabilities, architectural upgrades, and quality-of-life improvements.
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
2025-08-14 01:43:35 +08:00
<!-- more -->
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
2025-08-14 14:49:55 +08:00
It also includes contributions from 10 [new contributors ](#contributors ) and addresses long-standing community requests.
## Upgrade Guide
> [!IMPORTANT]
2025-08-14 16:28:36 +08:00
> **Breaking Changes**: This release includes several breaking changes. Please review the checklist and the [Migration Guide](#migration-guide) before upgrading.
2025-08-14 14:49:55 +08:00
2025-08-14 16:28:36 +08:00
Before upgrading to v0.10.0, ensure that you have:
2025-08-14 14:49:55 +08:00
- Hugo v0.146.0+ (extended version) installed
- Reviewed custom CSS for class name changes (see [CSS Class Prefix Changes ](#css-class-prefix-changes ) and [Tailwind CSS v4 ](#tailwind-css-v4 ))
2025-08-14 16:28:36 +08:00
- Verified that build environment has internet access for asset downloads when LaTeX and/or Mermaid is used
2025-08-14 14:49:55 +08:00
Once ready, update the Hugo module:
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
```bash
hugo mod get -u github.com/imfing/hextra@v0 .10.0
```
2025-08-14 01:43:35 +08:00
## New Features
2025-08-14 17:11:37 +08:00
Here is a list of notable new features in this release:
- [**Dropdown Menu Support in Navbar** ](#dropdown-menu-support-in-navbar ): create hierarchical navigation menus
- [**Enhanced Search Experience** ](#enhanced-search-experience ): improved search across all headings with better accuracy
- [**llms.txt Support** ](#llmstxt-support ): generate AI-friendly site outline
- [**Table of Contents Scroll Highlighting** ](#table-of-contents-scroll-highlighting ): automatic heading highlighting during page scroll
- [**Synchronized Tab Switching** ](#synchronized-tab-switching ): synchronize tab selections across multiple tab groups
- [**Blog List Pagination** ](#blog-list-pagination ): add pagination controls to blog listing pages
- [**MathJax Support** ](#mathjax-support ): alternative math rendering engine alongside KaTeX
2025-08-14 01:48:52 +08:00
### Dropdown Menu Support in Navbar
2025-08-14 01:43:35 +08:00
Create dropdown menus in your navigation bar for better navigation items organization.
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: products
name: "Products"
- name: "Product A"
parent: products
url: "/product-a"
- name: "Product B"
parent: products
url: "/product-b"
```
2025-08-14 01:48:52 +08:00
### Enhanced Search Experience
2025-08-14 01:43:35 +08:00
2025-08-14 16:28:36 +08:00
- **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
2025-08-14 01:43:35 +08:00
2025-08-14 16:28:36 +08:00
Huge thanks to [@ldez ](https://github.com/ldez ) for pushing the search capabilities forward!
2025-08-14 01:43:35 +08:00
2025-08-14 01:48:52 +08:00
### llms.txt Support
2025-08-14 01:43:35 +08:00
Hextra now supports [llms.txt ](https://llmstxt.org/ ) output format for your site, making your site more accessible to AI tools and language models for context and reference.
```yaml {filename="hugo.yaml"}
outputs:
home: [html, llms]
```
This will generate an `llms.txt` file at your site's root.
2025-08-14 09:32:58 +08:00
2025-08-14 01:48:52 +08:00
### Table of Contents Scroll Highlighting
2025-08-14 01:43:35 +08:00
The table of contents now automatically highlights the current section as you scroll through the page, making navigation more intuitive.
2025-08-14 09:32:58 +08:00
### 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).
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
### Blog List Pagination
Basic pagination controls have been added to blog listing pages.
```yaml {filename="hugo.yaml"}
params:
blog:
list:
pagerSize: 20 # Posts per page
```
2025-08-14 01:48:52 +08:00
### MathJax Support
2025-08-14 01:43:35 +08:00
Render mathematical expressions with [MathJax ](https://www.mathjax.org/ ) alongside the default KaTeX support. Choose the engine that best fits your needs.
```yaml {filename="hugo.yaml"}
params:
math:
engine: "mathjax" # default is "katex"
```
## Technical Improvements
### Framework and Build System
2025-08-14 16:28:36 +08:00
- **Tailwind CSS v4 Migration**: complete migration to [Tailwind CSS v4 ](https://tailwindcss.com/blog/tailwindcss-v4 ) with improved customization support.
- **Hugo Template System**: adapted to Hugo's [new template system ](https://gohugo.io/templates/new-templatesystem-overview/ ) (v0.146.0+) for future compatibility.
- **Math Server-Side Rendering**: better handling of math equation rendering using Hugo native rendering by default.
2025-08-14 17:11:37 +08:00
- **FlexSearch 0.8 Upgrade**: upgraded search engine [FlexSearch ](https://github.com/nextapps-de/flexsearch ) for faster, more accurate results with improved CJK (Chinese, Japanese, Korean) content encoding.
2025-08-14 16:28:36 +08:00
- **Enhanced Asset Management**: KaTeX and Mermaid assets support loading from CDN or local
2025-08-14 01:43:35 +08:00
## Quality of Life Improvements
2025-08-14 16:28:36 +08:00
- **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
2025-08-14 01:43:35 +08:00
## Bug Fixes and Stability
2025-08-14 16:28:36 +08:00
- **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
2025-08-14 01:43:35 +08:00
2025-08-14 14:49:55 +08:00
---
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
## Migration Guide
2025-08-14 16:28:36 +08:00
- [**Hugo Version Requirements** ](#hugo-version-requirements ): Requires Hugo v0.146.0+ (extended version)
- [**CSS Class Prefix Changes** ](#css-class-prefix-changes ): Component CSS classes now use consistent `hextra-` prefixing
- [**Asset Management** ](#asset-management-for-katex-and-mermaid ): KaTeX and Mermaid assets now download during build time
- [**Tailwind CSS v4** ](#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
2025-08-14 01:43:35 +08:00
#### CSS Class Prefix Changes
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
2025-08-14 01:43:35 +08:00
**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:
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
| 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` |
2025-08-14 01:43:35 +08:00
#### 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
2025-08-14 14:49:55 +08:00
**Impact**: Sites with extensive custom CSS targeting Hextra Tailwind classes `hx-*`
2025-08-14 01:43:35 +08:00
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
2025-08-14 14:49:55 +08:00
- Utility classes now prefix with `hx:` rather than `hx-`
2025-08-14 01:43:35 +08:00
## Contributors
This release was made possible by contributions from 10 new contributors:
- [@oosquare ](https://github.com/oosquare ) - KaTeX fonts, image render hooks, link handling improvements
- [@Zabriskije ](https://github.com/Zabriskije ) - Phantom scroll fix
- [@miniwater ](https://github.com/miniwater ) - Custom footer centering, image alt text improvements
- [@MattDodsonEnglish ](https://github.com/MattDodsonEnglish ) - Google indexing controls, OpenGraph documentation
- [@KStocky ](https://github.com/KStocky ) - Reverse pagination feature
- [@PrintN ](https://github.com/PrintN ) - Documentation showcase additions
- [@hobobandy ](https://github.com/hobobandy ) - Title spacing improvements
- [@dlwocks31 ](https://github.com/dlwocks31 ) - Korean translation updates
- [@TwoAnts ](https://github.com/TwoAnts ) - Giscus theme switching fix
- [@ldez ](https://github.com/ldez ) - Search improvements and bug fixes
Additional thanks to returning contributors [@deining ](https://github.com/deining ) and [@yuri1969 ](https://github.com/yuri1969 ) for their continued support with documentation, translations, and technical improvements.
refactor(css): add prefix to component classes for consistency (#744)
* refactor(navbar): add hextra prefix to navbar and hamburger menu classes
- Updated CSS class names from `nav-container` to `hextra-nav-container` and `hamburger-menu` to `hextra-hamburger-menu` for improved clarity and consistency across the project.
- Adjusted related JavaScript and documentation to reflect the new class names.
* refactor(search): update class names for search components
- Renamed CSS classes from `search-wrapper`, `search-input`, `active`, `no-result`, `prefix`, `excerpt`, and `match` to `hextra-search-wrapper`, `hextra-search-input`, `hextra-search-active`, `hextra-search-no-result`, `hextra-search-prefix`, `hextra-search-excerpt`, and `hextra-search-match` for improved clarity and consistency.
- Updated JavaScript selectors to match the new class names, ensuring functionality remains intact.
- Adjusted HTML structure to reflect the new class naming convention.
* refactor(search): update search component class names for consistency
- Renamed existing search-related CSS classes to include the `hextra` prefix for improved clarity and consistency.
- Added optional nested classes for enhanced customization of the search UI, including titles, active states, and result snippets.
- Removed outdated breadcrumb section as no specific class is available.
* refactor(sidebar): rename sidebar classes for consistency
- Updated CSS and JavaScript to replace `sidebar-container` with `hextra-sidebar-container` and `sidebar-active-item` with `hextra-sidebar-active-item` for improved clarity and consistency across the project.
- Adjusted related documentation to reflect the new class names.
* refactor(language & theme): update class names for consistency
- Renamed language switcher and theme toggle classes to include the `hextra` prefix for improved clarity and consistency across the project.
- Updated related JavaScript selectors and documentation to reflect the new class names.
* refactor(css & html): rename classes for consistency and clarity
- Updated various CSS class names to include the `hextra` prefix, enhancing consistency across the project. This includes renaming classes such as `content` to `hextra-content`, `filename` to `hextra-code-filename`, and `steps` to `hextra-steps`.
- Adjusted related HTML and JavaScript to reflect the new class names, ensuring functionality and styling remain intact.
- Updated documentation to include the new class names for better clarity.
* refactor(language): update class names for language options
- Renamed the `language-options` class to `hextra-language-options` for consistency with the existing `hextra` prefix convention.
- Updated the corresponding HTML to reflect the new class name, ensuring clarity and uniformity across the project.
* refactor(css & html): rename classes for consistency and clarity
- Renamed CSS classes to include the `hextra` prefix, such as changing `subheading-anchor` to `hextra-subheading-anchor` and `footnotes` to `hextra-footnotes`, enhancing consistency across the project.
- Updated related HTML and documentation to reflect the new class names, ensuring clarity and uniformity.
* feat(typography): add styling for horizontal lines
- Introduced new styles for horizontal lines to enhance visual separation in content. The styles apply margin and border color adjustments, ensuring consistency with the overall design.
* feat(blog): add draft release announcement for Hextra v0.10.0
- Created a new markdown file for the draft release announcement of Hextra v0.10.0, including upgrade instructions and author details.
- The announcement is currently marked as a draft and may be updated before the official release.
* refactor(css & html): rename `hextra-content` class to `content` for consistency
- Updated the `hextra-content` class to simply `content` across various HTML files and CSS, enhancing clarity and consistency in the codebase.
- Adjusted the `package.json` script for the development server to include the `-F` flag for better functionality.
* refactor(typography & markdown): enhance table styling and markdown syntax
- Updated CSS for tables to improve styling, including adjustments to margins, borders, and text properties for better readability.
- Revised markdown documentation to standardize table formatting and improve clarity, including consistent syntax for headers and lists.
- Enhanced examples in the documentation to reflect the updated styling and ensure accurate representation of output.
* fix(blog): update text color for improved accessibility
- Modified the text color in the blog single layout to enhance readability in dark mode by adding a dark text color class.
- Ensured consistency in styling for better user experience across different themes.
* docs(blog): update draft release announcement for Hextra v0.10.0
- Revised the "What's New" section to include a TODO placeholder for future updates.
- Added a comprehensive migration guide detailing the CSS class prefix changes to enhance consistency and avoid conflicts.
- Updated the announcement to reflect the new class naming conventions for various components.
* chore: rebuild css
2025-08-13 22:55:38 +08:00
2025-08-14 01:43:35 +08:00
**Full Changelog**: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0
