如何为Jupyter Notebook幻灯片添加页码？

我想给Jupyter Notebook生成的幻灯片添加页码，曾找到相关讨论但不确定具体实现方法。以下是制作幻灯片的可复现代码：

# Jupyter Notebook Slides

I would like to add a slide number here?

使用终端命令生成并预览幻灯片：

jupyter nbconvert test_slides.ipynb --to slides --post serve

实现方法 #

方法1：在Notebook中添加自定义HTML（无需修改模板）

这是最便捷的方式，直接在Notebook末尾添加一个Raw格式的单元格，插入以下内容：

<style>
.slide-number {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
    color: #666;
    z-index: 999;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        // 创建页码元素
        const slideNumber = document.createElement('div');
        slideNumber.className = 'slide-number';
        document.querySelector('.reveal').appendChild(slideNumber);
        
        // 更新页码的函数
        function updatePageNum() {
            const current = Reveal.getIndices().h + 1;
            const total = Reveal.getTotalSlides();
            slideNumber.textContent = `${current} / ${total}`;
        }
        
        // 监听幻灯片切换事件
        Reveal.on('slidechanged', updatePageNum);
        // 初始加载时更新页码
        updatePageNum();
    }, 1000);
});
</script>

添加完成后，重新执行jupyter nbconvert命令生成幻灯片，即可在右下角看到「当前页/总页数」格式的页码。

方法2：自定义nbconvert模板（适合批量生成）

如果需要批量给多个Notebook添加页码，可以修改nbconvert的reveal.js模板：

1. 找到nbconvert的模板目录（通常在Python的site-packages路径下，比如/usr/local/lib/pythonX.X/site-packages/nbconvert/templates/reveal或C:\PythonXX\Lib\site-packages\nbconvert\templates\reveal）
2. 复制目录中的template.html到本地，重命名为custom_template.html
3. 打开custom_template.html，在</body>标签前插入以下代码：

   <style>
   .slide-number {
       position: fixed;
       bottom: 20px;
       right: 20px;
       font-size: 16px;
       color: #666;
   }
   </style>
   <script>
   Reveal.addEventListener('ready', function() {
       const slideNumber = document.createElement('div');
       slideNumber.className = 'slide-number';
       document.querySelector('.reveal').appendChild(slideNumber);
       
       function updateNum() {
           const current = Reveal.getIndices().h + 1;
           const total = Reveal.getTotalSlides();
           slideNumber.textContent = `${current} / ${total}`;
       }
       
       Reveal.on('slidechanged', updateNum);
       updateNum();
   });
   </script>
   

4. 转换时指定自定义模板：

   jupyter nbconvert test_slides.ipynb --to slides --template custom_template.html --post serve
   

内容的提问来源于stack exchange，提问作者Quinten