演示文稿部分的自动编号

问题描述

我有一个包含 Markdown 源代码的 Reveal.js 演示文稿，结构为部分：

<div class="reveal">
  <div class="slides">
    <section id="section1"
      data-markdown="section1.md">
    </section>
    <section id="section2"
      data-markdown="section2.md">
    </section>
    <!-- more sections... -->
  </div>
</div>

每个部分都制作为 Markdown 文件（使用“垂直幻灯片”功能）。我想在每张幻灯片上显示一个节号，以便于导航。目前，我在每个 Markdown 文件中硬编码了相同的节号：

<div class="eyebrow">Section 1</div>

# History
... as many "Section 1" as many vertical slides I have ...

相反，我想在代表一个部分的每个 Markdown 文件的开头声明一个变量 section，然后在文件的其余部分引用这个变量。伪代码：

section=1
<div class="eyebrow">Section $section</div>

# History
... and so on,through the file ...

如何做到这一点？

解决方法

使用伪元素 ::before 显示一个数字，就像一个列表，并用 counter-reset 重置计数器。

.slides {
  counter-reset: section;
}

section::before {
  counter-increment: section;
  content: counter(section)".";
}

section {
  /* JUST SOME STYLING TO MAKE UP FOR THE LACK OF CONTENT */
  border-bottom: 1px solid #ccc;
  min-height: 40px;
  margin-bottom: 0.5rem;
}

<div class="reveal">
  <div class="slides">
    <section id="section1"
      data-markdown="section1.md">
    </section>
    <section id="section2"
      data-markdown="section2.md">
    </section>
    <section id="section3"
      data-markdown="section3.md">
    </section>
    <section id="section4"
      data-markdown="section4.md">
    </section>
    <section id="section5"
      data-markdown="section5.md">
    </section>
    <!-- more sections... -->
  </div>
</div>