用于预订的 FiveThirtyEight 样式的文本脚注

Question

我正在使用 {bookdown} 创建一个项目，并且我希望将脚注格式化为在选择上标时直接出现在文本中，就像在 FiveThirtyEight 文章中发生的那样（参见 here 示例） .这个想法是，当用户单击脚注时，段落会展开以显示脚注文本，然后在脚注关闭时压缩恢复正常。

我找到了一些实现这一点的资源：

• Stackoverflow 问题here
• https://medium.com/@bnjmnbnjmn/in-line-notes-with-only-html-css-f181c5ceef59
• https://www.viget.com/articles/of-note-better-text-annotations-for-the-web/

但是，这些解决方案似乎都假定实际脚注文本位于具有关联类的 <span> 标记内。但是，从 {bookdown} 和 Pandoc 生成的 HTML 脚注似乎并非如此。 HTML 如下所示：

<p>
  "Figures and tables with captions will be placed in "
  <code>
    "figure
  </code>
  " and "
  <code>
    "table"
  </code>
  " environments, respectively."
  <a href="#fn1" class="footnote-ref" id = "fnref1"><sup>1</sup></a>
</p>

<div class="footnotes">
  <hr>
  <ol start="1">
    <li id="fn1">
      <p>
        "Here is a fancy footnote."
        <a href="intro.html#fnref1" class="footnote-back">"<-"</a>
      </p>
    </li>
  </ol>
</div>

因此，不仅脚注放置在未分类的<p> 标记中，而不是分类的<span> 标记中，脚注本身也位于完全独立的<div> 中，而不是出现在与其他标记相同的标记中文本，与链接示例中的情况一样。

根据上面的链接示例，我创建了一个 bookdown reprex 来尝试使用 CSS 和 javascript 的组合来完成这项工作。 GitHub repo 是here，渲染输出是here。我已成功隐藏页面底部的脚注，但在选择脚注上标时无法让脚注在文本中显示。

有没有办法使用 {bookdown} 以这种方式设置脚注样式？还是这是 Pandoc 的约束？

Answer 1

Pandoc 让您可以通过过滤器完全控制输出。以下是Lua filter，它使用 HTML/CSS 方法隐藏/显示脚注。请参阅此R Studio article，了解如何将 Lua 过滤器与 bookdown 一起使用。

-- how many notes we've seen yet.
local note_number = 0

local fn_opening_template = [[<span id="fn-%d"><!--
--><label for="fn-%d-toggle"><sup>%d</sup></label><!--
--><input type="checkbox" hidden id="fn-%d-toggle"/>
]]
local fn_close = '</span>'

local style_css = [[<style>
input[type=checkbox][id|=fn] + span {display:none;}
input[type=checkbox][id|=fn]:checked + span {display:block;}
</style>
]]

-- Use custom HTML for footnotes.
function Note (note)
  note_number = note_number + 1
  local fn_open = fn_opening_template:format(
    note_number, note_number, note_number, note_number)
  return {
    pandoc.RawInline('html', fn_open),
    pandoc.Span(
      pandoc.utils.blocks_to_inlines(note.content),
      pandoc.Attr(string.format('fn-%d-content', note_number))
    ),
    pandoc.RawInline('html', fn_close)
  }
end

function Meta (meta)
  local header_includes = meta['header-includes']
  -- ensure that header_includes is a MetaList
  if not header_includes then
    header_includes = pandoc.MetaList{}
  elseif header_includes.t ~= 'MetaList' then
    header_includes = pandoc.MetaList {header_includes}
  end
  table.insert(
    header_includes,
    pandoc.MetaBlocks{pandoc.RawBlock('html', style_css)}
  )
  meta['header-includes'] = header_includes
  return meta
end