在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,其中Title是(<div class="container-fluid main-container">).任何人都可以帮忙吗？

Answer 1

您可以使用htmltools::img一些内联CSS进行定位.src可以直接采用路径,但是当图像不像图一样处理时,有时编织无法正确地将图像转换为URI,这反过来又导致它们无法渲染.self_contained: false在YAML中使用是一种快速解决方案,但使用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.

Answer 2

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

• 我们需要创建一个带有在头文件中调用的脚本的外部文件，幸运的是，我们可以直接在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.

Answer 3

我对上述答案采取了完全不同的方法，仅使用 CSS 而没有绝对定位。我将以下 CSS 代码块添加到我的文档中，但您也可以创建一个独立的 CSS 文件并将其包含在 Rmd YAML 标头中。

```{css, echo=FALSE}
#header {
  background-image: url("data: BASE64 encoded string for image");
  background-repeat: no-repeat;
  background-position: 95%;
  padding: 5px;
}
#header > * {
  max-width: calc(100% - 225px);
}
@media only screen and (max-width:600px){
#header > .title { 
  margin-top: 105px;
}
#header > *
  max-width: 100%;
}
#header {
  background-position: 10px 10px;
}
}
```

这里发生了一些事情。要解决有关图像的原始问题，您需要自己对图像进行 base64 编码并将字符串放入背景图像 URL 中。

它还以响应方式处理徽标和标题内容重叠的问题，设置max-width所有标题元素，并将徽标放置在窄窗口（小于 600 像素）的标题上方。

如果您根本不关心重叠，那么您只需要第一个#header选择器代码。如果您不关心窄设备反应式布局，那么您可以保留前两个选择器并删除 @media 块。

两个像素值225px和105px基于我的徽标，需要更改以适合您的图像以及一些填充。