如何在Blogdown中将脚注设置为悬浮提示框？

Hadley Wickham的《Advanced R》里的脚注悬浮效果是bookdown工具链内置的功能，而非原生Rmarkdown特性。下面是在blogdown中实现该效果的两种方案：

方案一：直接使用bookdown输出格式（最简单） #

在你的blogdown文章YAML头部，将输出格式替换为bookdown::html_document2，它会自动处理脚注为悬浮提示框：

output:
  bookdown::html_document2:
    toc: false  # 根据需求调整配置
    number_sections: false

编译后，标准Rmarkdown脚注（[^1]标记 + 文末[^1]: 脚注内容）会自动变成悬浮效果，无需额外代码。

方案二：手动引入JS/CSS（适配原生blogdown） #

如果不想切换到bookdown的输出格式，可以手动添加样式和脚本实现：

1. 添加控制悬浮框的CSS（放在文章头部或站点全局样式中）：

.footnotes { display: none; }
.footnote-popup {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
  max-width: 300px;
  display: none;
}
.footnote-ref:hover + .footnote-popup { display: block; }

2. 添加处理脚注的JavaScript（放在文章末尾或站点全局脚本中）：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.footnote-ref').forEach(ref => {
    const footnoteId = ref.getAttribute('href').slice(1);
    const content = document.getElementById(footnoteId).querySelector('.footnote-content').innerHTML;
    const popup = document.createElement('div');
    popup.className = 'footnote-popup';
    popup.innerHTML = content;
    ref.parentNode.insertBefore(popup, ref.nextSibling);
    
    ref.addEventListener('mouseenter', () => popup.style.display = 'block');
    ref.addEventListener('mouseleave', () => popup.style.display = 'none');
  });
});

这段脚本会自动将页脚的脚注内容提取出来，生成悬浮提示框绑定到脚注链接上。

为什么源码里看不到特殊配置？ #

《Advanced R》的源码里只用了标准Rmarkdown脚注语法，因为bookdown在编译时会自动将这些普通脚注转换成带悬浮效果的HTML结构，所有处理逻辑都在bookdown的编译流程和模板中，无需在文章源码中额外配置。

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