CODEWITHSUNDEEP
rhugoblogdown
Logit
Logit

Reputation: 591

How to display another html document in place of a standard blog post?

I've got a blog that I update using R Blogdown. It's got a Hugo theme with YAML configuration and front matter. I host on Netlify. I'd like to create a post where, upon clicking the link for the post, the user sees a totally separate html file instead of the titled post. For example, I thought the following front matter would work where I've placed the desired document inside 'static/files'...

---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
URL: ["/files/page_to_display_instead.html"]
---

But my desired page doesn't load. Instead, my address bar tries to load '/posts/2018-02-21-example-blog-post'

I note that including the following inside the body of my post does exactly what i want and verifies that my relative path, file name, and desired page is correct...

Click [here](/files/page_to_display_instead.html) to see the right page.

But this requires the user make an extra click to get to the content and isn't very elegant.

Likewise, putting the following in the body of the above post comes close to working...

![](/files/page_to_display_instead.html)

But this solution retains the blog title and theme and just displays my desired page inside a frame. It looks kind of ugly.

There's got to be a simple solution to load or redirect to the desired page instead of the titled post per se. Have I misunderstood the use of Hugo's "URL" variable in my front matter? Should I be using another front matter variable or syntax? Thanks in advance for any suggestions.

EDIT: In addition to Sebastien Rochette's excellent answer below, I discovered that since I'm working in R Markdown, the following solves the problem as well:

```{r, include=FALSE}
shiny::includeHTML("/files/page_to_display_instead.html") 
```

Upvotes: 5

Views: 2238

Answers (1)

Sébastien Rochette
Sébastien Rochette

Reputation: 6661

I think that you can directly show your html file if you put it directly in the blog folder. The name of the html file would be used as the slug. However, if your html page does not contain your template, you may not want that.

Use iframe

Hence, you can add your html file as an iframe:

---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
---

<iframe width="100%" height="150" name="iframe" src="/files/page_to_display_instead.html"></iframe>

Auto resize iframe to fit content

And if you do not want that your visitors see it as an iframe, you can use some javascript to auto resize the iframe.
You need to add this in the "head" of your theme:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Then your post will be:

---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
---

<iframe width="100%" height="150" name="iframe" src="/files/page_to_display_instead.html" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>

Upvotes: 6

Related Questions