Embed HTML file in page

support
1

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!

2

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…

3

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?

4

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.

5

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.

6

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

7

Are you using a branch or leaf bundle?

8

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
9

It was with a leaf bundle

10

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

11

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!

12

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>
13

A post was split to a new topic: Help with Bokeh shortcode