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">）。任何人都可以帮忙吗？

Answer 1

您可以使用带有内联CSS的htmltools::img进行定位。 src可以直接获取路径，但是当图像不像图一样处理时，有时编织无法正确地将图像转换为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.

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编码，然后将字符串放入背景图片网址中。

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

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

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

Answer 4

@alistaire接受的答案非常有用。但是，就我而言，标题和徽标重叠，因为我的降价促销中的标题确实很长。

环顾四周，我想出了以下解决方案，并将其发布，以防对任何人有用。

```{js logo-js, echo=FALSE}
$(document).ready(function() {
  $('#header').parent().prepend('<div id=\"logo\"><img src=\"www/xxxxx.png\" style=\"position:absolute; top:0; right:0; padding:20px; height:120px\"></div>');
  $('#header').css('margin-right', '120px')
});
```

应该将其添加到标记的任何位置，当然，它仅适用于HTML输出。这个想法是为徽标添加一个新的div，然后在标题中添加一个margin-right，以使其不重叠。

请注意，我认为这并非最佳选择；我对css的使用很笨拙，如果有人想出一种更好的方法，我很高兴听到。无论如何，看起来还可以。

Answer 5

作为对 alistaire 回答的补充，并回答 Marco 的问题。可以使用宽度和高度来选择图形的大小。例如，

---
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;',
               width = "300px",
               heigth = "300px")
```

---

# 1. Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor

Answer 6

如果您制作了一个 rmarkdown 网站，并且希望在导航栏中的右侧添加徽标：

在 _site.yml 中包含一个 before_body：

include:
  before_body: logo.html

在 html 模板中：

<script type="text/javascript">
$(function() {
$('.navbar-right').before($('.logo'));
})
</script>

<div class="logo pull-right">
<img src="logo.png" alt="logo" width="150" style="margin-top: 15px;">
</div>

关键是在你插入的 div 中包含 pull-right 类。

在R markdown html文档的右上角插入徽标

6 个答案: