Hugo

Embed HTML file in page

I’m building a site based on Hugo that should display interactive plots that were created with bokeh. The plots are saved into an HTML file, but I can’t find a way to embed these inside a markdown page.

Any ideas?

Thanks!

You can just copy the HTML in your markdown file. Give it a try. Also you can put an HTML file in content and it will be rendered as is. A third way is to store it in static and reference the URL in your markdown file.

Damn, Hugo is cool…

Thanks for the answer! These are nice options, but is there any way to do it via a combination of a short code and Page Resources?

Don’t see a reason why this should not work. How I always try to find out: Generate a test project, create a page bundle and try to access the respective file like described in the docs.

Well for some reason, HTML files that are in a resources folder get lost along the way.

A file like content/posts/post_1/resources/myfile.html won’t be accessible via http://mysite.com/posts/post_1/resources/myfile.html.

The same file renamed to content/posts/post_1/resources/myfile.txt will, however, be accessible through http://mysite.com/posts/post_1/resources/myfile.txt.

I guess that somehow Hugo filters out HTML files that are inside a resources folder.

Ah, interesting. Have to try that by myself and try to find a solution.

Are you using a branch or leaf bundle?

I solved it by exporting the bokeh plots to a JSON object and loading these using BokehJS.

I put the JSON file into a resource folder and created this shortcode (bokeh.html):

{{ $item := $.Page.Resources.GetMatch (.Get 0)}}
<div id="{{ .Get 0 }}">
  <script charset="utf-8" type="text/javascript">
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var item = JSON.parse(this.responseText);
        Bokeh.embed.embed_item(item, "{{ .Get 0 }}");
      }
    };
    xmlhttp.open("GET", "{{ $item.RelPermalink }}", true);
    xmlhttp.send(); 
  </script>
</div>

Which I called from a markdown file with:

{{% bokeh "resources/myplot.json" %}}

Worked like a charm!

1 Like

It was with a leaf bundle

A post was split to a new topic: Adding an interactive bokeh plot

This is an old thread, but any help would be useful!

Where did you include the BokehJS CDN? I have my plot in a JSON object which is stored in static/plots/umap-plot.json. Unfortunately your shortcode throws an error for me and I think its because BokehJS doesn’t actually exist yet!

You just need to include something like this in the head of the html page:

<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.0.2.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.2.min.js"></script>
<script type="text/javascript" async src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.0.2.min.js"></script>