How to include an Rmarkdown/HTML file in Jekyll post

7
votes

I'm working on a static website made with Jekyll and hosted on GitHub. One of the post looks like this

Normal view of the site

Also, I created an Rmarkdown file, and I want to embed the resulting html file into the post. I read here that I only needed to do this:

You just have to create a folder with the name _includes/ in the DocumentRoot of your project, then, create an HTML file inside, for example "mycomponent.html" and call it in your post with something like this:

{% include mycomponent.html %}

I added my html file in the _includes/ folder and added such piece of code at the end of the markdown file for the corresponding post. However, when I do that, the website layout changes completely

Undesired look of the site

Is there I way I can avoid this? All the files of the website are store here.

EDIT:

I found another question where it is suggested to do this:

In my opinion the best solution is:

Using jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head>
  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p> This is my include file </p>

I do not understand it completely. Somehow the layout of the site is recovered, but now some images and htmlwidgets are lost. Also, the footer of the page is completely messed up.

Another undesired look of the site

2
htmljekyllr-markdown

2 Answers

3
votes

From the repo, I'm assuming you've tried to include _includes/Report.html into another file.

_includes/Report.html is a complete HTML page (with a doctype and html tags), rather than a partial that include is designed for. Liquid will be replacing the include tag with the full HTML, creating invalid markup and the likely source of your layout issues:

<!doctype html>
<html>
  <head>...</head>
  <body>
    ...
    <!doctype html>
    <html>
      ...
    </html>
  </body>
</html>

To solve this issue, remove the extra markup from _includes/Report.html (keeping the script tags), and use Liquid to include the corrected partial:

{% include Report.html %}
1
votes

I found out that it is not necessary to embed an html inside another. Using R, an Rmd file with the post can be created which then is transformed into the required md file. Jason Fisher's website explains it nicely with step-by-step instructions. His GitHub site has also useful information.

Another useful site is the one by Juuso Parkkinen. He is the person that told me that he's never embed an html into another and only used R directly to create his Jekyll website by using the following code: 

# compiles all .Rmd files in _R directory into .md files in _posts directory,
# if the input file is older than the output file.

# run ./knitpages.R to update all knitr files that need to be updated.

KnitPost <- function(input, outfile, base.url="/") {
  # this function is a modified version of an example here:
  # http://jfisher-usgs.github.com/r/2012/07/03/knitr-jekyll/
  require(knitr);
  opts_knit$set(base.url = base.url)
  fig.path <- paste0("blog/figs/", sub(".Rmd$", "", basename(input)), "/")
  opts_chunk$set(fig.path = fig.path)
  opts_chunk$set(fig.cap = "testing")
  render_jekyll()
  knit(input, outfile, envir = parent.frame())
}

for (infile in list.files("blog/_R", pattern="*.Rmd", full.names=TRUE)) {
  outfile = paste0("blog/_posts/", sub(".Rmd$", ".md", basename(infile)))

  # knit only if the input file is the last one modified
  if (!file.exists(outfile) | file.info(infile)$mtime > file.info(outfile)$mtime) {
    KnitPost(infile, outfile)
  }
}

His GitHub account is a useful reference as well.