javascript - reveal.js 标题幻灯片覆盖

Question

我想设计我的 reveal.js 的第一个(标题)幻灯片与我的其他幻灯片略有不同。 我如何为“标题”幻灯片创建一个单独的部分环境:

1. 所有标题和文本居中？
2. 所有内容在中间垂直对齐？

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

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

我希望会有一些 <section data-center=true>覆盖选项，但似乎没有。我一直在摆弄 div，但我不是出色的 HTML/CSS 专家。

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

Answer 1

只需使用一个类来为您的标题幻灯片命名

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

并以比其他幻灯片更高的特异性设计它

h1 {
    text-align: left;
}

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

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