Добавьте изображение в вывод Rdowndown 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:
Использование включает в себя с before_body, как это в вашем файле _output.yml (предлагается здесь ):

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) Включает изображение вверху каждой главы bookdown при использовании before_body: my_image.html. Альтернативная опция in_header: my_image.html не совместима с индексом боковой панели.

Вариант 2
Вставьте изображение через yaml в index.rmd, используя решение в разделе 3 Добавьте Lo go в заголовок / верхний / нижний колонтитул в этом сообщении в блоге

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

Недостатки:
i) При наведении на изображение, оно отображает копию изображения в слегка в другом месте (можно ли отключить это поведение при наведении курсора?)
ii) При использовании веб-изображения не будет отображаться в средстве просмотра Rstudio.
iii) При использовании локального изображения путь может быть перепутан и не будет отображаться в онлайн-сети html рендеринг

Вариант 3
Код ниже заимствован из здесь (который вы можете поместить ниже верхнего уровня заголовок) предположительно проходит непосредственно через процесс вязания и вставляет себя в окончательный 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"
---

Использование таблицы уценок для "стилизации" изображений |-| (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)
```

EDIT :

Попробуем найти общий язык, Пример минимальной книги , github здесь .

Корректировки, сделанные в 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 выход:

С помощью этого решения мы «маскируем» верх заголовок уровня (# Introduction) с изображением .png, которое будет отображаться в таблице содержания в виде текста.
Недостаток : помимо очевидного взлома, изображение width должно быть как минимум равно или шире заголовка верхнего уровня.

Answer 3

РЕДАКТИРОВАТЬ Это заменено принятым ответом Радована.

Это был лучший ответ, использовавший вариант 3 из моего предыдущего ответа и комбинирующий кодовый подход к сделать соответствующий пробел из ответа Радована .

У вас все еще будут проблемы, если вы захотите включить заголовок в YAML (мне это не нужно, поскольку мой заголовок изображен на картинке).

Кроме того, при первой загрузке страница, она выглядит красиво, но изображение не видно, если вы go в верхней части документа, используя оглавление (подход 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)
```