Quarto revealjs 幻灯片的标题幻灯片上的自定义页脚

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

Custom Footer on the Title Slide for Quarto revealjs Slides

问题

我使用quarto制作我的幻灯片,使用revealjs和一个模板。

我正在寻找一种简单的方法来在标题幻灯片上定义不同的页脚。

目前,我的页脚只是这样定义的:

---
title: "My Title"
author:
  - name: "John Doe"
date: "2023-06-30"
date-format: long
format: inrae-revealjs
draft: true
footer: "My global footer"
license: "CC BY-SA"
bibliography: references.bib
---

我想在标题幻灯片上显示文档许可证。我考虑使用页脚来实现这一点。然而,我无法仅编辑标题幻灯片的页脚。

如果不行,您知道一种简单的方法来显示文档的许可证吗?

提前感谢。

英文:

I use quarto to make my slides with revealjs and a template.

I'm looking for a simple way to define a different footer on the title-slide.

Currently my footer is simply defined with :

---
title: "My Title"
author:
  - name: "John Doe"
date: "2023-06-30"
date-format: long
format: inrae-revealjs
draft: true
footer: "My global footer"
license: "CC BY-SA"
bibliography: references.bib
---

I want to display the document licence on the title-slide. I was thinking of using the footer for this. However, I can't manage to edit the title-slide footer only.

If not, do you know a simple way of displaying the licence on the document?

Thanks in advance

答案1

得分: 2

起初,我认为在revealjs格式中,license yaml 在这里没有起作用,因为它没有被列出来。

要在标题幻灯片上使用自定义页脚,您可以使用title-slide-attributes yaml 键,并在title-slide-attributes下使用数据属性,如data-footer: <自定义标题幻灯片页脚>

然后,使用 JavaScript 您可以编写处理data-footer的逻辑,以便在标题幻灯片的情况下仅显示自定义页脚文本。

add-custom-footer.html

<script type="text/javascript" charset="utf-8">
  function add_custom_footer() {
    let title_slide = document.querySelector("section#title-slide");
    let title_slide_footer = title_slide.getAttribute('data-footer');
    let footer = document.querySelector('div.footer p');
    let global_footer_text = footer.innerHTML;
    
    if (title_slide.classList.contains('present')) {
      footer.innerHTML = title_slide_footer;
    }
    
    Reveal.on( 'slidechanged' , event => {
        if (event.currentSlide.matches('#title-slide')) {
          footer.innerHTML = title_slide_footer;
        } else {
          footer.innerHTML = global_footer_text;
        }
      });
  };
  
  window.addEventListener("load", (event) => {
    add_custom_footer();
  });
</script>

presentation.qmd

---
title: "我的标题"
author:
  - name: "约翰·多伊"
date: "2023-06-30"
date-format: long
format: inrae-revealjs
draft: true
footer: "我的全局页脚"
bibliography: references.bib
title-slide-attributes: 
  data-footer: "CC BY-SA"
include-after-body: add-custom-footer.html
---

## Quarto

Quarto 可以帮助您将内容和可执行代码编织成最终的演示文稿。要了解更多关于 Quarto 演示文稿的信息,请参阅
<https://quarto.org/docs/presentations/>。

## 项目符号

当您单击**渲染**按钮时,将生成一个包含以下内容的文档:

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

## 代码

当您单击**渲染**按钮时,将生成一个演示文稿,其中包括内容和嵌入代码的输出。您可以像这样嵌入代码:

```{r}
1 + 1
```

<hr>

Quarto revealjs 幻灯片的标题幻灯片上的自定义页脚

Quarto revealjs 幻灯片的标题幻灯片上的自定义页脚

英文:

At first, I don't think the license yaml does anything in case of revealjs format, since it is not enlisted here.

Now to use a custom footer for title slides, you can make use of title-slide-attributes yaml key and use a data attribute like data-footer: &lt;A custom footer for title slide&gt; under the title-slide-attributes.

And then using javascript you can write the logics for handling that data-footer so that the custom footer text is shown only in the case of title slide.

add-custom-footer.html

&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;
  function add_custom_footer() {
    let title_slide = document.querySelector(&quot;section#title-slide&quot;);
    let title_slide_footer = title_slide.getAttribute(&#39;data-footer&#39;);
    let footer = document.querySelector(&#39;div.footer p&#39;);
    let global_footer_text = footer.innerHTML;
    
    if (title_slide.classList.contains(&#39;present&#39;)) {
      footer.innerHTML = title_slide_footer;
    }
    
    Reveal.on( &#39;slidechanged&#39; , event =&gt; {
        if (event.currentSlide.matches(&#39;#title-slide&#39;)) {
          footer.innerHTML = title_slide_footer;
        } else {
          footer.innerHTML = global_footer_text;
        }
      });
  };
  
  window.addEventListener(&quot;load&quot;, (event) =&gt; {
    add_custom_footer();
  });
&lt;/script&gt;

presentation.qmd

---
title: &quot;My Title&quot;
author:
  - name: &quot;John Doe&quot;
date: &quot;2023-06-30&quot;
date-format: long
format: inrae-revealjs
draft: true
footer: &quot;My global footer&quot;
bibliography: references.bib
title-slide-attributes: 
  data-footer: &quot;CC BY-SA&quot;
include-after-body: add-custom-footer.html
---

## Quarto

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

## Bullets

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

-   Content authored with markdown
-   Output from executable code

## Code

When you click the **Render** button a presentation will be generated 
that includes both content and the output of embedded code. You can 
embed code like this:

```{r}
1 + 1
```

<hr>

Quarto revealjs 幻灯片的标题幻灯片上的自定义页脚

Quarto revealjs 幻灯片的标题幻灯片上的自定义页脚

huangapple
  • 本文由 发表于 2023年6月19日 17:28:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76505317.html
匿名

发表评论

匿名网友

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

确定