五三八式的文中脚注，用于书稿的编写。

Question

我正在创建一个项目，使用{下订}，我想把脚注格式化，当选择上标时直接出现在文本中，就像在FiveThirtyEight文章中一样（见 此处 的例子）。) 我们的想法是，当用户点击脚注时，段落会展开以显示脚注文本，然后在关闭脚注时压缩回正常状态。

我已经找到了一些资源来实现这个功能。

• Stackoverflow的问题 此处
• https:/medium.com@bnjmnbnjmnin-line-notes-with-only-html-css-f181c5ceef59。
• https:/www.viget.comarticlesof-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是 此处和渲染的输出 此处. 我已经成功地将脚注隐藏在页面底部，但一直无法让脚注在选择脚注上标时显示在正文中。

有没有办法用{bookdown}来实现脚注的这种样式？还是说这是Pandoc的限制？

Answer 1

Pandoc通过过滤器让你完全控制输出。以下是一个 Lua过滤器 它使用HTMLCSS方法来隐藏脚注。请看这个 R工作室的文章 关于如何用bookdown使用Lua过滤器。

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