Abstract

This page demonstrates the Main Article layout. Citation markers are generated from Markdown footnotes and link directly to their references.1 Figures are stored in the article’s page bundle and opened with PhotoSwipe.2

Main

The central article column remains 950 pixels wide on a sufficiently large screen. The left navigation is generated from the rendered document.

Background

A leaf page bundle keeps the article Markdown and its figures in one directory.3 Hugo can read each image’s dimensions and create a smaller preview while keeping the original available for viewing and download.

Findings

The first sample figure contains four labeled panels. Click the figure or the View large control to open the viewer.

Download
Four labeled panels containing a line chart, bars, a scatter plot, and a process diagram
Figure 1. Example Four-Panel Research Figure
Panel A shows a line series. Panel B shows grouped measurements. Panel C shows a simple point distribution. Panel D shows a process diagram. This image is a generated placeholder intended only to test the layout and viewer.

The second figure demonstrates navigation between multiple figures.

Download
Two side-by-side schematic panels labeled before and after
Figure 2. Example Before-and-After Comparison
The viewer provides previous and next controls, zooming, keyboard navigation, fullscreen display, a caption, and an original-image download control.

Methods

The layout converts level-two through level-six Markdown headings into nested native disclosure sections after the page loads.

Article structure

Every section starts open. A reader may collapse a subsection without closing the rest of the article.

Nested subsection example

This level-four heading is nested inside the Article structure subsection.

Citation behavior

Use ordinary Markdown footnotes. Selecting a superscript marker scrolls to the corresponding reference. Hugo also creates a return link in the reference list.

Discussion

The article remains readable without JavaScript. Without the enhancement script, headings remain normal headings, references remain ordinary footnotes, and each figure remains a direct link to its original image.

  1. Hugo documentation. Content management and Markdown rendering. Accessed 17 July 2026. ↩︎

  2. PhotoSwipe documentation. Getting Started. Version 5.4.4. Accessed 17 July 2026. ↩︎

  3. Hugo documentation. Page bundles and page resources. Accessed 17 July 2026. ↩︎