reveal.js 标题幻灯片覆盖

Question

我想为我的 reveal.js 第一张（标题）幻灯片设置与其他幻灯片略有不同的样式。我如何为 "title" 幻灯片创建一个单独的部分环境：

我的默认（内容）幻灯片应该是 left-aligned 而不是垂直居中。这意味着在初始化部分 Reveal.initialize({... center: false, ...})

对于我的自定义 theme.css，所有标题和段落文本都是 left-aligned 和 text-align: left。

我希望有一些 <section data-center=true> 覆盖选项，但似乎没有。我一直在摆弄 div，但我不是什么伟大的 HTML/CSS 大师。

作为后续问题，如果在幻灯片上使用 <h1> 是否会自动触发？这将允许我对内容使用外部 Markdown，而不是其他任何内容。

Answer 1

只需使用 class 命名您的标题幻灯片

<section class="title-slide">
    <h1>Title</h1>
</section>

并设置比其他幻灯片更具体的样式

h1 {
    text-align: left;
}

.title-slide h1 {
    text-align: center;
}

这应该也可以解决您的第二个问题，而无需动态触发任何内容。

reveal.js title slide override