Menu
I'm working on a static website made with Jekyll and hosted on GitHub. One of the post looks like this
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
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.
387
Your Jekyll pages consist of HTML, CSS, and JavaScript, so pretty much any code you need to embed will work without a problem. As you integrate code for these services, note that if a page in your Jekyll site doesn't have front matter tags, Jekyll won't process any of the content in that page.
To transform your markdown file into an HTML, PDF, or Word document, click the “Knit” icon that appears above your file in the scripts editor. A drop down menu will let you select the type of output that you want. When you click the button, rmarkdown will duplicate your text in the new file format.
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 %}
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With