在四开演示中的所有幻灯片的左上角添加徽标

Mat*_*att 4 reveal.js quarto

我正在尝试使用 rstudio 的四开版实现创建幻灯片,并且我希望在节目中所有非标题幻灯片的左上角有一个通用图标。(我也希望它出现在标题幻灯片上,但我已经弄清楚了!)

在一张幻灯片上,我可以使用{background-image="logo.png" background-size=15% background-position="0% 0%"}并且该幻灯片效果很好。

在 YAML 中,

data-background-image: ./logo.png
data-background-size: 15%
data-background-position: 0% 0%
Run Code Online (Sandbox Code Playgroud)

非常适合标题幻灯片。如果我使用

background-image: logo.png
background-size: 15%
background-position: 0% 0%
Run Code Online (Sandbox Code Playgroud)

我在所有幻灯片上都得到了正确的图像,但它占据了整张幻灯片,不考虑尺寸参数。

关于如何处理这个问题有什么建议吗?也许背景实际上并不是执行此操作的正确方法,因为它只是一个徽标,但这似乎比尝试更改四开本中“徽标”的属性更容易,因为我没有看到任何选项改变它的大小。

sha*_*fee 7


更新:我编写了一个四开过滤器扩展,reveal-header通过 yaml 中的选项在所有幻灯片的左上角添加标题徽标header-logo,这可能是比下面描述的方法更简单的选项。


旧答案

如果您想为所有幻灯片(包括标题幻灯片)添加徽标,您可以通过logoYAML 键添加徽标并调整该徽标图像的 CSS 属性来更轻松地完成此操作。

---
title: "Untitled"
format: 
  revealjs:
    slide-number: true
    logo: placeholder.png
    css: logo.css
---

## Quarto

Quarto enables you to weave together content and executable code into a
finished presentation. To learn more about Quarto presentations see
<https://quarto.org/docs/presentations/>.

Run Code Online (Sandbox Code Playgroud)

标志.css

.reveal .slide-logo {
  display: block;
  position: fixed;
  bottom: unset !important;
  right: unset !important;
  top: 5px;
  left: 12px;
  height: 100px !important;
  width: 100x !important;
  max-width: unset !important;
  max-height: unset !important;
}
Run Code Online (Sandbox Code Playgroud)

带徽标的标题幻灯片

下一张带有徽标的幻灯片


根据需要更改height和css 属性。width

  • 噢,这样的话,是的,应该是可以改变的。如果你想将幻灯片编号保留在右下角,我认为你需要找到幻灯片编号的类选择器并对其应用 CSS 规则 (2认同)