I'm looking to add a Bootstrap navigation bar (as shown here: https://getbootstrap.com/docs/4.0/components/navbar/) to an R Markdown template I am creating.
From reading around, I've seen how you can add HTML elements from another file and call them within R Markdown.
But, is there anyway to include the HTML code inside of the markdown file, that way that navigation bar still gets added, but I only have a single page needed to show the results?
This requires a .yml(yaml) file to compliment our Rmarkdown file.
our almost empty Rmarkdown file titled index.Rmd...
---
title: "navbar for stackoverflow"
---
Now we just add code to our .yml file for our navbar. Rmarkdown looks inside it's root directory for a _site.yml file for rendering instructions per the blogdown book, which is the same author as your reference.
inside our _site.yml file inside the same directory as our index.Rmd file...
name: "Rmarkdown with navbar"
output_dir: "."
navbar:
title: "Rmarkdown with navbar"
type: inverse
right:
- text: "Contact me"
icon: fa-envelope-o
href: https://www.stackoverflow.com
- text: "GitHub"
icon: fa-github
href: https://www.stackoverflow.com
- text: "Stackoverflow"
icon: fa-stack-overflow
href: https://www.stackoverflow.com
- text: "Youtube"
icon: fa-youtube
href: https://www.stackoverflow.com
- text: "Instagram"
icon: fa-instagram
href: https://www.stackoverflow.com
- text: "Twitter"
icon: fa-twitter
href: https://www.stackoverflow.com
output:
html_document:
theme: spacelab
highlight: textmate
Which renders the below output.
The theme argument in the yaml file IS one of the select few bootstrap options Rmarkdown comes installed with.
Figured this out! The best solution I have found for this is to use RHTML to create the markdown file:
https://bookdown.org/yihui/rmarkdown-cookbook/html-hardcore.html
From there, you can use HTML to create the backbone of your document, and wrap your R code like so:
<!--begin.rcode
df <- data.frarme(x = 1:5, y = 1:5)
df
end.rcode-->
This definitely will require more work on my end, but it gives me exactly what I've been looking for.
Related
I am building a Quarto Blog, in my post I am adding a image to, it shows in my post but at the homepage it gives a error as a thumbnail:
I tried in different ways to insert the image, all of them gave the same result:
Using the visual mode in RStudio
Using image: "An intro to chi-squared test.png in the .qmd header
Using  inside my .qmd
After rendering each one, the image shows inside the post but does not as a thumbnail in my home, as shown in the figure above.
I got it! so I removed the image from inside the post but kept the image command in the post .qmd header.
image: "An intro to chi-squared test.png
Then in my main index.qmd file I added the following below listing:
fields: [image, date, title, description, categories,author]
So my header became:
---
title: "Blog"
about:
template: jolla
image-width: 70%
listing:
contents: posts
fields: [image, date, title, description, categories,author]
sort: "date desc"
type: default
categories: true
sort-ui: false
filter-ui: false
page-layout: full
title-block-banner: true
---
Now my blog looks like this:
I have an R markdown document that uses flexdashboard and shiny. The document/app has several pages and I would like to be able to link the navbar title defined in the YAML header to the first page so that a user gets the feeling of being redirected to the "Home" page when clicking the title.
I've attached a very simple example of an .Rmd file that uses flexdashboard and has 2 pages. In this example the user should be directed to Page 1 when clicking on App title.
---
title: "App title"
output: flexdashboard::flex_dashboard
runtime: shiny
---
Page 1
====================================================================================
This is some random text on page 1...
Page 2
========================================================================================
And some even more random text on page 2....
I have seen examples where pages are linked within an external .yml file (bookdown) or where the logo/title is linked to an external site, but I couldn't find examples of how to link the navbar title to a section/page within the R markdown document itself.
To add complexity: in my app, the document is used for several applications and the title is therefore read in via an environment variable:
---
title: '`r Sys.getenv("TIER")`'
Any help is much appreciated!
To make the title clickable as link you can use additional JavaScript.
<script>
document.querySelector(".navbar-header").innerHTML =
"<a href=\"path_to_destination\" class=\"navbar-brand navbar-inverse\">
My Dashboard
</a>";
</script>
The querySelector looks for the title element and replaces it with a custom one. Here I replace it with a link to the path_to_destination. You can see the class names which are added to the link, to format the link according to the predefined classes. Otherwise the link is not formatted like the title.
As you said the title is based on some variable we can insert R code like in every other place in the document:
<script>
document.querySelector(".navbar-header").innerHTML =
"`r 2+2`";
</script>
I am creating an R Markdown website. However, I am having problems setting the style of the output styling for the document.
I have the _site.yml with output arguments that looks like:
output:
bookdown::html_document2:
toc: true
toc_float: true
theme: flatly
highlight: tango
df_print: paged
include:
in_header: "header.html"
after_body: "footer.html"
css: "./assets/style.css"
And I have a few .Rmd files in the same directory that have simple YAML matter:
---
title: "A title"
subtitle: "A subtitle"
author: "Name"
---
I render the site rmarkdown::render_site(). The site and the pages work, but the rendered .Rmd files do not show the settings (toc, theme, highlight etc) and css styles defined in the _site.yml file. The header and footers also do not show. The path/location of header.html,footer.html and style.css has been verified.
Do I have to specify the output settings in every .Rmd file?
The problem appears to come from the use of bookdown::html_document2 instead of the rmarkdown function html_document.
Using the template provided by RStudio here, I made some one edit to the settings, adding theme: flatly:
name: "my-website"
navbar:
title: "My Website"
left:
- text: "Home"
href: index.html
- text: "About"
href: about.html
output:
html_document:
highlight: textmate
theme: flatly
include:
after_body: footer.html
css: styles.css
Replacing html_document with bookdown::html_document2()
Looking through the source code of the render_site function, there appears no way for it to parse any other output than html_document. In fact, when bookdown::html_document2() is provided, it will overwrite the _site.yml file to:
name: my-website
navbar:
title: My Website
left:
- text: Home
href: index.html
- text: About
href: about.html
output:
html_document:
lib_dir: site_libs
self_contained: no
output_dir: _site
If you are looking to benefit from using html_documents2 within your website, you should check out blogdown.
I have tried a couple of approaches but none worked so far. I want to include an image preview for a blog post written in R markdown (.Rmd) on my main blog page where a number of posts and projects are generally shown. I can make it work in plain markdown (.md) using below code taken from the Hugo academic-theme here
+++
# Optional image to display on homepage (relative to `static/img/` folder).
image_preview = "bubbles.jpg"
+++
The result would look as shown here (see section Projects).
However, I do not know how to translate this to the .Rmd yaml in my blog post. I can include an image at the top using below but since I'm using a toc table of content option, the image is only shown after the toc and thus does not appear in the post preview on the main page.
---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
- some category
tags:
- some-tag
output:
blogdown::html_page:
toc: true
number_sections: true
toc_depth: 2
---
Ideally, the image is only shown in the preview on the main page and not in the actual blog post (intention is to "lure" the reader with visually appealing image to actual content) but if not possible otherwise I'm also fine if the image shows on top of the actual post as long as it shows in the preview of the main page.
If the image_preview parameter works with the md document, it should also work with the Rmd one, provided that you use the syntax with : I guess:
---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
- some category
tags:
- some-tag
output:
blogdown::html_page:
toc: true
number_sections: true
toc_depth: 2
image_preview: 'bubbles.jpg'
---
I use blogdown with hugo (theme tranquilpeak). When I add a tabbed codeblock in my .Rmd file, the codeblock doesn't show up as intended, it is shown as normal text. Any idea why?
2017-09-02-tabbed-codeblock.Rmd
---
title: tabbed-codeblock
author:
date: "2017-09-02"
output:
html_document:
keep_md: yes
---
### Testing tabbed codeblock
{{< tabbed-codeblock >}}
<!-- tab js -->
var test = 'test';
<!-- endtab -->
<!-- tab css -->
.btn {
color: red;
}
<!-- endtab -->
{{< /tabbed-codeblock >}}
See Section 2.3.2 of the blogdown book:
Shortcodes are supposed to work in plain Markdown documents only. To use shortcodes in R Markdown instead of plain Markdown, you have to call the function blogdown::shortcode().
And please read the R help page of the function blogdown::shortcode() if it is not clear to you.