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>
Related
If I have a {pkgdown} website for an R package, I can include the author URLs in _pkgdown.yml:
authors:
Indrajeet Patil:
href: https://sites.google.com/site/indrajeetspatilmorality/
And the URL will be present in the website footer:
How can I do the same for a {bookdown} website?
You should be able to use Markdown syntax to achieve that
author: '[Indrajeet Patil](https://sites.google.com/site/indrajeetspatilmorality/)'
this will make the author Pandoc variable be a link in the HTML template.
Depending on the theme you are using, you may need to tweak the CSS so the the link can correctly be readable on the footer background
and pardon what might be a repeat question, the solutions to the others didn't solve my problem. I'm working on a Hugo site and attempting to embed an iframe. The element shows but the I get the message 'This content is blocked. Contact the site owner to fix the issue.' when it loads, so no one can see the content.
Here is my .md information
+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>
I've also updated my config.toml file by adding the following:
[markup.goldmark.renderer]
unsafe = true
I'm not sure what I'm missing. Please let me know if you need more information about what I've done. I've tried shortcode as well but that doesn't render anything at all (I'm still new to shortcodes which is why I am embedding the iframe).
Thank you for your time and consideration.
For those who just want to embed an iframe into a Hugo site, like the question title says:
In the examples below, the content between --- is called front matter and it is in YAML syntax. You can add here your own structured data or use predefined Hugo's front matter fields. The rest of the file (below the second ---) is a standard Markdown syntax formatted content.
You don't need to use the YAML syntax in your front matter. Also TOML and JSON formats are supported by Hugo (see docs)
Solution 1: direct HTML in the content
You can add the HTML code itself to the Markdown content (like T.J.'s .md file example in the question). Hugo's markdown engine will then render the iframe as it is.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
<iframe src="https://example.com/"></iframe>
Solution 2: custom shortcode
You can implement your own shortcode which can be useful when using some kind of CMS or in a case when you want to style the iframe somehow.
<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>
You can then add iframes to your content in markdown files like this:
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
{{< iframe https://example.com/ >}}
Shortcodes allow you also to create named attributes so you would use the shortcode like {{< iframe url="https://example.com/" >}}. The benefit of this solution is that you are free to set up the HTML code that will be rendered when using the iframe shortcode. For more information, see the shortcode docs.
Solution 3: using the front matter
If you build your page from predefined blocks or components or the page is a very simple one where you for example don't use the markdown content but just the front matter fields, you can be interested in this solution which is basically just using the front matter for storing the iframe's URL or other settings you want to use during the HTML rendering.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---
In your layout file, you will get this piece of information by using {{ .Params.iframe }}.
I have a DocFX site with a number of pages. I would like to include tags at the top of each page via custom template, and I'd like for authors to be able to add tags in the YAML frontmatter, e.g.:
---
title: My Page Title
tags: tag1;tag2;tag3
---
I would then like to be able to access those tags as some sort of array and process them when generating the HTML output.
I've read the docs here which suggests that I can add a schema.json file somewhere and this will automatically detect items in the schema. What I can't work out is how to access the YAML frontmatter in my template when generating the output.
If I need to write a custom .NET plugin to do this then that isn't an issue, but I believe I should be able to access these properties in the template somehow.
Any guidance at all would be very gratefully-received!
I managed to eventually work this out.
In my custom template I have a conceptual.html.primary.tmpl file which provides access to the frontmatter:
<div id="tags">
{{#tags}}{{tags}}{{/tags}}
</div>
Obviously I now need to process the tags, but I now get HTML produced as expected from my .md files:
<div id="tags">
tag1;tag2;tag3
</div>
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...
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")
```
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>
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'
---