在 ioslides 演示文稿中添加页脚

添加页脚本身是不可能的。幸运的是，我们可以利用 jQuery 和 CSS 为使用 knitr 渲染的 ioslides 演示文稿的幻灯片添加页脚。首先，我们必须包含 jQuery 插件。这是由线完成的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

现在我们可以使用 jQuery 来改变演示文稿的 DOM（ 文档对象模型 ）。换句话说：我们改变了文档的 HTML 结构。一旦加载了演示文稿（$(document).ready(function() { ... })），我们选择所有没有类属性 .title-slide，.backdrop 或 .segue 的幻灯片，并在每张幻灯片关闭之前添加标签 <footer></footer>（因此在 </slide> 之前）。label 属性包含稍后将显示的内容。

我们现在要做的就是用 CSS 布局我们的页脚：

每个 <footer>（footer::after）之后：

• 显示属性 label 的内容
• 使用字体大小 12
• 放置页脚（距离幻灯片底部 20 像素，距离左侧 60 像素）

（其他属性可以忽略，但如果演示文稿使用不同的样式模板，则可能需要修改）。

author: "Martin Schmelzer"
date: "26 Juli 2016"
output: ioslides_presentation
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
    $(document).ready(function() {
      $('slide:not(.title-slide, .backdrop, .segue)').append('<footer label=\"My amazing footer!\"></footer>');    
    })
</script>

<style>
  footer:after {
    content: attr(label);
    font-size: 12pt;
    position: absolute;
    bottom: 20px;
    left: 60px;
    line-height: 1.9;
  }
</style>

## Slide 1

This is slide 1.

## Slide 2

This is slide 2

# Test

## Slide 3

And slide 3.

结果将如下所示：