英文:
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: "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
---
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: "Test Presentation"
author: "Name"
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 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: "Test Presentation"
author: "Name"
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
---
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论