I'm trying to get a Quarto home page of the ground and one requirement is a custom font (free webfont; Tex-Gyre-Adventor).
Following the documentation, I have played around with the html format specific mainfont tag in various iterations (see header example below), but cannot make this work - including if the font is additionally defined as a #font-face in style.css (and many other attempts).
Can anyone point me in the right direction how to use mainfont with a non-standard font?
Thanks for any pointers!
---
title: "Page"
title-block-banner: false
format:
html:
theme: vapor
mainfont: `https://fontlibrary.org/en/font/tex-gyre-adventor`
code-fold: true
toc: false
number-sections: false
link-citations: yes
---
To use a custom webfont as the mainfont, just add font stylesheet file in document header using header-includes and set the font name in mainfont yaml key.
---
title: "Page"
title-block-banner: false
format:
html:
theme: vapor
code-fold: true
toc: false
number-sections: false
header-includes: |
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/tex-gyre-adventor" type="text/css"/>
link-citations: yes
mainfont: TeXGyreAdventorRegular
---
## Quarto
Quarto enables you to weave together content and executable code into a
finished document. To learn more about Quarto see <https://quarto.org>.
## Running Code
When you click the **Render** button a document will be generated that
includes both content and the output of embedded code. You can embed
code like this:
```{r}
1 + 1
```
Related
So I am building my first data blog with RStudio and Blogdown and I am seriously stuck on something small but infuriating.
https://data-issues.netlify.app/
Above is the site I am building. I made a logo for it but I would like to make this centered. How would I do so in my markdown (.md) file.
Code here:
---
# Homepage
type: widget_page
# Homepage is headless, other widget pages are not.
headless: true
weight: 1
design:
columns: "1"
---
{{< figure src=/datavision.png theme="light" class="center">}}
EDIT: added this too to no avail
<p align="center">
</p>
I am using .md files, so where exactly would I define the shortcode for p if not here?
As #YihuiXie said in the comment section below, you don't really need to use a shortcode for raw HTML, there are multiple solutions that you can use.
Edit your config to use raw HTML in Markdown
In your config.toml enter:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
If you have in your project config.yaml use this:
markup:
goldmark:
renderer:
unsafe: true
This enables raw html support in markdown files, in this way you don't need to use shortcodes.
https://gohugo.io/news/0.60.0-relnotes/
Raw HTML using Shortcodes
Depending how your project is structured, there should be some kind of layouts folder. I have a project made with Hugo and I have a something like this ../layouts/shortcodes/rawhtml.html with this code:
{{.Inner}}
For example in your code you're already using a Hugo’s Built-in shortcode. After you create the file, you just need to insert your shortcode in this way in your Markdown:
{{< rawhtml >}}
<img src=/datavision.png class="center">
{{< /rawhtml >}}
The custom CSS code should be defined in ../static/css/, in your config.toml, simply check if there is a variable to set your custom CSS code, for example:
# Custom CSS
customCSS = ["/css/custom.css"]
I used this configuration because the theme required it, but it can be different in your project so keep this in mind. If you don't want to use another file to save your CSS code, you can simply insert it into your shortcode like I did with the HTML, for example:
{{< rawhtml >}}
<style>
.center{
/* your code here */
}
</style>
{{< /rawhtml >}}
Use HTML for content pages instead of Markdown
With Hugo, you could also use a HTML instead of a md file in your project. It simply follows the same syntax, but you have to use HTML instead of the Markdown syntax, for example:
---
title: "Contact me"
---
<p>
Some text here
</p>
In this case you don't need the shortcode from the moment you're already using a HTML.
Question:
How do I place HTML files in place within an R Distill Markdown file?
Background:
I would like to embed / incorporate an external html file within a Distill Rmd file. I don't want to show the link to the html in the document, but the content of the html file. Something like include_graphics only for html.
I wasn't able to find something via google search. I only found Include HTML files in R Markdown file? where OP writes, he never figured out how to do it :(
From that post I tried htmltools::includeHTML("file.html") which didn't work,
and also shiny::includeHTML("file.html") which didn't work,
and even (it didn't work):
includes:
in_header: file.html
With htmltools::includeHTML I at least got the error message Error loading script: https://cdn.jsdelivr.net/npm//vega#5?noext which I couldn't make sense of :(
Though I can't reproduce this error-message now (a couple of weeks later). Maybe it is because I included library(htmltools). Though there still is no html embedded :(
However the Distill package apparently is able to do embed html, as the _footer.html is included correctly, but automatically (such that i wasn't able to find the command in the code).
Thanks a lot!
You might want to double check your R chunk arguments, does it have include=FALSE? because then you would be calling the HTML file, but then telling it not to be included, here is my distill Rmd file and the output with the included HTML code.
Rmarkdown
---
title: "Untitled"
output: distill::distill_article
---
```{r setup}
knitr::opts_chunk$set(echo = FALSE)
library(htmltools)
htmltools::includeHTML("test2.html")
```
HTML: titled test2.html located in same directory as .Rmd
<html>
<head>
</style>
<title>Title</title>
</head>
<body>
<p>This is an R HTML document. When you click the <b>Knit HTML</b> button a web page will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:</p>
<div class="chunk" id="unnamed-chunk-1"><div class="rcode"><div class="source"><pre class="knitr r" ><span class="hl kwd">summary</span><span class="hl std">(cars)</span>
</pre></div>
<div class="output"><pre class="knitr r">## speed dist
## Min. : 4.0 Min. : 2.00
## 1st Qu.:12.0 1st Qu.: 26.00
## Median :15.0 Median : 36.00
## Mean :15.4 Mean : 42.98
## 3rd Qu.:19.0 3rd Qu.: 56.00
## Max. :25.0 Max. :120.00
</pre></div>
</div></div>
<p>You can also embed plots, for example:</p>
<div class="chunk" id="unnamed-chunk-2"><div class="rcode"><div class="source"><pre class="knitr r" ><span class="hl kwd">plot</span><span class="hl std">(cars)</span>
</pre></div>
</div><div class="rimage default"><img src="figure/unnamed-chunk-2-1.png" title="plot of chunk unnamed-chunk-2" alt="plot of chunk unnamed-chunk-2" class="plot" /></div></div>
</body>
</html>
output rendered to html
R Markdown allows to add a footer to your html output. The YAML header allows to give an author name using a specific field.
I would like to use this author name in my footer.html file, but cannot figure out how to achieve that.
Here is a minimal example:
fic.rmd:
---
title: "title"
author: "Mister-A"
output:
html_document:
include:
after_body: footer.html
---
content
And in the same folder the footer.html file:
I am - #author-name-field-that-I-don't-konw-how-to-get -
Any help or advice would me much appreciated. Thank you very much.
If you want to be able to use the YAML parameters within sections of the report, you need to alter the base pandoc template. You can find all of them here
The basic structure of making this work is to put the variable surrounded by dollar signs to use the YAML variable in the output document. So for example $author$ is required in this case.
Solution
We can create a copy of the pandoc template for HTML in our local directory using the following command. This is the same file as here.
# Copies the RMkarkdown template to the local directory so we can edit it
file.copy(rmarkdown:::rmarkdown_system_file("rmd/h/default.html"), to = "template.html")
In the template.html, we need to add the pandoc tags. To add a footer, we want to add code to the buttom of the document. This is line 457 in the current template but this may change in future versions, so we want to put it after the include-after tag:
$for(include-after)$
$include-after$
$endfor$
<hr />
<p style="text-align: center;">I am $author$</p>
$if(theme)$
$if(toc_float)$
</div>
</div>
$endif$
Finally, the R Markdown file looks like:
---
title: "title"
author: "Mister-A"
output:
html_document:
template: template5.html
---
This is some text
As a possible extension of this, you may want to check out this post on designing a stylish footer.
I'm aware you can use _layouts and in your pages do something like
---
layout: some_layout
title: Home
---
So say I have 20 pages. All using the same template but slightly different content and stuff inside.
Instead of creating 20 different pages.html files with different names and different permalinks.
Is there a way to create 1 page.html and based on the permalink change what's inside the {{ content }}?
Just create your-slug.md files. Let them all use the same layout, like this:
---
layout: some_layout
title: Your title
---
In the layout file (some_layout.html) you put some logic, like this:
{% if page.url contains '/your-slug' %}Put this on the screen.{% endif %}
You could organize the 20 pages under a collection and assign defaults on the collection.
For example, say your collection is labelled docs, then all those 20 pages need to be placed inside a directory named _docs, at the root of your source directory. Following that configure your collection to use the layout some_layout for its documents.
# _config.yml
# enable rendering on your collection(s)
collections:
docs:
output: true
another_collection:
output: true
# set defaults on your collection. (note the indentation..)
defaults:
-
scope:
type: docs
path: _docs
values:
layout: some_layout # The layout for this collections' files
-
scope:
type: another_collection
[...]
I have not tried this yet, but there is a closed github issue: https://github.com/jekyll/jekyll/issues/16
There are suggestions to write/use a jekyll plugin like the ones below. These are links from the issue and their state is unknown to me.
https://github.com/ixti/ixti.github.io/blob/source/_plugins/categories.rb
https://github.com/rfelix/my_jekyll_extensions/tree/master/category_gen
how to write a plugin: https://jekyllrb.com/docs/plugins/
How can I make an html like this: http://rpubs.com/wch/17105 using Rstudio in an .Rmd file? I read the page http://rmarkdown.rstudio.com/ and put this code at the beginning of my .Rmd file:
---
title: "Sample Document"
output:
html_document:
toc: true
theme: united
---
but it doesn't seem to work.
The table of contents automatically picks up headers from the main document to the specified depth of the YAML key toc_depth; the default is toc_depth: 31. See this documentation for the different possible types of headers. Here's example syntax of the so-called "Atx-style" headers:
# Header 1
## Header 2
### Header 3