在 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.

結果將如下所示：