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

Question

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

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

---
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个选项，其中none个是完美的。完美的解决方案可能依赖于对 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) 如果使用 web-based 图片，将不会在 Rstudio 查看器中显示。
iii) 如果使用本地图像，路径可能会混淆并且不会在在线网络中显示 html 呈现
iv) 如果使用 before_body: my_image.html，则在 bookdown 每章的顶部包含图像。替代选项 in_header: my_image.html 似乎与边栏索引不兼容。

选项 2
在 index.rmd 中通过 yaml 插入图像，使用技巧 3 Add a Logo in your title/header/footer at this blog post

下的解决方案

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

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

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

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

缺点：
i) 图片没有为自己腾出空间，最终覆盖了第一个文本。你可以通过像这样的 yaml 标题编码额外的 space（试错）来解决这个问题：

title: |
    .      

    .  

    .  

    .  

site: bookdown::bookdown_site

Answer 2

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

---
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 table 到 "style" 图片 |-| (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://whosebug.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://whosebug.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 输出：

使用此解决方案，我们是 "masking" 带有 .png 图像的顶级标题 (# Introduction)，它将作为文本显示在内容的 Table 中。
缺点：除了明显的 hack，图像 width 必须至少等于或宽于顶级标题。

Answer 3

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

这是最佳答案，采用了我之前 answer, and combining a code approach to making the relevant space from Radovan's answer 中的选项 3。

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

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

---
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 文件中删除下面的行来解决。 18=]

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

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

Add an image to Rmarkdown Bookdown output before top level heading

r-markdown

bookdown