Demo Blog

The search functionality in the theme is powered by Fuse.js and runs entirely in the browser. This post explains how it works, how the search index is built, and how to customize it for multilingual and subdirectory deployments.

How search works

Search is client-side:

1. Hugo generates a JSON index (index.json) that contains the title, plain content, tags, categories, and other metadata for each page.
2. The search page loads fuse.js and downloads the JSON index.
3. Fuse.js performs a fast in-browser search and renders the results.

Because the index is a normal Hugo output, it follows your baseURL and language configuration automatically.

The Adritian theme includes a responsive-image shortcode that generates optimized <picture> elements with WebP conversion, multiple srcset widths, and lazy loading.

Basic usage

Place your images in the assets/ directory and reference them with the shortcode:

The shortcode above produces a <picture> element with:

• WebP srcset at 400w, 800w, and 1200w (up to the original image width)
• Original format srcset at the same widths
• Lazy loading via loading="lazy" and decoding="async"
• CLS prevention via width and height attributes

Custom sizes hint

Use the sizes parameter to give the browser a layout hint for which srcset entry to pick:

This is a test post to verify that the JSON-LD schema correctly extracts the first image from the images array format.