完整覆盖背景图像在四开幻灯片标题页上,底部带有一排图标。

huangapple go评论58阅读模式
英文:

Full coverage background image on quarto title slide with a row of icons along the bottom

问题

我正在尝试使用Rstudio和quarto制作一个reavaljs演示文稿的标题幻灯片。我希望我的标题幻灯片具有全屏背景图像和底部的一个或多个小图标(但不显示在其他幻灯片上)。我尝试修改此方法(适用于xaringan)的建议,但没有成功。这是我的.qmd YAML和css:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    embed-resources: true
    css: css/slides.css
editor: source
---

slides.css:

.title-slide {
  background-image: url(https://placeholder.pics/svg/100),
                    url(https://picsum.photos/id/870/800/600?grayscale);
  background-position: 2% 98%, center;
  background-size: 100px, cover;
}

我还尝试修改title-slide-attributes以提供多个图像,但找不到适用的语法。根据@shafee的回答,我尝试了以下内容:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    theme: night
    embed-resources: true
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, cover
      data-background-position: 2% 98%, center
editor: source
---

问题在于,当我将revealjs单独放在一行上,以便可以包括其他细节,如embed-resources时,标题幻灯片上只显示图标。如果我颠倒这些顺序,背景图像就会显示出来(而不是灰度),但图标不会显示。无论title-slide-attributes块是否缩进,都会出现相同的行为。

英文:

I am trying to make a title slide for a reavaljs presentation using Rstudio and quarto. I would like my title slide to have full coverage background image and one or more small icons along the bottom (but not on other slides). I have attempted to modify this method suggested for xaringan, but have not had any success. Here is my .qmd YAML and css:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    embed-resources: true
    css: css/slides.css
editor: source
---

slides.css

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.title-slide {
  background-image: url(https://placeholder.pics/svg/100),
                    url(https://picsum.photos/id/870/800/600?grayscale);
  background-position: 2% 98%, center;
  background-size: 100px, cover;
}

<!-- end snippet -->

I have also tried altering the title-slide-attributes to provide multiple images, but could not find a syntax that worked.

Based on the response by @shafee below, I tried:

---
title: &quot;Test Presentation&quot;
author: &quot;Name&quot;
format: 
  revealjs:
    theme: night
    embed-resources: true
    title-slide-attributes: 
      data-background-image: &quot;https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale&quot;
      data-background-size: 100px, cover
      data-background-position: 2% 98%, center
editor: source
---

The issue is that when I pull revaljs out on its own line so that I can include other details such as embed-resources, only the icon shows up on the title slide. If I reverse the order of these, the background image shows up (in color instead of grayscale) but the icon is not present. The same behavior happens regardless of whether the title-slide-attributes block is indented or not.

答案1

得分: 1

你也可以在 Quarto revealjs 中使用 title-slide-attributes 来实现相同效果。

只需将图像路径传递为一个字符串(以逗号分隔)。

---
title: "测试演示"
author: "姓名"
format: revealjs
title-slide-attributes: 
  data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
  data-background-size: 100px, cover
  data-background-position: 2% 98%, center
---
## Quarto

Quarto 能够让你将内容和可执行代码编织成一个完整的演示文稿。

## 项目符号

当你点击 **渲染** 按钮时,将生成一个包括以下内容的文档:

-   使用 markdown 编写的内容
-   可执行代码的输出

完整覆盖背景图像在四开幻灯片标题页上,底部带有一排图标。

英文:

You can do the same for Quarto revealjs too using title-slide-attributes.

Just pass the image path in a string (comma separated).

---
title: &quot;Test Presentation&quot;
author: &quot;Name&quot;
format: revealjs
title-slide-attributes: 
  data-background-image: &quot;https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale&quot;
  data-background-size: 100px, cover
  data-background-position: 2% 98%, center
  
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

完整覆盖背景图像在四开幻灯片标题页上,底部带有一排图标。

答案2

得分: 0

感谢 @shafee,这个问题已经解决了。显然 embed-resources 与复杂的标题幻灯片不兼容。这太糟糕了,因为通常我不能向会议提供一个文件夹,他们希望我用一个单一的文件来演示和分享。我不确定这是否是一个 bug,但这肯定是 quarto/posit 开发者需要考虑的设计特性。

然而,在短期内,这非常好。感谢您的帮助!


title: "测试演示"
author: "姓名"
format:
revealjs:
theme: night
scrollable: true
echo: true
incremental: false
code-fold: true
code-overflow: scroll
embed-resources: false
title-slide-attributes:
data-background-image: "https://placeholder.pics/svg/100, https://placeholder.pics/svg/100,https://placeholder.pics/svg/100, https://picsum.photos/id/870/800/600?grayscale"
data-background-size: 100px, 100px, 100px, cover
data-background-position: "2% 98%, 50% 98%, 98% 98%, center"
editor: source

这将产生:
完整覆盖背景图像在四开幻灯片标题页上,底部带有一排图标。

英文:

Thanks to @shafee, this has been solved. Apparently embed-resources is not compatible with a complex title slide. This is too bad, because I cannot usually provide a folder to a conference—they want a single file for me to present from and to share. I am not sure this is a bug, but it is certainly a design feature for the quarto/posit developers to consider.

In the short-term, however, this is GREAT. Thanks for your help!

---
title: &quot;Test Presentation&quot;
author: &quot;Name&quot;
format: 
  revealjs:
    theme: night
    scrollable: true
    echo: true
    incremental: false 
    code-fold: true
    code-overflow: scroll
    embed-resources: false
    title-slide-attributes: 
      data-background-image: &quot;https://placeholder.pics/svg/100, https://placeholder.pics/svg/100,https://placeholder.pics/svg/100, https://picsum.photos/id/870/800/600?grayscale&quot;
      data-background-size: 100px, 100px, 100px, cover
      data-background-position: &quot;2% 98%, 50% 98%, 98% 98%, center&quot;
editor: source
---

This yields:
完整覆盖背景图像在四开幻灯片标题页上,底部带有一排图标。

huangapple
  • 本文由 发表于 2023年6月5日 21:10:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76406755.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定