在R markdown html文档的右上角插入一个标志

Question

我想把我公司的标志放在我的 html 文档的右上角

这是我的代码：

 <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.

但是，由于 logo.png 是共享 html 文档时的本地文件，因此人们无法看到它。

另外，我尝试了以下方法

---
title: "Title"
author: "Author"
date: "Date"

output:
  html_document:
    css: markdown.css
    includes:
      in_header: extLogo.html
---

其中 extLogo.html

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

但它会在标题所在的 div 之外创建一个 div ( <div class="container-fluid main-container"> )。任何人都可以帮忙吗？

原文由 Bruno Silva 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 htmltools::img 和一些内联 CSS 进行定位。 src 可以直接走路径，但是当图像不只是像绘图一样处理时，有时 knitting 无法将图像正确转换为 URI，这反过来会导致它们无法呈现。在 YAML 中使用 self_contained: false 是一个快速的解决方案，但使用 knitr::image_uri 手动转换图像并不难：

 ---
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.

原文由 alistaire 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是经典 html 输出，则接受的答案有效。如果像我一样，您也使用 bookdown ，徽标需要出现在每个页面上。因此，如果有人找到了这个答案但想添加带有 bookdown 的徽标，我会提出我的建议：

• 我们需要创建一个外部文件，其中包含要在 header 中调用的脚本，幸好我们可以直接在 rmarkdown 脚本中创建它。
• 我们还使用 htmltools::img 允许包含没有外部图像文件的图像。

这是我的 rmarkdown 脚本，用作示例：

 ---
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.

原文由 Sébastien Rochette 发布，翻译遵循 CC BY-SA 3.0 许可协议