Using iframes in a theme

support
1

Hi,

I’m a little stuck and hoping someone can share an insight. I’m trying to change my theme such that there are two iframes, basically:

<iframe src="sidebar.html" name="sidebar"></iframe>
<iframe src="?" name="mainContent"></iframe>

I don’t know how to implement this in Hugo, that’s because every page references the head.html partial which includes the iframes – and so they’re iframes within iframes in iframes etc.

Of course, I can take the <iframe> code out of the head.html file; but where to put it then? Conceptually, I suppose I need something like this:

iframe generation file/theme (main)
    sidebar.html (sub)
    post generation file/theme (sub)

But how to do this in Hugo? Or is there a better, more efficient way of doing this in the Hugo framework?

Thanks for any insights.

2

That sounds problematic. Why iframes, as opposed to a regular html5 approach?

3

My sidebar is a big tree with folders for the categories and the posts themselves. I figure that, if I use an iframe for the sidebar, the page speed will increase (the sidebar.html and its Javascript only needs to be processed once).

Also, if the sidebar is in an iframe its current position is remembered. Currently with the sidebar being part of the template, it starts at the top again with each page view. I think that’s a little bit annoying for users if they lose their “position” with each click.

I got the iframe idea from this website that I found.

The website is, by the way, a technical documentation so ultimately the sidebar can become very long (if the user expanded several folders).

4

Not sure what the issue is, but you might get an easier life if you try out Ace templates; but if you use them from a theme, you would have to use the 0.15-DEV (there has been fixes).

5

May I ask how you would implement this? I can’t get my head around it where/how to implement it.

6

Pseudocoded baseof.ace:

= doctype html
        html xmlns=http://www.w3.org/1999/xhtml xml:lang=nn lang=nn
          head
            = include partials/head.html .
          body.layout-reverse
            = include partials/menu.html .
            .content.container
              iframe
                  = include partials/sidebar.html .
              iframe
                  = yield main
              = include partials/footer.html .

The = yield main brings in the content page template (or whatever).