Using different Hugo themes in a webpage

support
1

Can we use different Hugo themes for different part of the webpage? If so, can anyone point me the right direction please?

2

No, you cannot.

You can create different layouts in a theme but you cannot use two different in single website.

3

The only way I know is this:

  1. Create a separate site for each theme you want to use.
  2. Add your /content/ as a module in each of those sites.

Only catch:

  1. each theme will have to live on its own URL.
    • example.com/theme1/
    • example.com/theme2/; or,
    • theme1.example.com
    • theme2.example.com
  2. you’ll end up with duplicate content
    • a workaround is to set your relcanonical to point to one particular site/theme only. Search engines will then ignore the duplicate content and focus only on one version.
  3. if you have comments, it has to associate comments to some form of an “ID” and not the URL (example: disqus comments and webmentions in my site im.youronly.one/snoorld/ also appear in im.youronly.one/yuki/)
    • disqus supports this
    • webmention supports this

If the idea you have in mind is to give visitors an option to choose their theme, I am not sure if this will work:

  • You set cookies (or headers maybe?)
  • Then the server, or workers, will rewrite URLs based on what’s in the cookie.

The rewriting is something similar to what I did:

  • snoworld.youronly.one rewritten to im.youronly.one/snoworld/
  • techmagus.youronly.one rewritten to im.youronly.one/techmagus/

Those are not residing in a subdirectory. Those are under a subdomain. I have a script to make Cloudflare rewrite the subdomain into a subdirectory type URL. They are two separate Hugo projects (with its own themes).

Maybe, something like that can used. You have a script server-side which will rewrite the URL of the appropriate theme your visitor has chosen (which is probably stored as a cookie or some other method). Thus, maintaining the same URL instead of /theme1/ and /theme2/.

Does that make sense?