Include a html file in quarto website

[jwang-lilly]

Hi,

I have an HTML file produced from a .qmd file using a number of R packages. I also have a quarto website, and I'd like to include this HTML file as it is, not to 1) render the .qmd file within the website, using the freeze feature because I don't wish to "pollute" the website with all those R packages; 2) include the HTML as a block because the file is fairly large. Hopefully, I can include this HTML file name in a good location such as .yml and have the content shown by clicking a tab in the nav bar.

Any advice is greatly appreciated.

[eitsupi]

You can use resources to including files.
https://quarto.org/docs/websites/website-tools.html#site-resources

[jwang-lilly]

Thank you to @eitsupi for the suggestion. The caveat of this approach is the linked HTML file becomes entirely independent of the website, not embedded within the website. It is like providing a link to rstudio.com home page, having nothing to do with my website. This is not my intention. I hope to find a way to have the HTML displayed within the framework of the website, with the usual navigational support.

[cscheid]

That use case is not supported by quarto, because we cannot know the structure of your file. If you want to have navigational support, then quarto needs to have access to the .qmd file, from which we can extract the metadata.

[jwang-lilly]

thanks much @cscheid

[jwang-lilly]

@dragonstyle, do you have any advice on this question?

I have a quarto website utilizing hybrid navigation following the quarto.org/docs/websites/website-navigation.html example. I have a self-contained large HTML file and I would like to include it as is within this website. I hope to display it by clicking on a sidebar item. Using the example quarto.org/docs/websites/website-navigation.html on Hybrid Navigation section, ProjectX website -> Tutorials on Navbar -> Tutorial 1 on sidebar => my HTML file display. I'd like the top navbar (possibly the sidebar as well) to be in place as usual and my HTML to be displayed in the content area. Any other suggestions are welcome. Thanks much!

[dragonstyle]

I can think of one thing you could try -make a qmd file and include an iframe on the page pointing to the document (and using js to size it appropriately). This requires the qmd file to provide the metadata required for Quarto and provide the framing elements around the document.

Since the self contained document already contains a complete HTML document, I don't know of a way to inline that without something like a pre-render script that would parse the HTML, extract the body (or some target interior element) and place that in a qmd file.

[jwang-lilly]

thanks much @dragonstyle

[lnalborczyk]

Hi, have you found (and implemented) a solution to this issue? Is a code example available somewhere online? I would also like to redirect to a HTML file (a bookdown gitbook) located in a subfolder of my quarto website...

[cameronrutherford]

Same here - would be quite convenient as png snippets of websites can be buggy, and saving an html copy renders better.

[cameronrutherford]

Just answered my own question!

A simple way of doing this is:

<iframe src="./path/to/custom.html"></iframe>

Just ensure the html is pathed to correctly, considering RPATHs and whatnot

[jmhimara]

Idk if this would solve the problem, but you could try to the HTML code of the other page into an {=html} code block.