在顶级标题之前将图像添加到 Rmarkdown Bookdown 输出

Question

下面的示例（即保存为文件 index.rmd ）具有相同的代码块以在顶级标题上方和下方显示图像，但图像不会出现在顶级标题上方。如果在同一目录中有一个文件 _output.yml 仅包含此条目 bookdown::gitbook:，则会发生这种情况。

该行似乎强制执行目录（我想要），并且默认情况下似乎会在第一个顶级标题之前删除任何内容（图像或文本）（我不想要） - 这种行为也可以要修改吗？

---
site: bookdown::bookdown_site
---

```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```

# R Markdown

```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```

Answer 1

注意：这里提供了 3 个选项，没有一个是完美的。完美的解决方案可能依赖于对 bookdown 包的修改？

选项 1：
在 _output.yml 文件中像这样使用包含 before_body （建议here）：

bookdown::gitbook:
  css: assets/style.css
  includes:
    before_body: assets/big-image.html
    after_body: assets/footer.html

缺点：
i) 需要制作一个 html 文件来插入图片。
ii) 如果使用基于网络的图像，则不会在 Rstudio 查看器中显示。
iii) 如果使用本地图像，路径可能会混淆，并且不会在在线网页 html 渲染中显示
iv) 如果使用before_body: my_image.html，则在bookdown 的每一章顶部包含图片。替代选项in_header: my_image.html 似乎与侧边栏索引不兼容。

选项 2
通过 yaml 在 index.rmd 中插入图片，使用技巧 3 Add a Logo in your title/header/footer 下的解决方案 blog post

--- 
title: |
  ![](my_image.png)  
  My title

缺点：
i）当您将鼠标悬停在图像上时，它会在稍微不同的位置显示图像的副本（可以禁用此“悬停”行为吗？）
ii) 如果使用基于网络的图像，则不会在 Rstudio 查看器中显示。
iii) 如果使用本地图像，路径可能会混淆，并且不会在在线 Web html 渲染中显示

选项 3
下面的代码从here（您可以放在顶级标题下方）借用，大概直接通过编织过程并将其自身插入到最终的html中。问题是图像没有为自己腾出空间并最终覆盖第一个文本。有没有一些简单的 html/css 来解决这个问题？

<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />   

缺点：
i) 图像不会为自己腾出空间，最终会覆盖第一个文本。您可以通过 yaml 标题编码额外的空间（反复试验）来解决这个问题，如下所示：

title: |
    .      

    .  

    .  

    .  

site: bookdown::bookdown_site

Answer 2

以下是选项 2 和 3 的解决方法，使用 Markdown 和 CSS 设置图像样式，使用 HTML+CSS 设置文本样式；此外，使用 base64 图像（透明 gif）生成器作为元素之间的空间分隔符。
当心空格！ （在每行的末尾 - 放置两个空格并按 ENTER）
这些方法/黑客中的一种对您有用吗？如果不是，最好删除答案，这可能会误导其他人。

---
title: |
  ![](www/image.png){width=300px}|  
  |:-:|  
  ![](www/image.png){width=300px style="display: block; margin:0 auto"}  
  ![](www/image.png){width=300px height=90px align=left}  
  ![](www/image.png){width=300px height=90px align=center}  
  ![](www/image.png){width=300px height=90px align=right}  
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=150px}  
  R Markdown Title  
  <center>R Markdown Title</center>  
  <p style="text-align: right;">R Markdown Title</p>   
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=150px}
author: "Author Name"
date: "08/03/2020"
---

使用 Markdown 表来“样式化”图像|-| (left-aligned), |:-:| (centered) and |-:| (right-aligned) 可以很好地处理简单的 RMarkdown 输出。

我意识到您在页面顶部的# top level heading 下有一张图片 - 带有top:0px。导致图像重复，并可能导致悬停问题：

<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />

替换为：

![](http://stackoverflow.com/favicon.ico){width=50px style="display: block; margin:0 auto;"}

看看会发生什么。

---
title: |
  ![](https://i.imgur.com/GiViTbA.png){width=300px style="display: block; margin:0 auto;"}  
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=50px}  
  R Markdown Title  
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=50px}
output:
  html_document: default
---

# I'm a top level heading {-}

![](http://stackoverflow.com/favicon.ico){width=50px style="display: block; margin:0 auto;"}

Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.

```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```

编辑：

让我们试着找到一个共同点，A Minimal Book Example，github here。

在index.Rmd进行的调整：

--- 
title: |
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=300px}  
author: "Author Name"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
---

# Prerequisites

<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" /> 

This is a _sample_ book written in **Markdown**. You can use anything that Pandoc's Markdown supports, e.g., a math equation $a^2 + b^2 = c^2$.

index.Rmd 输出：

在Chapter: Introduction (01-intro.Rmd) 中进行的调整：

# Introduction {#intro}

![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=240px}

<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />

You can label chapter and section titles using `{#label}` after them, e.g., we can reference Chapter \@ref(intro). If you do not manually label them, there will be automatic labels anyway, e.g., Chapter \@ref(methods).

01-intro.Rmd 输出：

使用此解决方案，我们将使用 .png 图像“屏蔽”顶级标题 (# Introduction)，该图像将作为文本显示在目录中。
缺点：此外显而易见的 hack，图片width 必须至少等于或大于顶级标题标题。

Answer 3

编辑 这已被 Radovan 接受的答案所取代。

这是最好的答案，从我以前的answer 中选择选项 3，并结合代码方法从Radovan's answer 中创建相关空间。

如果你想在 YAML 中包含一个标题，你仍然会遇到问题（我不需要这个，因为我的标题在图片中）。

此外，在第一次加载页面时，它呈现得很好，但是如果您使用目录转到文档顶部，则看不到图像（此bookdown 使用的inheader 方法显示了更好的行为，但出现在每章的顶部，这是不希望的）。

---
title: |
  ![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=300px}  
output:
  html_document: default
---


# I'm a top level heading {-}
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" /> 

Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.

```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```

Answer 4

悬停复制图像的问题可以通过从\libs\gitbook-2.6.7\css\style.css生成的css文件中删除下面的行来解决

.book .book-header h1 a:hover{color:inherit;text-decoration:none}@media (max-width:1000px){.book .book-header h1{display:none}}

因此，下面的代码将图像放在标题的正上方：

--- 
title: |
   ![class='btn noHover'](images/Stats.png){width=400px style="display: block; margin:0 auto; align:center;" }
   <center>GEOG380 Basic Stats with R</center>
---