演示文稿各部分的自动编号

Question

我有一个带有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 ...

如何做到这一点?

Answer 1

使用伪元素::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>

Answer 2

这只会在viewDistance选项足够大以加载整个演示文稿时起作用。