xaringan - 将 Logo 添加到标题幻灯片

Question

如何正确地将 Logo 添加到标题幻灯片的顶部？

经过一番尝试和错误，我想出了这个，并将其添加到 css 文件中。

.title-slide.remark-slide-content:before{
  position: absolute;
  content:url(logo.svg);
  height:60px;
}

这似乎适用于一个 Logo ，并且位于右上角。我还想在左上角添加另一个 Logo 。有更好的方法吗？

Answer 1

一种方法是使用 seal: false 和一些 div 创建自定义标题幻灯片。

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true 
      countIncrementalSlides: false
    seal: false
---

<div class="my-logo-left"></div>

<div class="my-logo-right"></div> 

# hello

---

CSS

.my-logo-left {
content: "";
    position: absolute;
    top: 15px;
    left:   20px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}

.my-logo-right {
content: "";
    position: absolute;
    top: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}