Могу ли я добавить логотип на каждый слайд шаблона xaringan с помощью css?

Question

Я хотел бы адаптировать предоставленный здесь файл.css, добавив небольшой логотип в верхнем правом углу каждого слайда, кроме заголовка, обратного и последнего слайдов. В идеале я могу просто добавить что-то простое в файл.css, а не вручную кодировать каждый слайд презентации.

Я пытался добавить это

background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;

в

.remark-slide-content {
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

получить

.remark-slide-content {
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

изображение отображается на всех слайдах, включая заголовок и переход. Это даже перезаписывает изображение слайда.title.

Answer 1

Вы можете сделать следующее, чтобы исключить title-slide:

.remark-slide-content:not(.title-slide){
  background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

но недостатком этого является то, что если у вас есть фоновое изображение на других слайдах, оно перезапишет изображение выше. Таким образом, вы можете определить другой класс, например, exclude также:

.remark-slide-content:not(.exclude){
  background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

.logopos {
  position: absolute;
  top: 9%;
  left: 15%;
}

и для соответствующего слайда, у которого есть проблема с другим фоновым изображением, отключите это и добавьте его вручную. Например

class: exclude 
background-image: url("bla")

content

<img class="logopos" src="https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png">

Answer 2

Недавно наткнулся на посылку xaringanExtraГаррика Аден-Буйе, см. https://pkg.garrickadenbuie.com/xaringanExtra/. Множество полезных функций, включая очень простой вариант работы с логотипом. Вы просто добавляете кусок

```{r xaringan-logo, echo=FALSE}
xaringanExtra::use_logo(
image_url = <fill in your path> )
```

и все.