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

support
1

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?

2

See https://gohugo.io/templates/output-formats

config.toml 
[outputFormats.content]
isHTML = true
mediaType = 'text/html'
path = 'co'

[outputs]
page = ['HTML','content']

layouts/_default/single.content.html 
<!DOCTYPE html>
<html lang="{{ or .Site.LanguageCode .Site.Language.Lang }}">
<head>
  <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>
</head>
<body>
<h2>{{ .Title }}</h2>
{{ .Content }}
</body>
</html>

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

  • https://example.org/post/test/
  • https://example.org/co/post/test/ (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" }}
  <script>
    const params = new URLSearchParams(window.location.search);
    if (params.get('content_only') == 1) {
      window.location = '{{ .RelPermalink }}' + window.location.search + window.location.hash;
    }
  </script>
{{ end }}
1 Like