html - the - r reports

Inserte un logotipo en la esquina superior derecha del documento html markdown R

Question

Estoy tratando de poner el logotipo de mi empresa en la esquina derecha de mi documento html

Aquí mi código:

<script>
$(document).ready(function() {
$head = $(''#header'');
$head.prepend(''<div class="knitr source"><img src="logo.png" width="220px" align="right" ></div>'')
});
</script>
---
title: "Title"
author: "Author"
date: "Date"
theme: bootstrap
output: html_document
keep_md: true
---
```{r echo=FALSE, include=FALSE}
knitr::include_graphics(''./logo.png'')
```
<br>
## 1) Header
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Sin embargo, debido a que logo.png es un archivo local cuando se comparte el documento html, las personas no pueden verlo.

Además, he intentado el siguiente enfoque

---
title: "Title"
author: "Author"
date: "Date"
output:
html_document:
css: markdown.css
includes:
in_header: extLogo.html
---

donde extLogo.html

<div class="logos"><img src="logo.png" width="220px" align="right"></div>

Pero crea un div fuera del div donde está el título ( <div class="container-fluid main-container"> ). ¿Alguien puede ayudarme en esto?

Answer 1

La respuesta aceptada funciona si está utilizando una salida HTML clásica. Si, como yo, también trabajas con bookdown , el logotipo debe aparecer en todas las páginas. Entonces, en caso de que alguien encuentre esta respuesta pero quiera agregar un logotipo con bookdown, doy mi propuesta:

• Necesitamos crear un archivo externo con un script para que sea llamado en el encabezado, afortunadamente podemos crearlo directamente en el script rmarkdown.
• También utilizamos htmltools::img para permitir incluir la imagen sin un archivo de imagen externo.

Aquí está mi script rmarkdown para ser usado como un ejemplo:

---
title: "Logo with Bookdown"
author: "Author"
date: ''`r format(Sys.time(), "%d %B, %Y")`''
output:
bookdown::gitbook:
includes:
in_header: header.html
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r htmlTemplate, echo=FALSE}
# Create the external file
img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = ''logo'',
style = ''position:absolute; top:50px; right:1%; padding:10px;z-index:200;'')
htmlhead <- paste0(''
<script>
document.write(/'<div class="logos">'',img,''</div>/')
</script>
'')
readr::write_lines(htmlhead, path = "header.html")
```
# Page 1
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document 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:
```{r cars}
summary(cars)
```
# Page 2
You can also embed plots, for example:
```{r pressure, echo=FALSE}
plot(pressure)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

Answer 2

Puede usar htmltools::img con un poco de CSS en línea para el posicionamiento. src puede tomar una ruta directamente, pero cuando las imágenes no solo se manejan como diagramas, a veces el tejido no puede convertir las imágenes a un URI correctamente, lo que a su vez hace que no se procesen. Usar self_contained: false en el YAML es una solución rápida, pero no es mucho más difícil usar knitr::image_uri para convertir manualmente la imagen:

---
title: "Title"
author: "Author"
output: html_document
---
```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = ''logo'',
style = ''position:absolute; top:0; right:0; padding:10px;'')
```
---
# 1. Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.