How can I embed a "content only" AKA no menus version of my site?

Hi! My first post here :slightly_smiling_face:

I had a wordpress site, but now I have seen the light :heart_eyes: and migrated to Hugo with all it’s bliss!

However, I miss a feature from wordpress, and that is to be able to embed my documentation inside iframes, and append a query parameter similar to “?content_only=1”, and that removes menus, header, footer and leaves me the content only.

I understand that Hugo is not dynamic like wordpress (php) is, so I guess it leaves me with two options:

  1. Render two versions of my site (with two different themes), but I belive I might get penalized by search engines for duplicate content, and it also feels a bit overkill.
  2. I do some js magic that dynamically hides meny by query parameter…
  3. Or do you have a better option?

Has anyone done something like this before, or know how to do it?


isHTML = true
mediaType = 'text/html'
path = 'co'

page = ['HTML','content']

<!DOCTYPE html>
<html lang="{{ or .Site.LanguageCode .Site.Language.Lang }}">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>{{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ site.Title }}</title>
<h2>{{ .Title }}</h2>
{{ .Content }}

A content page with path content/post/ will be rendered to:

  • (content only)

To enable switching to the “content only” version via a query string parameter, place something like this in the head section of your template:

{{ with .OutputFormats.Get "content" }}
    const params = new URLSearchParams(;
    if (params.get('content_only') == 1) {
      window.location = '{{ .RelPermalink }}' + + window.location.hash;
{{ end }}